Css for RadTextBox and RadTextArea

[Rahul]

Hi,

How can Apply the Own Custome Css on RadTextBox and RadTextArea with examples.

Kind Regards,
Rahul

[Shinu]

Hi Rahul,

Please have a look into the following code snippet to achieve your scenario.

ASPX:

<asp:Label ID="Label1" runat="server" Text="TextBox">
</asp:Label>
<telerik:RadTextBox ID="RadTextBox1" runat="server" CssClass="textbox">
</telerik:RadTextBox>
<br />
<asp:Label ID="Label2" runat="server" Text="TextArea">
</asp:Label>
<telerik:RadTextBox ID="RadTextBox2" runat="server" TextMode="MultiLine" CssClass="textarea">
</telerik:RadTextBox>

CSS:

<style type="text/css">
    .textbox
    {
        border: 1px solid red !important;
        height: 25px !important;
    }
    .textarea
    {
        border: 1px solid blue !important;
        height: 50px !important;
        width: 75% !important;
    }
</style>

Thanks,
Shinu.

[Rahul]

Hi Shinu,

                  Thanks for code but one more thing is can apply the height  in percentage to Text Box and TextArea.
Thanks,
Rahul

[Shinu]

Hi Rahul,

It is not possible to set the height of RadTextBox in percentage and we can only set 100% as the RadTextBox height and it will not work with TextArea. As a work around you can try the following code snippet.

ASPX:

<telerik:RadTextBox runat="server" ID="RadTextBox1" TextMode="MultiLine" Height="100%"
    ClientEvents-OnLoad="OnLoad" />
<telerik:RadTextBox runat="server" ID="RadTextBox2" Height="100%" />

JavaScript:

<script type="text/javascript">
    function OnLoad(sender) {
        var height = parseInt(document.getElementById('RadTextBox1').clientHeight) + 50;
        sender._originalTextBoxCssText = "height:" + height + "px";
        sender.updateCssClass();
    }
</script>

Thanks,
Shinu.