Doesn't work with "box-sizing: border-box;" - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

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

Author

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

February 25, 2013 at 9:23 am Doesn't work with "box-sizing: border-box;" #15806

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

February 25, 2013 at 9:34 am Doesn't work with "box-sizing: border-box;" #15808

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

February 25, 2013 at 10:56 am 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

February 25, 2013 at 11:17 am 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

Author

Posts

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

You must be logged in to reply to this topic.