jquery.ui.spinner icon indicating copy to clipboard operation
jquery.ui.spinner copied to clipboard

Published 20 hours ago • verified publisher icon jogep

Positioning problems in Chrome 11.0.696.68

Open cowwoc opened this issue 13 years ago • 3 comments

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 avatar May 20 '11 13:05 cowwoc

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 avatar May 20 '11 15:05 cowwoc

Adding "position: absolute" seems to cause problems.

  1. Place a jsTree on the same page as a spinner. See http://www.jstree.com/
  2. 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).
  3. If you expand all nodes in the tree you will notice the spinner buttons line up perfectly with the spinner text field.
  4. 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 avatar May 20 '11 16:05 cowwoc

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.

cowwoc avatar May 20 '11 20:05 cowwoc