Multiselect Customizing Template list css issue

[gary]

Hi

I am working on Multiselect Customizing Template given on https://demos.telerik.com/kendo-ui/multiselect/template

I followed the example and created the same into my project. But the issue i am facing is that I have to copy the css as given in the example and add it into my css file.

Now talking about the css linked with #customers-list

This id is generated automatically by kendo.

Now if i want to add multiselect at multiple places into my project i have to add new id dependency into the css for it to support the image styling with the text.

Is there any way that i only create the CSS ones and use it for other select boxes as well

CSS in example:

 #customers-list .k-item {
                    line-height: 1em;
                    min-width: 300px;
                }
                
                /* Material Theme padding adjustment*/
                
                .k-material #customers-list .k-item,
                .k-material #customers-list .k-item.k-state-hover,
                .k-materialblack #customers-list .k-item,
                .k-materialblack #customers-list .k-item.k-state-hover {
                    padding-left: 5px;
                    border-left: 0;
                }

                #customers-list .k-item > span {
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    display: inline-block;
                    vertical-align: top;
                    margin: 20px 10px 10px 5px;
                }

                #customers-list .k-item > span:first-child {
                    -moz-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    margin: 10px;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background-size: 100%;
                    background-repeat: no-repeat;
                }

                #customers-list h3 {
                    font-size: 1.2em;
                    font-weight: normal;
                    margin: 0 0 1px 0;
                    padding: 0;
                }

                #customers-list p {
                    margin: 0;
                    padding: 0;
                    font-size: .8em;
                }

[Neli]

Hello Gary,

You could indeed modify the provided styles in order to apply them to multiple widgets. For example, you could use some of the other classes or attributes of the same element (screencast). 

I modified the the style and instead of using the '#customers-list' id currently  .k-list-container[data-role="popup"] is used. As you will see in the Dojo example linked here, this way the style is applied to both Multiselects. 

Note, that the data-role attribute and k-list-container class are also used by other widgets, so it is possible using the style in this way to affect other Kendo widgets on the page if there are such. 

Let me know in case you have additional questions on the matter.

Regards,
Neli
Progress Telerik