Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Positioning problems in Chrome 11.0.696.68 #4

Open
cowwoc opened this issue May 20, 2011 · 3 comments
Open

Positioning problems in Chrome 11.0.696.68 #4

cowwoc opened this issue May 20, 2011 · 3 comments

Comments

@cowwoc
Copy link

cowwoc commented May 20, 2011

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
Copy link
Author

cowwoc commented May 20, 2011

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
Copy link
Author

cowwoc commented May 20, 2011

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
Copy link
Author

cowwoc commented May 20, 2011

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@cowwoc