jQuery UI Widgets Forums Layouts Panel and Responsive Panel Vertical and Horizontal Scrollbars in Panel

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

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

  • twellb
    Blocked

    I have a panel with a given size
    containing an image with the exact height
    of the panel.
    The width extends the panels width. –
    that is why a horizontal scrollbar is displayed in default mode.
    But the area at the bottom of the image is covered
    in scrollbarheight – without displaying a vertical scrollbar.

    If this is the intended behaviour – well enough.

    But if this will be modified someday I
    have to know because it would cause a lot of
    need for rewriting my code.

    What will happen?

    thomas


    Dimitar
    Participant

    Hello thomas,

    We suggest you set the panel’s height to be 18px greater than the image’s to compensate for the scrollbar, e.g.:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/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
                $("#jqxWidget").jqxPanel({ width: 350, height: 94 }); // image height is 76px
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana;">
            <img src="../../../images/slider-demo-header-background.png" />
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.