Change RadTextbox width by CSS

8 posts, 0 answers
  1. WebDeveloper
    WebDeveloper avatar
    10 posts
    Member since:
    Aug 2010

    Posted 15 Sep 2010 Link to this post

    Is it possible to change the RadTextbox's witdh by css ?

    Please reply as soon as possible.
  2. Dimo
    Admin
    Dimo avatar
    8458 posts

    Posted 15 Sep 2010 Link to this post

    Yes, it is. Here is more information on the matter:

    http://www.telerik.com/help/aspnet-ajax/input_appearancewidth.html


    Regards,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. ghini
    ghini avatar
    34 posts
    Member since:
    Sep 2012

    Posted 05 Nov 2019 in reply to Dimo Link to this post

    I need to set RadTextbox's width by server-side or by css.

    Link http://www.telerik.com/help/aspnet-ajax/input_appearancewidth.html not works. Con you fix it?

    Thanks

  4. Rumen
    Admin
    Rumen avatar
    14166 posts

    Posted 05 Nov 2019 Link to this post

    Hi Fabrizio,

    You can set the RadTextBox width from the codebehind by setting its Width property:

    ASP.NET

        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="sm1" runat="server"></telerik:RadScriptManager>
            <telerik:RadTextBox runat="server" ID="RadTextBox1"></telerik:RadTextBox>
        </form>

    Codebehind

        protected void Page_Load(object sender, EventArgs e)
        {
            RadTextBox1.Width = Unit.Pixel(1000);
        }

    If you look for a CSS solution, here is an example:

    <style>
        .riTextBox {
            width: 1000px !important;
        }
    
    </style>
    <telerik:RadTextBox runat="server" ID="RadTextBox1"></telerik:RadTextBox>

    Best Regards,
    Rumen
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. ghini
    ghini avatar
    34 posts
    Member since:
    Sep 2012

    Posted 05 Nov 2019 in reply to Rumen Link to this post

    Hi Rumen,
    obviously your example works ("width: 1000px !important;").

    I try with 

    <style>
        .riTextBox {
            width: 100% !important;
        }
    </style>

    but not works... why??

    Thanks

  6. Rumen
    Admin
    Rumen avatar
    14166 posts

    Posted 05 Nov 2019 Link to this post

    Hi there,

    In order to have percentage width for the input, some of its parent elements must have a fixed width. In the example below the body has a width of 500 pixels:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            body { width:500px}
            form, .RadInput, .riTextBox {
                width: 100% !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="sm1" runat="server"></telerik:RadScriptManager>
            <telerik:RadTextBox runat="server" ID="RadTextBox1"></telerik:RadTextBox>
        </form>
    </body>
    </html>

    Of course, all parent elements could have width in percentage since the browser window always has a fixed width.

     

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            html, body, form, .RadInput, .riTextBox {
                width: 100% !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="sm1" runat="server"></telerik:RadScriptManager>
            <telerik:RadTextBox runat="server" ID="RadTextBox1"></telerik:RadTextBox>
        </form>
    </body>
    </html>
    

     

    Regards,
    Rumen
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. ghini
    ghini avatar
    34 posts
    Member since:
    Sep 2012

    Posted 18 Nov 2019 in reply to Rumen Link to this post

    Hi Rumen,

    thanks, this style works fine:

    <style>
        html, body, form, .RadInput, .riTextBox {
            width: 100% !important;
        }
    </style>

     

    but set all my RadInput... I would like 100% width to be applied only to some RadTextBoxes.
    Thanks! 

     

     

  8. Rumen
    Admin
    Rumen avatar
    14166 posts

    Posted 20 Nov 2019 Link to this post

    Here is an example to resize a single instance of RadTextBox with CSS:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
            <telerik:RadCodeBlock runat="server">
        <style>
            
            #<%=RadTextBox1.ClientID%>_wrapper.RadInput{
                width: 50% !important;
                border: 1px solid green !important;
            }
        
            #<%=RadTextBox1.ClientID%> {
                border: 1px solid red !important;
                width:100% !important;
            }
    
        </style>
                </telerik:RadCodeBlock>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="sm1" runat="server"></telerik:RadScriptManager>
            <telerik:RadTextBox runat="server" ID="RadTextBox1"></telerik:RadTextBox>
            <telerik:RadTextBox runat="server" Width="350px" ID="RadTextBox2"></telerik:RadTextBox>
            <telerik:RadTextBox runat="server" Width="100%" ID="RadTextBox3"></telerik:RadTextBox>
        </form>
    </body>
    </html>

     

    Regards,
    Rumen
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top