Css for RadTextBox and RadTextArea

4 posts, 0 answers
  1. Rahul
    Rahul avatar
    39 posts
    Member since:
    Jan 2014

    Posted 04 Jan 2014 Link to this post

    Hi,

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

    Kind Regards,
    Rahul
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 06 Jan 2014 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rahul
    Rahul avatar
    39 posts
    Member since:
    Jan 2014

    Posted 06 Jan 2014 Link to this post

    Hi Shinu,

                      Thanks for code but one more thing is can apply the height  in percentage to Text Box and TextArea.
    Thanks,
    Rahul
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 07 Jan 2014 Link to this post

    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.
Back to Top