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

RadTextBox pushing out width of div

1 Answer 81 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 03 Nov 2011, 05:45 PM

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 !!!!!!

1 Answer, 1 is accepted

Sort by
0
Corina
Top achievements
Rank 1
answered on 04 Nov 2011, 12:34 PM
Hi Scott,

I'm having the same problem actully. I really need a solution for this aswell.

Thanks
Tags
General Discussions
Asked by
Scott
Top achievements
Rank 1
Answers by
Corina
Top achievements
Rank 1
Share this question
or