jQWidgets Forums

jQuery UI Widgets Forums Lists DropDownList DropDown placement issue with relative positioning

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  donovanh 12 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • donovanh
    Participant

    I have the body of my page set at a fixed width and centered, then set to position:relative so that various elements may be removed from the page flow and laid out precisely.

    Unfortunately, this is causing the DropDownList not to work as expected. I had presumed that the position of the drop down popup would be directly under the dropDownList widget itself no matter what. Instead, however, the popup is offset to the right from the widget itself by a distance equal to the distance between the left edge of the body and the left edge of the browser window (verified by resizing the browser window to various widths).

    If I remove the position:relative setting from the body tag, then the behavior of the widget is as expected. If I change the body to position:absolute, the behavior is close but not quite right–the left position is correct, but there is a gap of a few pixels between the popup and the widget. So while I have discovered a way to fix the behavior, it’s rather problematic since I’m dreading the very thought of attempting to accomplish the page layout without the CSS positioning.

    Thus, I would be very grateful if anyone has a suggestion for getting the popup to behave appropriately without having to radically alter my layout CSS.

    Thank you in advance for any help you can give.

    Respectfully,
    Donovan

    P.S. I’m using jqWidgets 2.8.3 and jQuery 1.9.1 if it matters.


    Peter Stoev
    Keymaster

    Hi,

    – Please, provide step by step instructions on how to reproduce the reported issue and provide a small sample which demonstrates it.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    donovanh
    Participant

    The sample below will reproduce the issue, assuming that the appropriate dependencies have been added in the same directory as this file.

    If you resize your browser window to various screen widths greater than the 800 px I have allotted for the body in this sample, you will see how the DropDownList’s popup is offset to the right by the distance between the left edge of the control and the left edge of the browser window.

    In case it makes things more convenient, I will also send a .zip file containing this sample together with its dependencies to tech support shortly.

    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DropDownList Issue Sample</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jqx.base.css">
    <style>
    body{
    width:800px;
    margin:8px auto;
    position:relative;
    }
    </style>
    <script type="text/javascript" src="jqxcore.js"></script>
    <script type="text/javascript" src="jqxbuttons.js"></script>
    <script type="text/javascript" src="jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqxlistbox.js"></script>
    <script type="text/javascript" src="jqxdropdownlist.js"></script>
    <script type="text/javascript">
    $(function() {
    choices = ['None', 'Cardboard', 'Plastic', 'Lead'];
    $("#spacer_type").jqxDropDownList({ source: choices, width:150, height:25, autoDropDownHeight:true, theme:'gp'});
    });
    </script>
    </head>
    <body>
    <div id='spacer_type' class='control'></div>
    </body>
    </html>

    Peter Stoev
    Keymaster

    Hi,

    A simple workaround would be to put an additional DIV tag as a container with relative positioning instead of setting the position: relative to the body which breaks the jQuery’s offset function.

    The jqxDropDownList represents a widget that contains a list
    of selectable items displayed in a drop-down.

    body {
    width: 800px;
    margin: 8px auto;
    }
    #container {
    position: relative;
    width: 100%;
    height: 100%;
    }

    $(function () {
    choices = [‘None’, ‘Cardboard’, ‘Plastic’, ‘Lead’];
    $(“#spacer_type”).jqxDropDownList({ source: choices, width: 150, height: 25, autoDropDownHeight: true, theme: ‘gp’ });
    });

    Best Regards,
    Peter Stoev


    donovanh
    Participant

    That is indeed much simpler than I was afraid it would be. I didn’t realize that the body was treated differently from a div in that respect. Thank you very much for your help.

    Donovan

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.