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

Css for RadTextBox and RadTextArea

3 Answers 766 Views
Input
This is a migrated thread and some comments may be shown as answers.
Rahul
Top achievements
Rank 1
Rahul asked on 04 Jan 2014, 07:20 AM
Hi,

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

Kind Regards,
Rahul

3 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 06 Jan 2014, 10:26 AM
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.
0
Rahul
Top achievements
Rank 1
answered on 07 Jan 2014, 05:01 AM
Hi Shinu,

                  Thanks for code but one more thing is can apply the height  in percentage to Text Box and TextArea.
Thanks,
Rahul
0
Shinu
Top achievements
Rank 2
answered on 07 Jan 2014, 10:46 AM
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.
Tags
Input
Asked by
Rahul
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Rahul
Top achievements
Rank 1
Share this question
or