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

Change RadTextbox width by CSS

7 Answers 220 Views
Input
This is a migrated thread and some comments may be shown as answers.
WebDeveloper
Top achievements
Rank 1
WebDeveloper asked on 15 Sep 2010, 01:12 PM
Is it possible to change the RadTextbox's witdh by css ?

Please reply as soon as possible.

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 15 Sep 2010, 02:05 PM
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
0
ghini
Top achievements
Rank 2
answered on 05 Nov 2019, 07:49 AM

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

0
Rumen
Telerik team
answered on 05 Nov 2019, 08:57 AM

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.
0
ghini
Top achievements
Rank 2
answered on 05 Nov 2019, 09:15 AM

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

I try with 

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

but not works... why??

Thanks

0
Rumen
Telerik team
answered on 05 Nov 2019, 09:50 AM

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.
0
ghini
Top achievements
Rank 2
answered on 18 Nov 2019, 05:37 PM

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! 

 

 

0
Rumen
Telerik team
answered on 20 Nov 2019, 11:55 AM

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.
Tags
Input
Asked by
WebDeveloper
Top achievements
Rank 1
Answers by
Dimo
Telerik team
ghini
Top achievements
Rank 2
Rumen
Telerik team
Share this question
or