RadComboBox in fixed or pinned position

7 posts, 0 answers
  1. Kolbjørn
    Kolbjørn avatar
    3 posts
    Member since:
    Aug 2008

    Posted 12 Nov 2008 Link to this post


    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


  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 13 Nov 2008 Link to this post

    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.
  3. Kolbjørn
    Kolbjørn avatar
    3 posts
    Member since:
    Aug 2008

    Posted 17 Nov 2008 Link to this post

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








  4. Robb
    Robb avatar
    2 posts
    Member since:
    Feb 2009

    Posted 17 Feb 2009 Link to this post

    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




  5. Kolbjørn
    Kolbjørn avatar
    3 posts
    Member since:
    Aug 2008

    Posted 18 Feb 2009 Link to this post

    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


  6. FAISAL
    FAISAL avatar
    2 posts
    Member since:
    Jul 2012

    Posted 02 Aug 2012 Link to this post

    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
  7. Plamen
    Admin
    Plamen avatar
    2958 posts

    Posted 07 Aug 2012 Link to this post

    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.
Back to Top