Multiselect Customizing Template list css issue

1 Answer 23 Views
MultiSelect
gary
Top achievements
Rank 1
gary asked on 04 Sep 2021, 11:47 AM

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;
                }

Max
Top achievements
Rank 1
commented on 16 Sep 2021, 12:49 PM | edited

Increasing the size of the workforce through outsourcing is relatively easy with https://mlsdev.com/services/custom-software-development. There are many vendors who specialize in providing software development services for a small to medium-sized business. Because there are numerous options, it is possible to match the needs of the organization to the appropriate outsourcing vendor. This is advantageous in several ways. For one thing, larger organizations often require more staffing, which may not always be available within the business. Secondly, large organizations frequently utilize more permanent employees, which limits the flexibility of temporary workers.

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 08 Sep 2021, 10:26 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
MultiSelect
Asked by
gary
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or