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.
Unfortunately, activation email could not send to your email. Please try again.

Customizing css

Thread ID:

Created:

Updated:

Platform:

Replies:

127570 Nov 24,2016 01:47 AM Jan 12,2017 06:51 AM JavaScript 6
loading
Tags: ejButton
Alexey Korsakov
Asked On November 24, 2016 01:47 AM

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 [Syncfusion]
Replied On November 25, 2016 02:38 AM

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:   
  
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
Replied On January 10, 2017 08:08 PM

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 [Syncfusion]
Replied On January 11, 2017 07:53 AM

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
Replied On January 11, 2017 01:38 PM

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
Replied On January 11, 2017 08:31 PM

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 [Syncfusion]
Replied On January 12, 2017 06:51 AM

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.  

 

Regards,  
Deepa L. 


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.

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.

;