jQuery UI Widgets Forums Navigation Expander Doesn't work with "box-sizing: border-box;"

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 6 years, 11 months ago.

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

  • NoiZy
    Participant

    Hi,

    The expander doesn’t display well if I do the following in my css.
    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

    The clickable area is wider then the content area.

    Kind regards

    • This topic was modified 6 years, 11 months ago by  NoiZy.

    Peter Stoev
    Keymaster

    Hi NoiZy,

    The following sample is built with jQWidgets 2.7 and we cannot reproduce the reported behavior.

    <!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.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <style>
    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    </style>
    <script type="text/javascript">
    $(document).ready(function () {
    // Create jqxExpander
    var theme = getDemoTheme();
    $("#jqxExpander").jqxExpander({ width: '350px', theme: theme });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="float: left;">
    <div id='jqxExpander'>
    <div>
    Early History of the Internet</div>
    <div>
    <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>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Doesn't work with "box-sizing: border-box;" #15811

    NoiZy
    Participant

    To be honest, I’m a littlebit frustrated about jqWidgets.

    It’s again a 100% page scenario, were I already make several bug reports for other components in jqWidgets.
    I don’t know, if this time, there is a relation between 100% and my problem.

    I know there is a problem with jqWidgets in a 100% page scenario, but I can not pin the problem to one line of code for you ;(
    And If I do a screenshot of the problem and add it to a topic in this forum, you delete it.

    I only know I ever use the same “framework” around a web project.
    I use normalize.css, modernizr and the line I already mentioned in my general css file.

    And I know, I have ever design problems with jqWigets which is realy frustrating!

    Kind regards

    Doesn't work with "box-sizing: border-box;" #15818

    Peter Stoev
    Keymaster

    Hi Noizy,

    Thank you for the feedback.

    In case we reproduce the reported behavior, we will fix it. At present, there is a known issue in jqxExpander and jqxNavigationBar if the width property is a percentage value and it will be resolved next version. However, I do not know whether this is related to your issue, because you have not provided any sample code.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.