ComboBox - Wrong styling in Google Chrome

7 posts, 0 answers
  1. Steve
    Steve avatar
    17 posts
    Member since:
    Oct 2014

    Posted 23 Jun 2015 Link to this post

    Hello,

    we're currently developing a web application with Kendo UI and we have a problem with the ComboBox style in Google Chrome. As you can see in the attached pictures, the margin of the ComboBox is right in IE/Firefox and the gap to the next control is displayed right. But in Google Chrome, there is no spacing in between - I suspect it has something to do with the CSS for when you hover the Dropdown-Arrow, since the space underneath it turns blue like the arrow itself (see Chrome screenshots). This portion that turns blue is exactly as high as the margin in it should be and which is correctly shown in IE/Firefox (3px).

    I tried changing the CSS behind the ComboBox in different style sheets, but changing margins is no real option, since this would make the ComboBox show incorrectly in IE/Firefox instead of Chrome. As mentioned, I think it has something to do with the styling while you hover the dropdown, but I didn't find out more. Those anyone know what the problem is and where I have to make changes to solve it?

     

    Thanks and regards,

    Steve.

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 25 Jun 2015 Link to this post

    Hi Steve,

    I tried to reproduce the illustrated issue in Goggle Chrome but to no avail (dojo). Could you please modify my example and demonstrate your exact setup - this way I would be able to check what exactly is going wrong and provide concrete recommendations? Thank you in advance for your cooperation.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Steve
    Steve avatar
    17 posts
    Member since:
    Oct 2014

    Posted 25 Jun 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

     I fiddled a little bit and copy & pasted our custom styles and got it to reproduce the error (dojo). Now the problem lies within the the .combobox-details css class and by removing/changing their values I can get it to somehow look a bit better than now (e.g. removing the fixed height) but then it will look out of place in IE/FF again. I'm by no means a CSS expert and only know some basics so it's likely I'm not seeing something there and maybe it's not even a a problem specific to the Telerik controls but maybe your experienced eye can see some things I don't.

     Thanks in advance and regards,

    Steve.

  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 29 Jun 2015 Link to this post

    Hello Steve,

     

    overriding the padding of the combobox wrapper is the problem here. I removed that setting from the class, and your example seems correct now

     

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Steve
    Steve avatar
    17 posts
    Member since:
    Oct 2014

    Posted 29 Jun 2015 in reply to Petyo Link to this post

    Hi,

    yes, problem is: If I remove the padding and a bottom margin to get some space to the next control, it looks fine in Chrome, but it's still off in Internet Explorer and Firefox (height, in this case). Well, seems like I need to give our CSS an overhaul, there are more things wrong with it than just this but hopefully I will get this resolved. It's still strange that Chrome renders the controls differently from IE/FF - I would've thought that IE would be the problematic one - but I don't know if this is due to the Telerik Controls, the CSS or something different. Thanks for the help anyways!

    Regards,

    Steve.

  7. Steve
    Steve avatar
    17 posts
    Member since:
    Oct 2014

    Posted 30 Jun 2015 in reply to Petyo Link to this post

    Hi,

    so after giving our CSS an overhaul and structuring it a bit better, I got the problem with the ComboBox solved. But another problem came up - well, two, to be correct. Here's an updated dojo to show you what I mean. 

     1) While size and gap to the next control is fine now with the combobox, there's a problem with indenting the text. The question basically is: What's the right way to do it? I've done it here in the following way: The combobox consists in the final html of an outer span, an inner span, the input and two more spans for the dropdown arrow. By increasing the left-padding of the inner span, the input will have the desired indent, but because of the Metro Theme when hovering or selecting it, the inner span background will turn green and you can see the gap on the left by the padding. I've tried other ways (e.g. with text-indent) but to no avail.

     

    2) Why is the Checkbox I've added at the end not theme styled in Chrome? It works fine in IE and FF (see attached screenshot) but the Metro Theme is not applied in Google Chrome, or so at seems.

    Hope this thread isn't dead yet and you can help me!

    Thanks in advance,

    Steve.

  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 01 Jul 2015 Link to this post

    Hi Steve,

    Up to the questions
    1). The following CSS rule should help to indent the text: 
    .combobox-details-short > .k-dropdown-wrap > .k-input {
        text-indent: 6px;
    }

    2). In order to use the Kendo UI customized presentation for checkboxes you should use the following HTML and CSS classes:  
    <input type="checkbox" id="checkbox" class="k-checkbox">
    <label class="k-checkbox-label" for="checkbox"></label>
    For more detailed information take a look at this documentation topic.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready