jQuery UI Widgets › Forums › Lists › ListBox › vertical scrollbar not visible – checkbox width not considered in calculation

Tagged: , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Todor 4 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    vertical scrollbar not visible – checkbox width not considered in calculation Posts
  • May 6, 2019 at 8:21 am vertical scrollbar not visible – checkbox width not considered in calculation #105049

    stefanb
    Participant

    Hello

    In my Listbox, which is based on the default functionality demo, the last item is not visible, yet the vertical scrollbar is hidden.

    If I interpret the source code correctly, in the _updatescrollbars function, the checkboxes are not considered when initially calculating the width to
    determine whether a horizontal scrollbar reduces the visible height. In my case, the code assumes there is no need for a horizontal scrollbar, therefore hScrollOffset is 0.

    Now, virtualHeight + hScrollOffset does not exceed outerHeight, therefore no vertical scrollbar is visible.

    Yet later on in the function, the width is calculated again, this time considering the checkboxes, and as the condition ‘virtualWidth >= outerWidth – scrollOffset – checkboxes’ is true, the horizontal scrollbar is visible, reducing the visible height and hiding the last item behind the horizontal scrollbar.

    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" /> 
    <meta name="description" content="The jqxListBox represents a widget that contains a list of selectable items."/>
    <title id='Description'>The jqxListBox represents a widget that contains a list of selectable
        items. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var source = [
                   "Affogato",
                   "Americano",
                   "Bicerin",
                   "Breve",
                   "Café Bombón some more text",
                   "Café au lait",
                   "Caffé Corretto",
                   "Café Crema",
                   "Caffé Latte",
                   "Caffé macchiato",
                   "Café mélange",
                   "Coffee milk",
                   "Cafe mocha",
                   "Cappuccino",
                   "Carajillo",
                   "Cortado",
                   "Cuban espresso",
                   "Espresso",
                   "Eiskaffee",
                   "The Flat White",
                   "Frappuccino",
                   "Galao",
                   "Greek frappé coffee",
                   "Iced Coffee",
                   "Indian filter coffee",
                ];
                // Create a jqxListBox
                $("#jqxWidget").jqxListBox({ checkboxes: true, selectedIndex: 3, source: source, width: 210, height: 724 });
            });
        </script>
        <div id='jqxWidget' style="height: 750px">
        </div>
    </div>
</body>
</html>

    Thank you for looking into this.

    Best regards

    Stefan

    May 7, 2019 at 11:50 am vertical scrollbar not visible – checkbox width not considered in calculation #105074

    Todor
    Participant

    Hello stefanb,

    You can use property autoHeight: true. If this is not suitable for you, please review the following example.

    Let us know if you need further assistance.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.