jQuery UI Widgets Forums Layouts Panel and Responsive Panel Hide Horizontal Scrollbar

This topic contains 8 replies, has 5 voices, and was last updated by  Andrew Cooper 10 years, 3 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Hide Horizontal Scrollbar #21975

    dbs
    Member

    Hi Guys.  I am wanting to use the Panel Widget as a way to display dynamic text that scrolls vertically only, and to have no H Scrollbar.  Is this possible?  I have tried a few different things such as editing the overflow in the base.css, changing the width of the div that holds the text to be smaller than the width of the panel, increasing the size of the panel.  The last two methods doesn’t remove the H Scrollbar, but instead reveals empty space under the VScrollbar, when you move the HScrollbar.  Any recommendations? Here is what I have.  Note there is no dynamic text at this point, as I was wanting to test this portion out first.  Thanks. -david

    <!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 Panel, jqxPanel. Overflow Panel, Container, Panel” />
    <meta name=”description” content=”The jqxPanel widget represents a Panel widget. This widget is a container for other widgets or elements. It automatically
    adds horizontal and vertical scrollbars, if the content is not fully visible.” />
    <title id=’Description’>Panel Test</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/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxpanel.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // Create jqxPanel
    var theme = getDemoTheme();
    $(“#jqxWidget”).jqxPanel({ width: 380, height: 350, theme: theme, sizeMode: “fixed”});

    });
    </script>
    <style>

    .textBox{
    width:330px;;
    font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
    font-size:12px;
    padding-left:15px;
    padding-right:15px;
    padding-top:10px;
    padding-bottom:15px;
    background-color:#666666;
    color:#CCCCCC;

    }
    </style>

    </head>
    <body class=’default’>
    <div id=’jqxWidget’ style=” font-size: 13px; font-family: Verdana;”>
    <div>Quisque luctus, sapien ut pellentesque placerat, diam turpis pulvinar augue, sit amet porttitor lacus quam in lectus. Duis ornare fermentum purus, eget vestibulum dolor ornare nec. In cursus rutrum ligula ut dictum. Nullam massa justo, tincidunt eu suscipit quis, mattis et tortor. In a leo at nisl semper pellentesque non quis metus. Duis a fermentum leo. Nam nec tellus turpis. Sed congue ipsum sodales tellus tincidunt in egestas elit rhoncus. In commodo scelerisque lacus, at viverra orci bibendum et. Pellentesque ullamcorper pulvinar ornare. Nunc porttitor ultricies eros, sit amet facilisis purus cursus eget. Etiam pharetra sagittis convallis. Duis quis lobortis felis. Etiam diam ipsum, sollicitudin id dignissim aliquam, rhoncus non tellus. <p>Curabitur sapien tellus, pulvinar vel pellentesque id, mattis eget orci. Nulla purus elit, accumsan eu rutrum vitae, euismod a nulla. Sed sed tellus ut mi ultrices ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue tortor, tincidunt et consectetur vel, cursus ut magna. Sed ultrices dui eu elit luctus cursus. Vestibulum a tortor eget nibh viverra placerat ut in ante. Mauris eu nunc nisl, vel dictum purus. Maecenas fringilla porttitor malesuada. Aenean aliquet sodales lectus eget dapibus.</p><p>Nunc congue dignissim arcu sit amet porttitor. Nunc tincidunt pharetra erat, eget rhoncus nulla laoreet eu. Donec tristique turpis dui, tincidunt varius massa. Morbi laoreet tempor accumsan. Nunc placerat mi nec nibh fermentum non rhoncus erat condimentum. Aliquam eget metus ut arcu dignissim pharetra a ut ipsum. Donec id posuere elit. Nullam diam mi, bibendum eget ullamcorper eu, suscipit vitae arcu. Curabitur vitae nunc massa. Donec ut ipsum augue. Duis bibendum convallis enim, at sollicitudin eros suscipit a. Integer auctor viverra diam varius malesuada. Sed eu urna arcu, vitae placerat justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p> </div>
    </div>
    </body>
    </html>

     

    Hide Horizontal Scrollbar #21992

    Dimitar
    Participant

    Hello dbs,

    We have tested your sample code, but the horizontal scrollbar does not appear and there do not seem to be any of the reported issues. Please, update your version of jQWidgets to 2.8.3 and test again. We are looking forward to your feedback.

    Best Regards,
    Dimitar

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

    Hide Horizontal Scrollbar #22190

    dbs
    Member

    Thanks for your response, and indeed was encouraged… however the H Scrollbar is still visible, even after re-downloading JQWidgets 2.8.3. Even updated jquery to: jquery-2.0.0.min.js. Any additional thoughts- wondering the difference between our two environments. I tested this on a Mac in Firefox, Safari and Chrome. Thanks again! -david

    $(document).ready(function () {
    // Create jqxPanel
    var theme = getDemoTheme();
    $(“#jqxWidget”).jqxPanel({ width: 380, height: 350, theme: theme, sizeMode: “fixed”});

    });

    Hide Horizontal Scrollbar #22320

    mtbvfr
    Member

    Hi Dimitar, Peter et al,

    I’m having the same problem with Firefox 12 and Mobile Safari (iOS6.1.3).

    It looks like a miscalculation is happening in deciding whether the Horizontal Scroll Bar should be shown or not.

    You can see my problem in the Top Panel of the 2nd Tab.

    Panel Horizontal Scroll Bar Problem Page

    I can overcome the problem by adding the following Style Rule to the page.

    #jqxPnlItemhorizontalScrollBar {display:none;}

    However, it looks like some debugging is required by you guys. Have fun! 🙂

    Looking forward to know how you have solved the problem.

    Thank you, Michael.

    Hide Horizontal Scrollbar #22347

    mtbvfr
    Member

    Hi dbs,

    In your case you should try adding the following within the <head> tag of your page.

    <style type=”text/css”>
    #jqxWidgethorizontalScrollBar {display:none;}
    </style>

    Regards, Michael.

    • This reply was modified 11 years ago by  mtbvfr. Reason: Html Formatting
    Hide Horizontal Scrollbar #22392

    Dimitar
    Participant

    Hello dbs and Michael,

    Thank you for your feedback. We will look into the reported issue.

    Best Regards,
    Dimitar

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

    Hide Horizontal Scrollbar #22455

    dbs
    Member

    Hi Dimitar, Peter and Michael,

    Michael thanks for the recommendation. It works. BUT…

    #jqxWidgethorizontalScrollBar {display:none;} removes horizontal scrollbar as advertised, but the container remains same size, and there is a gap that equals the height of the H scrollbar that remains on the bottom- most obviously under the the V scrollbar. Also ends up screwing with the calculation of the height of the V scroll.

    Sorry…

    -david

    Hide Horizontal Scrollbar #47866

    gwailoh
    Participant

    I posted a request in the General forum to be able to hide scrollbars programmatically. The simplest thing would be able to just pass horizontalScrollBarSize: 0 or horizontalScrollBarSize: -1, etc., in the jqxPanel constructor. This seems a lot cleaner to me than trying to do this in markup.

    Hide Horizontal Scrollbar #51045

    Andrew Cooper
    Participant

    Just for the general information of others who might stumble upon this problem and still be looking for a solution. The solution to simply set the scrollbar’s display property to “none” sucks, as it results in an ugly space left at the bottom of the vertical scrollbar. However, there is now an easy solution that doesn’t seem to have made it into the documentation yet. The sizeMode property of the Panel accepts “horizontalWrap” and “verticalWrap” as values. They do what you would expect, causing the appropriate scrollbar to disappear and the contents to wrap in that direction. It works very well.

    Andrew

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

You must be logged in to reply to this topic.