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

List View overlapping items

Dear all,

According to my previous thread that I created ListView item with color picker. All functional requirements are working perfectly. But only problem is when increasing the length of item value, It will overlapped and won't be able to pick color. Please help me to avoid this issue using better solution. (Appreciate if you can add new line to long item and show color picker button on the 2nd line)


Thank you.

5 Replies

BM Balachandar Murugesan Syncfusion Team April 8, 2019 12:45 PM UTC

Hi Isanka, 
We can achieve your requirement by adding a CSS Class to the Listview component as 'e-list-template' and everything will be aligned as you expected. As you requested the colorpicker component also will be in the second line of the list item.
You can learn more about the template option here.
Docs: 
https://ej2.syncfusion.com/angular/documentation/listview/customizing-templates/?no-cache=1
Sample: 
http://www.syncfusion.com/downloads/support/forum/142929/ze/list-color-picker-1671360405
 
 
Regards, 
Balachandar M. 



NE Neo April 9, 2019 05:45 AM UTC

Hi,

I tried like you mentioned. But didn't work. I put cssClass="e-list-template" and listview-colorpicker-container in .html. Also added ,

.e-list-wrapper .e-list-content.listview-colorpicker-container {
text-align: left;
}


CI Christopher Issac Sunder K Syncfusion Team April 9, 2019 11:00 AM UTC

Hi Isanka, 

With the above mentioned code, the listview should be automatically adjusted its with based on the content while using template and the 
colorpicker should be on the second line. If doesn't work, then it could be due to older version of the listview where the 
CSS templating features aren't implemeted.  

Could be please update us the package details of the EJ2 components you are using in your project? or you can try updating 
the EJ2 components to the latet versions and get it working. Also we have attached a live version of sample for your  
reference. 


Thanks, 
Christo 



NE Neo replied to Christopher Issac Sunder K April 10, 2019 04:43 AM UTC

Hi Isanka, 

With the above mentioned code, the listview should be automatically adjusted its with based on the content while using template and the 
colorpicker should be on the second line. If doesn't work, then it could be due to older version of the listview where the 
CSS templating features aren't implemeted.  

Could be please update us the package details of the EJ2 components you are using in your project? or you can try updating 
the EJ2 components to the latet versions and get it working. Also we have attached a live version of sample for your  
reference. 


Thanks, 
Christo 


Hi Sunder,

Before doing that modification, I want to do high priority task. How to set first item default color without opening pop ups when page load? (Should be done inside the .TS file)


CI Christopher Issac Sunder K Syncfusion Team April 10, 2019 09:13 AM UTC

Hi Isanka, 

You can dynamically change the color by assigning the color inside the data source. 
Then you need to add the background-color property to the color picker and assign the data source color variable to the background-color property value. Automatically the color will update inside the color picker. Then you need to assign the color picker value as data source color variable. Then only the selected color-based color picker popups will be open. 

We have created a sample based on query. Please refer the below online sample and modify the sample if you have any concerns 

Thanks,
Christo 


Loader.
Live Chat Icon For mobile
Up arrow icon