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

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

5 Answers 69 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 28 Jan 2011, 03:16 PM
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!

5 Answers, 1 is accepted

Sort by
0
Cori
Top achievements
Rank 2
answered on 28 Jan 2011, 09:52 PM
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.
0
Paul
Top achievements
Rank 1
answered on 28 Jan 2011, 10:31 PM
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.
0
Kate
Telerik team
answered on 31 Jan 2011, 06:54 PM

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.
0
dmc
Top achievements
Rank 1
answered on 09 Nov 2011, 05:22 AM
I am having similar issue with absolute div resting in upper right corner of rad tab strip.  Any thing ever resolved for this issue?
0
Kate
Telerik team
answered on 09 Nov 2011, 09:25 AM
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
Tags
ComboBox
Asked by
Paul
Top achievements
Rank 1
Answers by
Cori
Top achievements
Rank 2
Paul
Top achievements
Rank 1
Kate
Telerik team
dmc
Top achievements
Rank 1
Share this question
or