Scroll Bar Visibility - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: css, display, hidden, hide, jqxpanel, panel, scrollbar, style, visibility

This topic contains 9 replies, has 4 voices, and was last updated by MindtoEye 8 years, 4 months ago.

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

Author

Scroll Bar Visibility Posts

November 21, 2013 at 2:21 am Scroll Bar Visibility #32997

Member

Hi folks,

I am attempting to show/hide panels containing sufficient content to enable both the vertical and horizontal scroll bars. The panel works fine. However, when I hide the panel using for example $(“jqxPanelWidget”).css({“visibility”:”hidden”}); the scroll bars remain. I can individually hide both the vertical and horizontal scroll bars, but the bottom right hand corner where the scroll bars overlap remains as an annoying little square.

How do I make a Panel (including the scroll bars) visible/hidden under program control?

cheers
Ron

November 21, 2013 at 9:30 am Scroll Bar Visibility #33028

Dimitar

Participant

Hello Ron,

We do not encounter the reported issue by testing the following example:

<!DOCTYPE html>
<html lang="en">
<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.10.2.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 = "";
            $("#jqxWidget").jqxPanel({ width: 350, height: 350, theme: theme });
            $("#hide").click(function () {
                $("#jqxWidget").css("visibility", "hidden");
            });
        });
    </script>
</head>
<body class='default'>
    <button id="hide">
        Hide panel</button>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana;">
        <div style='margin: 10px;'>
            <h3>
                Early History of the Internet</h3>
        </div>
        <!--Content-->
        <div style='white-space: nowrap;'>
            <ul>
                <li>1961 First packet-switching papers</li>
                <li>1966 Merit Network founded</li>
                <li>1966 ARPANET planning starts</li>
                <li>1969 ARPANET carries its first packets</li>
                <li>1970 Mark I network at NPL (UK)</li>
                <li>1970 Network Information Center (NIC)</li>
                <li>1971 Merit Network's packet-switched network operational</li>
                <li>1971 Tymnet packet-switched network</li>
                <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
                <li>1973 CYCLADES network demonstrated</li>
                <li>1974 Telenet packet-switched network</li>
                <li>1976 X.25 protocol approved</li>
                <li>1979 Internet Activities Board (IAB)</li>
                <li>1980 USENET news using UUCP</li>
                <li>1980 Ethernet standard introduced</li>
                <li>1981 BITNET established</li>
            </ul>
        </div>
        <!--Header-->
        <div style='margin: 10px;'>
            <h3>
                Merging the networks and creating the Internet</h3>
        </div>
        <!--Content-->
        <div>
            <ul>
                <li>1981 Computer Science Network (CSNET)</li>
                <li>1982 TCP/IP protocol suite formalized</li>
                <li>1982 Simple Mail Transfer Protocol (SMTP)</li>
                <li>1983 Domain Name System (DNS)</li>
                <li>1983 MILNET split off from ARPANET</li>
                <li>1986 NSFNET with 56 kbit/s links</li>
                <li>1986 Internet Engineering Task Force (IETF)</li>
                <li>1987 UUNET founded</li>
                <li>1988 NSFNET upgraded to 1.5 Mbit/s (T1)</li>
                <li>1988 OSI Reference Model released</li>
                <li>1988 Morris worm</li>
                <li>1989 Border Gateway Protocol (BGP)</li>
                <li>1989 PSINet founded, allows commercial traffic</li>
                <li>1989 Federal Internet Exchanges (FIXes)</li>
                <li>1990 GOSIP (without TCP/IP)</li>
                <li>1990 ARPANET decommissioned</li>
            </ul>
        </div>
        <!--Header-->
        <div style='margin: 10px;'>
            <h3>
                Popular Internet services</h3>
        </div>
        <!--Content-->
        <div>
            <ul>
                <li>1990 IMDb Internet movie database</li>
                <li>1995 Amazon.com online retailer</li>
                <li>1995 eBay online auction and shopping</li>
                <li>1995 Craigslist classified advertisements</li>
                <li>1996 Hotmail free web-based e-mail</li>
                <li>1997 Babel Fish automatic translation</li>
                <li>1998 Google Search</li>
                <li>1999 Napster peer-to-peer file sharing</li>
                <li>2001 Wikipedia, the free encyclopedia</li>
                <li>2003 LinkedIn business networking</li>
                <li>2003 Myspace social networking site</li>
                <li>2003 Skype Internet voice calls</li>
                <li>2003 iTunes Store</li>
                <li>2004 Facebook social networking site</li>
                <li>2004 Podcast media file series</li>
                <li>2004 Flickr image hosting</li>
                <li>2005 YouTube video sharing</li>
                <li>2005 Google Earth virtual globe</li>
            </ul>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 21, 2013 at 11:48 pm Scroll Bar Visibility #33112

RMcGann

Member

Thanks Dimitar – I uploaded the latest jquery and jqxwidget libraries and it seems to be working fine. Must have been a jqwidgets 2.4.1 and/or jquery-1.8.1 issue.

Thanks again.
Ron

January 9, 2014 at 10:05 am Scroll Bar Visibility #47615

Arun Karthick

Participant

Hi Guys,

Use this Solution and let me know your concern

$(“div > div”, “#+Ur div id+horizontalScrollBar”).removeClass();

January 10, 2014 at 6:10 am Scroll Bar Visibility #47657

Dimitar

Participant

Hello Karthick,

Please clarify the purpose of this solution and re-post the code, formatting it first (select it and press the code button from the toolbar).

Note that the issue, reported by RMcGann does not occur in the latest version of jQWidgets (3.1.0).

Best Regards,
Dimitar

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

August 5, 2016 at 2:00 pm Scroll Bar Visibility #86365

MindtoEye

Participant

I’m having the exact same problem but with a jqxgrid. I’m also using the visibility setting on the outter div that has the grid nested inside it, jqwidgets: 4.1.2, jquery: 3.1.0

August 8, 2016 at 5:11 am Scroll Bar Visibility #86383

Dimitar

Participant

Hello MindtoEye,

Please note that jQuery 3.x is still not officially supported by jQWidgets. If same behaviour occurs with jQuery 2.x or 1.x, please share a jsEditor example reproducing the issue and we will look into it.

Best Regards,
Dimitar

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

August 9, 2016 at 5:54 pm Scroll Bar Visibility #86429

MindtoEye

Participant

Unfortunately our codebase is very large and has a bunch of IP restrictions. It would take longer for me to rig up an example derived from our sources than it would be to investigate what’s going on.

I’m not entirely sure but testing seems to indicate that the hiding of the scrollbars is triggered by the changing of the ‘display’ attribute in one of the parents. We on the other hand use the visibility style attribute since we need to maintain the container attribute’s size properties and it’s place in the rest of the page.

Manually setting the ‘display’ attribute to ‘none’ using Chrome’s inspector hides the scrollbars, manually setting ‘visibility’ to ‘hidden’ does not.

August 10, 2016 at 6:31 am Scroll Bar Visibility #86441

Dimitar

Participant

Hello

Thank you for your feedback. Please add the following CSS to your page in order to fix the issue you experience:

.jqx-scrollbar,
.jqx-grid-bottomright {
  visibility: inherit !important;
}

Best Regards,
Dimitar

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

August 10, 2016 at 1:18 pm Scroll Bar Visibility #86461

MindtoEye

Participant

That works. Thanks!

Martin

Author

Posts

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

You must be logged in to reply to this topic.