Strange side-effect when a RadCombo box is placed in div tag that uses the float: left; style

6 posts, 0 answers
  1. Paul
    Paul avatar
    76 posts
    Member since:
    Feb 2008

    Posted 28 Jan 2011 Link to this post

    Recently I had the need to put a RadComboBox on a page to display a drop down and noticed something quirky which made me have to rethink my layout to work around this odd issue.

    If I place a RadComboBox as follows, everything works normal:
    <div>
         <telerik:RadComboBox ID="ComboBox" runat="server">
              ... items
         </telerik:RadComboBox>
    </div>

    But the second I add "float: left;" as a css style as so then the RadComboBox behaves a little differently:
    <div style="float: left;"
         <telerik:RadComboBox ID="ComboBox" runat="server"
              ... items 
         </telerik:RadComboBox
    </div>

    What normally happens is you are able to highlight and/or click anywhere on the combobox and your items will drop down so you can select something. With float: left; enabled in the div tag all of a sudden I can no longer drop down the combobox if I highlight and click on the image area of the combobox. That is the little down-arrow icon. I can highlight/click in the text area, but the area off to the right displaying the arrow icon becomes useless.

    The only solution I have found to work is to avoid this scenario and rethink the layout.

    Is anyone else able to replicate this quirk? I am using ver: 2010.3.1109.40

    Thanks!
  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 28 Jan 2011 Link to this post

    Hello Paul,

    Are you sure there isn't any other elements that might be affecting the RadComboBox? Does this happen if you place the RadComboBox in a floating div on a blank page with no external css or javascript on it? I tried it myself on a page with just the RadComboBox inside a floating div and it works correctly.
  3. Paul
    Paul avatar
    76 posts
    Member since:
    Feb 2008

    Posted 28 Jan 2011 Link to this post

    Cori,

    It's possible (about the javascript/external css) but highly unlikely. It seems it's a bit more complicated that it seems. I did have other elements on the page that may be contributing factors.

    For instance in this sample works:
    <div style="float: left; width: 85px; text-align: right; padding-right: 5px;">
         Some Text
    </div>
    <div style="float: left;">
         <telerik:RadComboBox ID="ComboBox" runat="server">
              ... Items
         </telerik:RadComboBox>
    </div>
    <div style="clear: both;" />  <!-- HAVING THIS MAKES IT WORK -->
    <div>
           More Text
    </div>

    But this doesn't simply by excluding one of the lines in the sample:
    <div style="float: left; width: 85px; text-align: right; padding-right: 5px;"
         Some Text 
    </div
    <div style="float: left;"
         <telerik:RadComboBox ID="ComboBox" runat="server"
              ... Items 
         </telerik:RadComboBox
    </div
      <!-- REMOVED "<div style="clear: both;" />" AND NOW IT DOESN'T WORK RIGHT -->
    <div
         More Text
    </div>

    It seems it doesn't like it when it's floating left of another div tag?? Seems a bit strange, but it's happening to me. See if you get the same results using my samples.
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 31 Jan 2011 Link to this post


    Hello Paul,

    I tried to reproduce the problem that you encounter with no success however. Here I have attached my sample page with a simple RadComboBox in it using version 2010.3.1109.40. Please, let me know if I have missed something.

    All the best,
    Kate
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. dmc
    dmc avatar
    8 posts
    Member since:
    Aug 2008

    Posted 08 Nov 2011 Link to this post

    I am having similar issue with absolute div resting in upper right corner of rad tab strip.  Any thing ever resolved for this issue?
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 09 Nov 2011 Link to this post

    Hello Dan,

    Can you please provide more details on how to reproduce the issue so we would be able to test it and find the reason for the appearance that you get? Can you also clarify the version of the controls that you are using as well as the browser where you are testing?

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top