Using the Metro Skin, I find that:
1. The RadTextbox and RadDatePicker are both smaller in Height than the RadCombobox
2. The RadButton tends to push 2-3px below the other controls for some odd reason
It is very hard to create consistent and uncluttered UI when I place a Combobox next to a Textbox or a Button next to anything horizontally.
Is there a reason why the basic/default input controls do not share a common height?
You can see what I mean with this code
Is there a suggested best way to make the Textboxes the same height as the Combobox - and to line up the buttons?
1. The RadTextbox and RadDatePicker are both smaller in Height than the RadCombobox
2. The RadButton tends to push 2-3px below the other controls for some odd reason
It is very hard to create consistent and uncluttered UI when I place a Combobox next to a Textbox or a Button next to anything horizontally.
Is there a reason why the basic/default input controls do not share a common height?
You can see what I mean with this code
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="input_size.aspx.vb" Inherits="Elan.Web.input_size" %><!DOCTYPE html><html><headrunat="server"><title></title></head><body><formid="form1"runat="server"><telerik:RadScriptManagerrunat="server"ID="ScriptManager1"/><div><telerik:RadButtonSkin="Metro"Text="Button"runat="server"ID="bTest"/><telerik:RadComboBoxSkin="Metro"runat="server"ID="dTest"/><telerik:RadTextBoxSkin="Metro"runat="server"ID="tTest"/><telerik:raddatepickerSkin="Metro"runat="server"ID="dtTest"/></div></form></body></html>
Is there a suggested best way to make the Textboxes the same height as the Combobox - and to line up the buttons?
9 Answers, 1 is accepted
0
Princy
Top achievements
Rank 2
Rank 2
answered on 01 Jul 2013, 05:11 AM
Hi Dan,
Try overriding the default CSS as follows.
CSS:
Thanks,
Shinu.
Try overriding the default CSS as follows.
CSS:
<style type="text/css"> .RadComboBox { height: 20px; } .RadComboBox * { height: 16px !important; }</style>Thanks,
Shinu.
0
Shinu
Top achievements
Rank 2
Rank 2
answered on 01 Jul 2013, 07:05 AM
Hi,
Please try the following CSS
CSS:
Thanks,
Shinu.
Please try the following CSS
CSS:
<style type="text/css"> .RadComboBox
{
height: 20px;
}
.RadComboBox *
{
height: 16px !important;
}
{
height: 20px;
}
.RadComboBox *
{
height: 16px !important;
}
</style>Thanks,
Shinu.
0
Princy
Top achievements
Rank 2
Rank 2
answered on 02 Jul 2013, 03:23 AM
Hi Dan,
Try overriding the default CSS as follows.
CSS:
Thanks,
Princy.
Try overriding the default CSS as follows.
CSS:
<style type="text/css"> .RadComboBox { height: 20px; } .RadComboBox * { height: 16px !important; }</style>Thanks,
Princy.
0
Princy
Top achievements
Rank 2
Rank 2
answered on 08 Jul 2013, 12:30 PM
Hi Dan,
Try overriding the default CSS as follows.
CSS:
Thanks,
Princy
Try overriding the default CSS as follows.
CSS:
<style type="text/css"> .RadComboBox { height: 20px; } .RadComboBox * { height: 16px !important; }</style>Thanks,
Princy
0
Dan
Top achievements
Rank 1
Rank 1
answered on 10 Jul 2013, 11:48 PM
Thanks, that *sort of* addresses the issue of the textboxes - however setting a global height then messes with Multi-Line Textboxes. This also does not solve the problem with the buttons not lining up.
Seems like a bug or oversight on the part of Telerik. If I put the controls in a <table>, each in a separate <td> and set vertical-align:top - then they all line up! But I don't want to have to do this.
Seems like a bug or oversight on the part of Telerik. If I put the controls in a <table>, each in a separate <td> and set vertical-align:top - then they all line up! But I don't want to have to do this.
0
Hi, Dan.
For 2013 Q2 release, we improved the alignment of the inputs. The only thing left is that the combobox is 2 pixels taller in Metro skin and we'll take care of that for the 2013 Q3 release.
Regards,
Ivan Zhekov
Telerik
For 2013 Q2 release, we improved the alignment of the inputs. The only thing left is that the combobox is 2 pixels taller in Metro skin and we'll take care of that for the 2013 Q3 release.
Regards,
Ivan Zhekov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Dan
Top achievements
Rank 1
Rank 1
answered on 29 Jul 2013, 05:10 PM
Thanks - it is better with the new release - but the buttons are still off when set next to a Combo or Textbox
0
Hello, Dan.
For the Beta, which will be in a couple weeks time, we have packed some more fixes.
On a clean page, controls do line up pretty well. Hopefully, they will line up on your page as well.
Regards,
Ivan Zhekov
Telerik
For the Beta, which will be in a couple weeks time, we have packed some more fixes.
On a clean page, controls do line up pretty well. Hopefully, they will line up on your page as well.
Regards,
Ivan Zhekov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Dan
Top achievements
Rank 1
Rank 1
answered on 06 Aug 2013, 11:05 PM
Looking forward to it - thanks