RadTextBox pushing out width of div

5 posts, 1 answers
  1. Scott
    Scott avatar
    18 posts
    Member since:
    Oct 2011

    Posted 07 Nov 2011 Link to this post

    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 !!!!!!
  2. Answer
    Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 07 Nov 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Scott
    Scott avatar
    18 posts
    Member since:
    Oct 2011

    Posted 07 Nov 2011 Link to this post

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


    Cheers,
    Scott
  5. Scott
    Scott avatar
    18 posts
    Member since:
    Oct 2011

    Posted 08 Nov 2011 Link to this post

    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
  6. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 10 Nov 2011 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017