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

[Paul]

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!

[Cori]

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.

[Paul]

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.

[Kate]

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

[dmc]

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

[Kate]

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