Listbox Floating On Scroll

[Justin James]

Hi
I've been spending a long time now trying to fix this problem. I cannot figure out why it is happening and I cannot fid a way to fix it at all.
What is happening is all the listbox elements are being fixed within the scrolling div. So the page content scrolls but the listboxes stay put, floating above the rest of the content. It only does it in IE7 and below. Also, the Drag-Drop boxes stack instead of being side by side.

The code resembles this:

        <div class="field">
            <div class="label"><asp:Label ID="lblSubRecOrg" runat="server" Text="Sub Receiving Organisation"></asp:Label></div>
            <div class="tbindent">
                <telerik:RadListBox ID="lstSubOwnOrg" Height="100px" Width="200px" SelectionMode="Multiple" runat="server"
                    AllowTransfer="true" TransferToID="lstSubOrgDragDrop" EnableDragAndDrop="true" AutoPostBackOnReorder="true" Skin="EetsaSkin" EnableEmbeddedSkins="false">
                </telerik:RadListBox>
                <telerik:RadListBox ID="lstSubOrgDragDrop" Height="100px" Width="200px" runat="server"
                    AllowReorder="true" EnableDragAndDrop="false" AllowTransfer="false" Skin="EetsaSkin" EnableEmbeddedSkins="false">
                </telerik:RadListBox>
            </div>
        </div>

The theme is a slightly modified "Vista" theme; the only modifications to the theme so far have been color changes.

The listboxes are inside a div with the stlyes height set and overflow to auto. This creates the div in which the listboxes are stuck and floating over. That div is within another that does scroll normally so the listbox issue is related to that div only. I have tried changing with !important the postion and display settings as well as wrapping the listboxes in another div again. Nothing works. Of note, the .tbindent div they are in doesn't move, but the .radlistbox one created does. So they are jumping out for some reason. I put a new wrapping div around them, immediatly within the .tbindent, and that new wrapping div jumped out of the .tbindent div as well. So what reverse css inheritance is happening here?

 Why are they stacking instead of being next to each other? Why are they floating and not scrolling with the rest of the div? Why are all the listboxes doing it and no other controls? 
 

[Genady Sergeev]

Hi Justin James,

This is due to a famous position:relative bug in IE7. Please, add

position: relative !important;

on your scrolling container. This will fix the problem. Additional information on the topic can be found here.

Kind regards,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Justin James]

Awesome!
That fixed the scrolling problem

[Jeevavarekha]

its working fine for me.thanks a lot!!!!!!!!!!!!

[Aarsh]

Well things are a bit different in my case. I tried the same and it was not working. I created a brand new test app and added rad-combo, ti worked without any modifications even in IE 7 mode !

Added another combo-box and tried again with IE 7 mode and both were still working.

Any other solution ?

[Aarsh]

I ended up disabling scrolling of that page. But would love to get this solved in my case.

[Kate]

Hi Aarsh,

It forum post is indeed very old and it is quite likely that the proposed solution will not work in your case. I also noticed that you mention the RadComboBox control, while the forum refers to the RadListBox control. I would suggest that you open a new forum post where you describe your issue (you can also attach an image demonstrating the appearance that you get) and provide some code that we can test locally.

All the best,
Kate
the Telerik team