Why can't I put a jquery-ui progressbar inside a div with fixed position?_问答_开发者

Why can't I put a jquery-ui progressbar inside a div with fixed position?

开发者 https://www.devze.com 2023-01-01 16:00 出处：网络

I started the source from this progressbar example, and it works fine. My only change was to set the width of the progressbar to \"20%\".

I started the source from this progressbar example, and it works fine. My only change was to set the width of the progressbar to "20%".

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $("#progressbar").progressbar({ 开发者_StackOverflowvalue: 37 }).css({ width : "20%"});
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="progressbar"></div>

</body>
</html>

I then put the progressbar inside another div, and used css to fix that div in the upper-right-hand corner.

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <style type="text/css">
    #testContainer {
      position : fixed;
      top : 6;
      right : 6;
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $("#progressbar").progressbar({ value: 37 }).css({ width : "20%"});
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="testContainer">
    <div id="progressbar"></div>
</div>

</body>
</html>

The progressbar becomes a slim vertical line on the left side of the screen. What am I doing wrong? I'm new to web development in general, and jquery in particular, so please forgive me if this is a stupid question.

The width property is setting the element's width to 20% of the width of its containing block, which is body in the first example but the div with the id "testContainer" in the second example.

Because testContainer has a fixed position and no other content, it will not have any width. Give it an explicit width and it should do what you want.

You need to define a width for div#testcontainer.