Customizing css

[Alexey Korsakov]

Hello

I am customizing dropdownlist's css.
I have two problems. Both are related to "hover".
1. I need to set background color for triangle on hover.
2. I need to set background color for hovered item in the list.
Available on screenshots.
Which class should be customized?

Attachment: Desktop_ba300d18.zip

[Prince Oliver]

Hi Hareesh,   

  

Thanks for contacting Syncfusion support.   

  

To customize dropdown list’s appearance on hover state, we can use our theme studio, please refer to the following link:   

http://js.syncfusion.com/themestudio/ 

  

In the left pane, we can find the hover state customization. We can use filter option to filter the required controls and apply various customizations on them. Once its finished you can download your customized theme and refer them in the project.   

  

Regards,   

Prince 

[horacioj]

Hi,

I have a related question. I don't want to customize the CSS, simply use any standard theme. 

I'm just getting started to play with syncfusion. 

This is the problem I have: http://jsfiddle.net/rkbwxfhr/4/

Using http://purecss.io/, a Kendo dropdown works as expected (it is aligned and next to the label), however a syncfusion dropdown does not (i.e. it is not next to its 'bike' label).

Any idea why this happens, and if there is an (easy) fix? I really don't want to have deal with these kind of issues. 

Many thanks in advance.

[Prince Oliver]

Hi Alexey, 

Thanks for your update. 

We were able to reproduce the CSS issue in your shared sample. Setting the display property to inline-block for dropdownlist wrapper and container overflow to inherit will fix the issue. Have a look at the below code snippet. 

<style> 

        .e-ddl { 

            display: inline-block; 

        } 

 

        .e-in-wrap { 

            overflow: inherit; 

        } 

    </style> 

Refer to the following link for JS Playground sample: http://jsplayground.syncfusion.com/qm4p5dya 

Regards, 

Prince 

[horacioj]

Thanks for your fast reply,  Prince.

I was able to easily fix the datepicker using the same idea, but I couldn't for the slider: https://jsfiddle.net/horacioj/rkbwxfhr/

PS: I couldn't figure out how to create and link something in http://jsplayground.syncfusion.com/

I simply updated http://jsplayground.syncfusion.com/qskqvhei . I don't know if you'll see my updates, though

[horacioj]

Thanks for your fast reply,  Prince.

I was able to easily fix the datepicker using the same idea, but I couldn't for the slider: https://jsfiddle.net/horacioj/rkbwxfhr/

PS: I couldn't figure out how to create and link something in http://jsplayground.syncfusion.com/

I simply updated http://jsplayground.syncfusion.com/qskqvhei . I don't know if you'll see my updates, though

Hi, again. I've now updated http://jsplayground.syncfusion.com/h1auygap , adding buttons.The injected CSS is very intrusive, for the buttons too.   Is there any way to have an 'agnostic' theme, having only the things is needs to work properly, without that many decisions (size, color, positioning, etc.) embed? If not, how can I fix the button (and the slider, etc.)?

e.g. (regarding the button), this is in ej.widgets.core.min.css

   .e-btn.e-txt {

       padding: .1em .4em .3em;

   }

and other things like background, color, etc. are defined in ej.theme.min.css

Therefore, removing a reference to ej.theme.min.css would not be enough (and I guess could break other things)

Many thanks

[Deepa Loganathan]

Hi Alexey,  

We have created a new incident for the last reported Button and Slider related queries. Please follow up the incident for further assistance.