Telerik UI for ASP.NET AJAX

Note

Since the Q3 2011, the RadInput controls have a LabelWidth property. With it and the Width property, the functionality from below can be achieved declaratively.

Due to their specific HTML rendering and different layout modes, RadInput textboxes always have an explicit width set as an inline style. In some cases it may be more convenient to manage the controls' widths with external CSS code or to simply remove the default width. Depending on the control's configuration, there are a couple of different ways to accomplish this.

CopySetting the width using JavaScript
<script type="text/javascript">
    function changeWidth(sender, args) {
        var textBox = sender;
        textBox._originalTextBoxCssText = "width:200px;";
        textBox.updateCssClass();
    }
</script>
<telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" ShowButton="true"
    ShowSpinButtons="true" Label="Label">
    <clientevents onload="changeWidth" />
</telerik:RadNumericTextBox>

The following examples involve overriding the control's inline width style with CSS rules using the !important clause.

CopySetting the width using distinctive CSS classes
<style type="text/css">
    .CustomClass
    {
        width: 200px !important;
    }

        .CustomClass .riLabel
        {
            width: 30% !important;
        }

    span.CustomClass .riContentWrapper,
    span.CustomClass.riContButton.riContSpinButtons .riContentWrapper
    {
        width: 70% !important;
        padding-right: 0;
    }
</style>
<telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" ShowButton="true"
    ShowSpinButtons="true" Label="Label" WrapperCssClass="CustomClass">
</telerik:RadNumericTextBox>
CopySetting the width globally within or without a container
<style type="text/css">
    .ContainerClass .RadInput
    {
        width: 300px !important;
    }

        .ContainerClass .RadInput .riLabel
        {
            width: 40% !important;
        }

    .ContainerClass span.RadInput .riContentWrapper,
    .ContainerClass span.riContButton.riContSpinButtons .riContentWrapper
    {
        width: 60% !important;
        padding-right: 0;
    }
</style>
<div class="ContainerClass">
    <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" ShowButton="true" ShowSpinButtons="true"
        Label="Label">
    </telerik:RadNumericTextBox>
</div>

The suggested examples apply for the Single Input Rendering mode of RadInput. More information abdout the default CSS classes can be found here.

See Also