Home/ Questions/Q 849321
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T07:05:20+00:00

I started the source from this progressbar example , and it works fine. My

  • 0

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({ value: 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0