jQuery UI Widgets › Forums › Lists › ListBox › vertical scrollbar not visible – checkbox width not considered in calculation
This topic contains 1 reply, has 2 voices, and was last updated by Todor 5 years, 11 months ago.
-
Author
-
May 6, 2019 at 8:21 am vertical scrollbar not visible – checkbox width not considered in calculation #105049
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 #105074Hello 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,
TodorjQWidgets Team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.