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

Problem Auto Size RadTextBox and RadButton with CSS?

2 Answers 442 Views

General Discussions

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

King Chan asked on 18 Feb 2011, 10:26 PM

Capture.PNG

Hello, let's say I have a RadTextBox and a RadButton
with CSS:
.Control
{
Width: 100%;
}
If I apply to both RadTextBox and RadButton ( CssClass="control" ), the RadTextBox will not expands to the maximum width, althought RadButton does, but the background image from RadButton's default style is gone.
When I try to set Width="100%" within the control, it work prefectly.
You can see the screenshot from the attachment, the first two control is RadTextBox and RadButton with CSS width 100% applied, the third and fourth control is Asp.Net's default TextBox and Button control with CSS width 100% applied.

I wonder if this an issue and have been fixed? Or just that the way I applied was wrong?
Since I haven't update my Telerik Componet since November.

Thanks

2 Answers, 1 is accepted

Accepted

answered on 22 Feb 2011, 09:01 AM

100percentswidth.gif

Hi King Chan,

RadButton is rendered with a anchor tag and input inside it. Your CSS applies width of 100% to the wrapping anchor element only, but not the input inside. So if you want to use CSS class, you should rework your CSS the following way:

<style type="text/css">

.Control,

.Control .rbDecorated

{

width: 100%;

}

</style>

I would suggest however to use the Width="100%" property as the controls is developed that way, and it is not necessary to use an additional CSS to achieve it. Also, note that the button width should not be more than 800 pixels due to spite size limitations. If the width is bigger an unwanted background repeat will appear. In case you need a button width bigger than 800px, then you should create custom skin or custom CSS with reworked sprite images.

As for the RadTextBox, the width through the style is not applied, as there is an inline style applying width different than 100% which has higher priority than the CSS class. To make it work with the CSS class, you should add the !important flag in your CSS. So, the whole piece of code will be similar to the following:

<%@ 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">

.Control,

.Control .rbDecorated

{

width: 100% !important;

}

</style>

</head>

<body>

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

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

</asp:ScriptManager>

<div style="width: 600px; height: 300px; padding: 20px; border: 1px solid red;">

<telerik:RadButton ID="btnSignUp" runat="server" Text="Button Width with 100%" CssClass="Control">

</telerik:RadButton>

<br />

<telerik:RadTextBox ID="rtb1" runat="server" CssClass="Control">

</telerik:RadTextBox>

</div>

</form>

</body>

</html>

Attached is 100percentswidth.gif showing the result from the above code.

As for the RadButton, I would suggest for RadtextBox to use the control width property instead applying additional CSS.

Best wishes,
Bojo
the Telerik team

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!