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

List View overlapping items

Thread ID:

Created:

Updated:

Platform:

Replies:

143847 Apr 8,2019 04:13 AM UTC Apr 10,2019 09:13 AM UTC Angular - EJ 2 5
loading
Tags: ListView
Neo
Asked On April 8, 2019 04:13 AM UTC

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.

Balachandar Murugesan [Syncfusion]
Replied On 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. 


Neo
Replied On 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;
}

Christopher Issac Sunder K [Syncfusion]
Replied On 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 


Neo
Replied On 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)

Christopher Issac Sunder K [Syncfusion]
Replied On 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 


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