We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

display chips with a specific template

Thread ID:

Created:

Updated:

Platform:

Replies:

150895 Jan 23,2020 03:00 PM UTC Feb 3,2020 04:04 AM UTC Blazor 7
loading
Tags: Chips
ebi torabi
Asked On January 23, 2020 03:00 PM UTC

Hi. Is it possible to display chips with a specific template? For example, there are 2 chips in a row.

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On January 23, 2020 06:47 PM UTC

Hi Ebi, 

Greetings from Syncfusion support. 

We have looked into your query. Based on the provided details, we understood that you are expecting to render two chip elements in a row. 

This can be achieved in EJ2 Chips, please check out the following in which we have depicted how to render the chips in row. 

 
Also, we recommend you go through our documentation content on EJ2 Chips component in Blazor. It would be help for you to know more about this component. 
 
Documentation:  
 
 
 


Please, let us know if you need further assistance. 
 
Regards, 
Shameer Ali Baig S. 


ebi torabi
Replied On January 23, 2020 10:58 PM UTC

Hi Shameer Ali Baig S. 
Thank you very much for your quick response.
 I couldn't say it well.
I have 20 chips, which I want to display only 2 in each row.
That is, the chips are displayed vertically, not horizontally.


Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On January 24, 2020 12:54 PM UTC

Hi Ebi, 
 
Thanks for the update. 
 
We have checked your reported query to display the two chips in a single row. Chip component is rendered based on parent element width. To achieve your requirement, you can adjust the width of the chip component's parent element. You can customize Chip elements by using CSS styles, to display the chip, vertically. 
 
Refer the below code snippet. 

<style> 
  .e-chip { 
      /* Align the chip element vertically*/ 
     width: 50px!important; 
     height: 100px!important; 
     writing-mode: vertical-rl; 
  } 
  #container { 
      /*  Set the container width*/ 
      width:125px; 
  } 
 
</style> 

For your reference, we have attached a sample. Refer the sample link below. 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S. 


ebi torabi
Replied On January 25, 2020 07:51 AM UTC

Thanks for your quick and good response. The problem was resolved. But now I have another problem. Please see the attached screenshot.

Attachment: chip_6bdfa7f8.zip

Sowmiya Padmanaban [Syncfusion]
Replied On January 27, 2020 10:29 AM UTC

Hi Ebi,  
 
We have checked your reported query  to align the icons in Chip component. You can align the align the icon using CSS styles in below ways. 
 
1.      Align the element using chip text element. 
.e-chip-text { 
        width: 150px; 
        text-align:center; 
    } 
 
We have prepared a simple sample for your requirement. Refer the sample link below. 
 
 
Please let us know, if you need any further assistance on this. 
 
Regards,  
Sowmiya.P 


ebi torabi
Replied On February 1, 2020 06:47 AM UTC

Hi Sowmiya.P .Thank you very much. it work well.

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On February 3, 2020 04:04 AM UTC

Hi Ebi, 
 
We are happy to hear that your problem was resolved. Please, get back to us if you need any other assistance. 
 
Regards, 
Shameer Ali Baig S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon