RadTextBox pushing out width of div

[Scott]

Hi,
I'm using a RadTextBox like so :

HTML:
<div class="MyClass">

    <telerik:RadTextBox ID="txtCloseDateWeeks" runat="server"/>

</div>



CSS:

.MyClass span input
    {width:200px !important;}

I need to use this css structure for other controls within my divs, including making the radComboBoxes the same size as the RadTextBoxes.

As you probably know, when the  RadTextBox is rendered, it appears in the HTML as :

<span class="RadInput RadInput_Outlook" id="ctl00_ctl00_txtCloseDateWeeks_wrapper" style="white-space: nowrap;">

    <input name="ctl00_ctl00_txtCloseDateWeeks_text" class="riTextBox riEnabled" id="ctl00_ctl00_txtCloseDateWeeks_text" style="width: 125px;" type="text" size="20" _events="[object Object]" value="1"/>

    <input name="ctl00$ctl00$txtCloseDateWeeks" title="" class="rdfd_" id="ctl00_ctl00_txtCloseDateWeeks" style="width: 1px; height: 1px; overflow: hidden; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: -18px; margin-right: 0px; margin-bottom: 0px; margin-left: -1px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; visibility: hidden;" type="text" control="[object Object]" value="1"/>

    <input name="ctl00_ctl00_txtCloseDateWeeks_ClientState" id="ctl00_ctl00_txtCloseDateWeeks_ClientState" type="hidden" autocomplete="off"/>

The 1st <Input> tag seems to be the control on the page which correctly has a width of 200px

The 2nd <Input> tag is where the problem lies. This is also 200px (because of the CSS) but even though 
 overflow: hidden; visibility: hidden;
it still renders on the page - I can't see it until I analyse with a HTML viewer, but it's being rendered to the right of the textbox and pushing my <div> out by another 200px which of course totally screws up the rest of the layout.

The 3rd <Input> tag doesn't show on the page and has a property type="hidden"  This might be why.

In the attached image - you can see the blue line of the 2nd <input> tag

Help me, please !!!!!!

[Kevin]

Hello Scott,

Even though the second input has visibility:hidden, it only hides it visually from the page, but keeps the space. Only display:none hides the control completely. You need to be more specific with your class selector. It should look something like this:

.MyClass span .riTextBox    {width:200px !important;}

I hope that helps.

[Scott]

Thanks a lot Kevin.
I was hoping I could keep this css class more generic, but it does the trick.
Thanks again  :)


Cheers,
Scott

[Scott]

Hey Kevin,  sorry to be a pain in the butt, but I'm now having hassle assigning a further css class to any of the rad textboxes.

eg. Some of my pages require that the TextBoxes be larger, so I've given them a class of   ".RadWidth500 "

So, now my CSS looks like : 

.Tabular span .riTextBox
    {width:200px !important;}

.Tabular span .RadWidth500 .riTextBox
    {width:500px !important;}

.Tabular span .riTextBox .RadWidth500
    {width:500px !important;}

As you've probably guessed, the bottom two classes aren't overriding the fix you gave me.
Any ideas as to why this isn't working ??


Thanks again,
Scott

[Kevin]

Hello Scott,

If you're setting it like so:

<telerik:RadTextBox ID="RadTextBox1" runat="server" CssClass="RadWidth500">
</telerik:RadTextBox>

Your css should look like this:

.Tabular span .RadWidth500
{
    width: 500px !important;
}

The reason being is that the class is added on the textbox itself.

I hope that helps.