ComboBox - Wrong styling in Google Chrome

[Steve]

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.

[Iliana Dyankova]

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

 

 

[Steve]

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.

[Petyo]

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

 

 

[Steve]

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.

[Steve]

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.

[Iliana Dyankova]

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