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. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. display chips with a specific template

display chips with a specific template

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

7 Replies
SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team 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. 


ET ebi torabi 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.


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team 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. 


ET ebi torabi 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

SP Sowmiya Padmanaban Syncfusion Team 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 


ET ebi torabi February 1, 2020 06:47 AM UTC

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

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team 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. 


Loader.
Up arrow icon