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

ComboBox - Wrong styling in Google Chrome

6 Answers 61 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 23 Jun 2015, 07:25 AM

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.

6 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 25 Jun 2015, 08:06 AM

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!
 
0
Steve
Top achievements
Rank 1
answered on 25 Jun 2015, 12:05 PM

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.

0
Petyo
Telerik team
answered on 29 Jun 2015, 07:21 AM

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!
 
0
Steve
Top achievements
Rank 1
answered on 29 Jun 2015, 08:23 AM

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.

0
Steve
Top achievements
Rank 1
answered on 30 Jun 2015, 01:00 PM

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.

0
Iliana Nikolova
Telerik team
answered on 01 Jul 2015, 07:50 AM
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!
 
Tags
ComboBox
Asked by
Steve
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Steve
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or