RadComboBox in fixed or pinned position

[Kolbjørn]

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

[Atanas Korchev]

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.

[Kolbjørn]

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";
    }

[Robb]

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

[Kolbjørn]

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

[FAISAL]

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

[Plamen]

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