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

RadComboBox in fixed or pinned position

6 Answers 362 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Kolbjørn
Top achievements
Rank 1
Kolbjørn asked on 12 Nov 2008, 01:45 PM

I am trying to have a combo box that stays fixed at at the bottom of the screen.
The drop down itself stays fixed when I put the combobox inside a div tag with a position:fixed, but the items of the drop down do not stay in a fixed position when I scoll the page.

I also tried to put the combobox inside a pinned RadDock, and I get the same effect. The drop down stays pinned, but the list items move when I scroll the page.
<telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px"
        <telerik:RadDock ID="RadDock1" runat="server"  
                    Width="300px" height="150px"  
                    Pinned="true" > 
        <ContentTemplate> 
            <telerik:RadComboBox ID="comboEmployees" runat="server"  
                Width="300"  
                Height="350" 
                AutoPostBack="True" 
                OnSelectedIndexChanged="comboEmployees_SelectedIndexChanged" 
                >  
            </telerik:RadComboBox> 
        </ContentTemplate> 
        </telerik:RadDock> 
    </telerik:RadDockZone> 

Is there some way to make the items stay fixed or pinned?

Thanks,

Kolbjørn


6 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 13 Nov 2008, 03:48 PM
Hi Kolbjørn,

You can use this workaround:

            <script type="text/javascript">
           
            function adjustDropDown(sender, args)
            {
                if (!$telerik.isIE)
                    sender.set_offsetY(document.documentElement.scrollTop);
            }
            </script>

<telerik:RadComboBox ID="comboEmployees" runat="server" Width="300" Height="350"
    OnClientDropDownOpening="adjustDropDown">

Greetings,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Kolbjørn
Top achievements
Rank 1
answered on 17 Nov 2008, 11:15 AM
Thanks, that helped a bit , but that did not fully do the trick for me. The drop down items still moves when scrolling.

But after a bit of trail and error, I managed to keep the drop down items fixed at the bottom, and make the items look like they should:

The html generated from the combo box looks like

<div id="ctl00_FooterControl1_EmployeeSearchFormControl1_comboEmployees_DropDown" class="RadComboBoxDropDown_WebBlue" style="display: block; visibility: visible; top: 0px; left: 0px; width: 298px;"
<div class="rcbScroll rcbWidth" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; overflow: auto; height: 350px; width: 300px; position: fixed; bottom: 22px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"
<ul class="rcbList" style="margin: 0pt; padding: 0pt; list-style-type: none; list-style-image: none; list-style-position: outside;"
<li class="rcbItem">Find employees...</li> 
<li class="rcbItem">Employee 1</li> 
... 

And on the OnClientFocus event of the combo box, i wrote this rather nasty looking javascript function that does the trick:

 function OnClientFocus() { 
 
        var dropDownElement = document.getElementById("ctl00_FooterControl1_EmployeeSearchFormControl1_comboEmployees_DropDown"); 
        var scrollElement = dropDownElement.firstChild; 
 
        dropDownElement.style.visibility= "hidden"
 
        scrollElement.style.width = "300px"
        scrollElement.style.position = "fixed"
        scrollElement.style.bottom = "22px"
        scrollElement.style.background = "#ffffff"
    } 
 
 








0
Robb
Top achievements
Rank 1
answered on 17 Feb 2009, 05:06 PM
So I'm a little late in chiming in on this thread but I wanted to post what I found, because it worked rather well. I wanted both the positioning to be correct and the dropdown to be 'fixed' 'position'. To make that happen I set

OnClientDropDownOpened="OnClientDropDownOpenedHandler"

and then JavaScript function I use:

<script type="text/javascript"
    //<![CDATA[ 
    function OnClientDropDownOpenedHandler(sender, eventArgs) { 
        // change the marginTop of the drop down to be that of the flyout 
        var dropDownWrapper = sender.get_dropDownElement().parentNode; 
        if (!$telerik.isIE) { 
            dropDownWrapper.style.marginTop = document.body.parentNode.scrollTop + 'px;'
        } 
         
        // change the position to be fixed to the flyout 
        dropDownWrapper.style.position = 'fixed'
    } 
    //]]> 
</script> 

Which does three things:

1. It fixes the scrollTop for non-IE browsers.
2. Makes the 'position' of the wrapper be 'fixed' so the scrolling works well.

Kolbjorn, I'm betting you have moved on and aren't worrying about this anymore. But, maybe other people will stumble across this like I did...

robb




0
Kolbjørn
Top achievements
Rank 1
answered on 18 Feb 2009, 08:59 AM
Thanks Robb. Better late than never right? :-)

Your script works very well, the only thing I see is that when I resize my Firefox window, and if the drop down is opened, the drop down stays at the same spot for a second, and then moves to the right position.

What I actually ended up doing before christmas was this rather hacky thing on the OnClientLoad event (and I had not really done any javascripting since Netscape was a hot browser).

    function comboEmployeesOnClientLoad() { 
 
        var dropDownElement = document.getElementById("ctl00_FooterControl1_EmployeeSearchFormControl1_comboEmployees_DropDown"); 
        var scrollElement = dropDownElement.firstChild; 
 
        dropDownElement.style.visibility = "hidden"
        dropDownElement.style.position = "fixed"
 
        scrollElement.style.width = "250px"
        scrollElement.style.position = "fixed"
        scrollElement.style.bottom = "25px"
        scrollElement.style.left = "170px"
        scrollElement.style.background = "#ffffff"
    } 
 

I find the dropdown element that wrapps the scrollable part, and makes it stay fixed and hide it. Then I can set the position, size and make the scrollable part stay fixed. I also found it easier to apply formatting in the javascript, than to make the formatting in my css apply to the scrollable part. Don't quite remember why at the moment, but had already spend to much time on this and was quite eager to move on...

Kolbjørn


0
FAISAL
Top achievements
Rank 1
answered on 02 Aug 2012, 09:27 AM
We have similar issue . I couldn't find any solution.

We are using RadComboBox for dropdown list in our sharePoint page. The content area in a separate div which is scrollable and remaining area is not scrollable. RadComboBox placed insdide the div which is scrollable. If the user opened the dropdown for selection (Item listed below) and scroll out side area (Div area) then the RadComboBox getting scrolling but listed item is not scrolling (Not pinned to the parent RadComboBox). How can we resolve this issue?

Any of the above solution is not working for me

I will definitely appreciate your help.

Please find attached screenshot
0
Plamen
Telerik team
answered on 07 Aug 2012, 06:49 AM
Hello,

You can refer to this from thread where similar issue have already been discussed- in your case since you are using div you will most probably have to handle the scroll event of the div.

Hope this will be helpful.


All the best,
Plamen
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
Kolbjørn
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Kolbjørn
Top achievements
Rank 1
Robb
Top achievements
Rank 1
FAISAL
Top achievements
Rank 1
Plamen
Telerik team
Share this question
or