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

Rad Controls Vertical Alignment in Chrome

3 Answers 200 Views

General Discussions

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

Andy asked on 06 Sep 2011, 10:52 PM

alignment.jpg

When I add a few controls to a page, I always need to adjust the CSS on a per-control basis just to get them to align vertically properly in Chrome. Things seem to look ok by default in IE and Firefox.

Even just adding the following simple controls looks quite ridiculous without any manual adjustments, as you can see from the screengrab attached from Google Chrome:

<rad:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Forest" />

<rad:RadTextBox ID="RadTextBox1" runat="server">

</rad:RadTextBox>

<rad:RadButton ID="RadButton1" runat="server" Text="Test" Icon-PrimaryIconCssClass="rbOk">

</rad:RadButton>

<asp:CheckBox ID="CheckBox1" runat="server" Checked="true" Text="Test Label" />

Any suggestions?

3 Answers, 1 is accepted

answered on 08 Sep 2011, 04:04 PM

Hi Andy,

We are aware of these problems for differences between different controls and it is in our schedule to fix them for the upcoming Q3 2011. Note that some issue could be fixed earlier and will be available in the Q2 Service pack 2001, including these related to the issues reported in that ticket. Note that in some cases it is not possible to achieve pixel perfect comparison between different browsers due to some browser behavior and rendering issues but we are trying to achieve the best possible cross-browser support.

Best wishes,
Bojo
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

answered on 12 Sep 2011, 08:03 AM

Hi Andy,

The Service Pack 1 Q2 release is scheduled for Wednesday this week, but I could give you in advnce a test page with CSS fixes for that issues:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

.RadForm.rfdTextbox input[type="text"], .RadForm.rfdTextbox input[type="password"]

{

vertical-align: bottom !important;

}

/* Fixing RadbUtton position in Firefox when it is next to a textbox */

x:-moz-any-link, .rbSkinnedButton

{

vertical-align: top !important;

}

@media screen and (-webkit-min-device-pixel-ratio:0)

{

.rbSkinnedButton

{

vertical-align: text-top;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="mng" runat="server">

</asp:ScriptManager>

<telerik:RadFormDecorator ID="rfd1" runat="server" DecoratedControls="All" Skin="Forest" />

<telerik:RadTextBox ID="texb1" runat="server">

</telerik:RadTextBox>

<telerik:RadButton ID="rb1" runat="server" Text="OK" Skin="Forest">

<Icon PrimaryIconCssClass="rbOk" />

</telerik:RadButton>

<asp:CheckBox ID="chb1" runat="server" Text="Test" />

<br />

<asp:TextBox ID="tb1" runat="server"></asp:TextBox>

<asp:Button ID="rfdb1" runat="server" Text="OK" />

<asp:CheckBox ID="CheckBox1" runat="server" Text="Test" />

</form>

</body>

</html>

Note, that as you mentioned also, we cannot achieve pixel perfect look and feel in all browsers, with the provided fixes the situation in Chrome is much better.

Best wishes,
Bojo
the Telerik team