YUI 2

Ticket #2529310 (closed defect)

Reporter


crispy 		Opened: 03/17/11
Last modified: 04/13/11
Status: closed
Type: defect
Resolution: fixed

Owner


Jenny Donnelly 		Target Release: 2.9.0
Priority: P3 (normal)
Summary: ProgressBar only works correctly if width is specified in pixels
Description:

The API docs for ProgressBar's "width" config attribute say:

Width of the ProgressBar. If a number, it will be assumed to be in pixels. If a string it should be a valid setting for the CSS width attribute. It will always be returned as a string including
units.

However, if you use anything other than pixels (e.g. ems or percentages), the progressbar doesn't display correctly. The width of the bar is correctly set using the width attribute, but the code that
works out how much of the bar to fill seems to be using the numeric value of the 'width' attribute without considering the units.
Type: defect Observed in Version: 2.8.2
Component: ProgressBar Severity: S3 (normal)
Assigned To: Jenny Donnelly Target Release: 2.9.0
Location: Priority: P3 (normal)
Tags: Relates To:
Browsers: N/A
URL:
Test Information:

Example HTML file below. All progress bars should be full (value == maxValue), but the two that have widths in %age and ems are not.

<html>

    <head>

        <!-- Required CSS -->

        <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.2r1/build/progressbar/assets/skins/sam/progressbar.css">



<!-- Dependency source file -->

        <script src = "http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js" ></script>

        <script src = "http://yui.yahooapis.com/2.8.2r1/build/element/element-min.js" ></script>

        <!-- Optional dependency source file -->

        <script src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js" type="text/javascript"></script>



<!-- ProgressBar source file -->

        <script src = "http://yui.yahooapis.com/2.8.2r1/build/progressbar/progressbar-min.js" ></script>



<script type="text/javascript">

            YAHOO.util.Event.onDOMReady(function()

            {

                var PB1 = new YAHOO.widget.ProgressBar({

                    value: 10, maxValue: 10, width: 200

                }).render("pb1");



var PB2 = new YAHOO.widget.ProgressBar({

                    value: 10, maxValue: 10, width: '200px'

                }).render("pb2");



var PB3 = new YAHOO.widget.ProgressBar({

                    value: 10, maxValue: 10, width: '100%'

                }).render("pb3");



var PB4 = new YAHOO.widget.ProgressBar({

                    value: 10, maxValue: 10, width: '14em'

                }).render("pb4");

            });

        </script>

    </head>

    <body class="yui-skin-sam">

        <div style="width: 200px; border: 1px black solid;">

            <div id="pb1"></div>

            <div id="pb2"></div>

            <div id="pb3"></div>

            <div id="pb4"></div>

        </div>

    </body>

</html>

Change History

Jenny Donnelly

YUI Developer
Posted: 03/19/11
  • priority changed to P3 (normal)
  • resolution changed to wontfix
  • status changed from new to closed

Updated known issues and apidocs.

Jenny Donnelly

YUI Developer
Posted: 03/19/11
  • resolution changed from wontfix to fixed
  • status changed from closed to checkedin

[fix #2529310] Doc: PB width/height in pixels only.
View Commit: 549d6c1a0519da385dfd9187256ed3d1cc546970

George

YUI Developer
Posted: 04/13/11
  • milestone changed to 2.9.0

George

YUI Developer
Posted: 04/13/11
  • status changed from checkedin to closed

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info