Positioning problems in Chrome 11.0.696.68

cowwoc commented 13 years ago

http://btburnett.com/spinner/example/example.html renders fine in Chrome but http://www.jgeppert.com/jquery-spinner/ does not. Specifically, the up/down arrows render on a separate line than the text-field.

This is 100% reproducible.

cowwoc commented 13 years ago

Looks like you're already familiar with the problem: http://forum.jquery.com/topic/position-breaks-in-chrome-18-10-2010

... but for some reason it wasn't fixed. Adding "position:absolute" fixes the problem on my side.

cowwoc commented 13 years ago

Adding "position: absolute" seems to cause problems.

Place a jsTree on the same page as a spinner. See http://www.jstree.com/
The spinner buttons get absolute positions based on the tree being expanded, however when the page actually a jsTree is collapsed by default so the buttons end up getting the wrong vertical position (lower than they should be).
If you expand all nodes in the tree you will notice the spinner buttons line up perfectly with the spinner text field.
If I remove "position: absolute" from the spinner or add a "height" to the jsTree the problem goes away.

Here is a testcase:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.js"></script>
        <script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js"></script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/ui-lightness/jquery-ui.css" />
        <script type="text/javascript" src="ui.spinner.js"></script>
    </head>

    <body>
        <div id="demo1" class="demo">
          <ul>
            <li>
              <a href="#">Dispatcher</a>
              <ul>
                <li>
                  <a href="#">Hub1</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div>
            <input class="spinner" type="text" value="0"/>
        </div>

        <script type="text/javascript">
            $(function () {
                $("#demo1").jstree();
                $('.spinner').spinner({min: 1, max: 100});
            });
        </script>
    </body>
</html>

cowwoc commented 13 years ago

A further problem with the existing positioning is that "ui-spinner-buttons" eat up vertical space below the spinner even the buttons are no longer sitting there (they have been moved using relative positioning). This occurs under FireFox 4.0.

Expected behavior: the buttons should only take up space where they end up, not in their original position.

jogep / jquery.ui.spinner

Positioning problems in Chrome 11.0.696.68 #4