This is a migrated thread and some comments may be shown as answers.

Client Filtering CSS

3 Answers 165 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Paul Ridden
Top achievements
Rank 1
Veteran
Paul Ridden asked on 06 Oct 2016, 02:50 PM

Hello,

I'm about to implement the DropDownList Client Filtering function as per http://demos.telerik.com/aspnet-mvc/dropdownlist/clientfiltering.

However, due to the complex CSS of my site, the magnify glass icon in the search box has been mis-aligned.

I'm struggling to find the CSS that relates to the said icon.

Please can someone tell what CSS I need to adjust the icon?

Or can someone please tell me how to move the icon 5 pixels to the left?

Thanks in advance.

3 Answers, 1 is accepted

Sort by
0
Accepted
Orlin
Telerik team
answered on 10 Oct 2016, 08:22 AM
Extension settingsExtension settingsExtension settings

Hello Paul,

To style the magnifying glass icon in the DropDownList you can use this CSS selector:

.k-list-filter .k-icon.k-i-search {
  right: 11px; /* This will move the icon 5px to the left */
}

If this selector is not specific enough, you may need to inspect your existing styles and increase the specificity a bit.

I hope this helps.
 

Regards,
Orlin
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Paul Ridden
Top achievements
Rank 1
Veteran
answered on 11 May 2018, 10:43 AM

Hello.

Were now using v2018.1.221 and the above fix is no longer working. Please log on to our test environment.

https://tasking.skillweb.co.uk/Tasking/kiwi/Admin

Account Key: LRAN2

: Skillweb

Password: Abc12345

Under Operations -> Occurrence Log, Expand the 'All Locations' drop-down list to see the magnifying glass icon misaligned with .  can someone tell what CSS I need to;

a) Move the icon to the right or

b) widen the textbox of the filter

Thanks in advance

 

0
Accepted
Ivan Danchev
Telerik team
answered on 14 May 2018, 09:26 AM
Hello,

There is a rule in your custom CSS that applies max-width: 280px; to all input elements. So to override this rule and bring back the default max-width value of the DropDownList's filter input you can apply the following CSS rule:
.k-list-filter>.k-textbox {
    max-width: none !important;
}


Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
DropDownList
Asked by
Paul Ridden
Top achievements
Rank 1
Veteran
Answers by
Orlin
Telerik team
Paul Ridden
Top achievements
Rank 1
Veteran
Ivan Danchev
Telerik team
Share this question
or