Disable Horizontal ScrollBar In ListBox - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 7 replies, has 4 voices, and was last updated by GenadyT 7 years, 12 months ago.

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

Author

Disable Horizontal ScrollBar In ListBox Posts

January 23, 2013 at 5:18 pm Disable Horizontal ScrollBar In ListBox #14107

Member

Sir

I am having this serious problem while using ListBox. I am trying to add the items dynamically to the ListBox on a Button Click Function. Some Items exceeds the width of the ListBox and results in the Horizontal ScrollBar. I don’t want that ScrollBar to appear! I just want the text to be wrapped in new lines so that the Horizontal ScrollBar do not appears.

Could you please provide me a working example for how to do it?

It will be much appreciated…

Thank You

Regards,
~Kailash

January 23, 2013 at 10:31 pm Disable Horizontal ScrollBar In ListBox #14114

Peter Stoev

Keymaster

Hi Kailash,

Here’s an example which supports items with wrapped text instead of horizontal scrolling:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.min.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 theme = getDemoTheme();
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "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",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
		        ];
                // Create a jqxListBox
                $("#jqxWidget").jqxListBox({autoItemsHeight: true, selectedIndex: 3, source: source, width: 100, height: 250, theme: theme });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 24, 2013 at 5:08 am Disable Horizontal ScrollBar In ListBox #14127

alliwant

Member

Thank You Sir…Thank You Very Much…I didn’t knew the Property ‘autoItemsHeight: true’. It works like charms now! 🙂

April 12, 2013 at 1:09 pm Disable Horizontal ScrollBar In ListBox #19116

kuberasamrat

Participant

Peter,

If I use check boxes. This property is not working properly.

April 12, 2013 at 9:14 pm Disable Horizontal ScrollBar In ListBox #19144

Peter Stoev

Keymaster

Hi kuberasamrat,

I am unable to reproduce that with the latest version of jQWidgets.

Best Regards,
Peter Stoev

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

April 18, 2013 at 10:15 am Disable Horizontal ScrollBar In ListBox #19524

kuberasamrat

Participant

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 can display checkboxes next to its items. You can enable this feature by setting the 'checkboxes' property to true."/>
    <title id='Description'>The jqxListBox can display checkboxes next to its items. You can enable this feature by setting the 'checkboxes' property to true. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.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>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                var source = [
                    "Affogatogre g grgrege",
                    "Americano",
                    "Bicerin grgreger",
                    "Breve",
                    "Café Bombón gregregerger",                    
                    "Café mélange",
                    "Coffee milk grgregregre",
                    "Cafe mocha",
                    "Cappuccino",
                    "Carajillo",
                    "Cortado",
                    "Cuban espressog gregregre regreger",
                    "Espresso",
                    "Eiskaffee",
                    "The Flat White",
                    "Frappuccino",
                    "Galao",
                    "Greek frappé coffee gregreg regr",
                    "Iced Coffee",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
		        ];
                // Create a jqxListBox
                $("#listbox").jqxListBox({ source: source, checkboxes: true, width: 150, height: 200, autoItemsHeight: true,theme: theme });
                // Check several items.
             
            });
        </script>
        <div id='jqxWidget'>
            <div id="listbox"></div>            
        </div>
    </div>
</body>
</html>

Please check how list box UI becomes awful when longer texts are present

April 18, 2013 at 10:23 am Disable Horizontal ScrollBar In ListBox #19526

Peter Stoev

Keymaster

Hi kuberasamrat,

The UI is displayed as expected with the current version – 2.8.1.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 25, 2017 at 12:18 pm Disable Horizontal ScrollBar In ListBox #90975

GenadyT

Participant

Thank You Peter!!!

Author

Posts

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

You must be logged in to reply to this topic.