Hi All,
When placing a set of controls such as the combo box, date picker and textbox in a vertical column they look messy. The underline field positioning doesn't line up. The combobox and date pickers seem to line up as do the textbox and checkbox.
I've tried working out what CSS controls the appearance of the underline but nothing seems to affect it. I've been able to change the colour using the border on the rcbInner class but nothing seems to affect the width.
Any pointers on getting these controls tweaked to not appear staggered.
Regards
Jon
9 Answers, 1 is accepted
Rank 1
We have created a sample project with the mentioned control but we are not able to reproduce the issue, because they are vertically aligned.
I am not sure that I have understood you in right way. Could you please elaborate the sentence "I just cant find out how tomake teh bottom line match that of the text box"? You can also provide us with a describing screen shot. Could you please also provide information about the following:
- version of controls
- used render mode
- used skin
Regards,
Magdalena
Telerik
Rank 1
Hi Magdalena
Sorry I wasn't that clear.
Using the current controls with the Material skin.
Have a combo box and a text box on the screen. I then remove the css on the text box that adds a 13px padding to teh left and right. That causes the grey underline under the box to expand by 26 pixels. This is the grey underline that changes to green when you click in the box.
The issue that I have is that with other controls such as the radcombobox I can't figure out what css controls the width of that same underline.
Worst case I can just leave the 13px padding in on the textbox and then everything does line up.
Does that make the issue clearer?
Best Regards
Jon
Thank you for the clarification. The horizontal 13 pixels padding of "inline" controls is necessary for the aligning. When you hover RadComboBox, you can see that the control in hover state looks wider as in normal state. This is the reason why the RadText box has horizontal padding 13 pixels as well.
We have tested the scenario in Material theme, and controls are aligned properly on our side.
As we are removing font-sizes from inbuilt skins, please make you sure that you have add font-size CSS rules to the page. We are sending you this video for your reference.
Regards,
Magdalena
Telerik
Rank 1
Hi Magdalena
Got you, that makes sense.
Yes I'd changed the font size already and will be able to remove the inherit styles that I used. Will the font change happen in the Q1 SP1 or Q2 release?
Regards
Jon
A am not sure that I have understood the sentence "Will the font change happen in the Q1 SP1 or Q2 release?" in the right way. We will remova font-size from all our inbuilt skins for Q1 SP1. Font-family will remains only in "Metro~" skins, Bootstrap and Material skin.
Regards,
Magdalena
Telerik
Rank 1
Hi Magdalena
No you got it right :) I wasn't sure if the change was planned for the upcoming service pack or the Q2 release :)
Great news that it is the service pack :) Is that this week?
Regards
Jon
Yes, the service pack is this week.
Regards,
Magdalena
Telerik
Rank 1