YUI 2

Ticket #2529072 (closed defect)

Reporter


Willem 		Opened: 08/4/10
Last modified: 04/13/11
Status: closed
Type: defect
Resolution: fixed

Owner


Jenny Donnelly 		Target Release: 2.9.0
Priority: P5 (trivial)
Summary: YUI 2.8.1 ProgressBar in ScrollingDataTable not hidden in IE outside scroll area (OK in Firefox)
Description:

A ProgressBar in a ScrollingDataTable is rendered and visible even if the bar is outside the viewable scrolling area.
Current workaround is turning off the scrolling and using a normal DataTable instead of a ScrollingDataTable - hence set to S2 high.

Example HTML (based on 'ratings' ProgressBar/DataTable example) displaying the problem in IE:

-----cut here------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Ratings</title>

<style type="text/css">
body {
margin:0;
padding:0;
}

</style>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/datatable/assets/skins/sam/datatable.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/progressbar/assets/skins/sam/progressbar.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/get/get-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datatable/datatable-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/progressbar/progressbar-min.js"></script>

</head>

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

<div id="Container"></div>
<script type="text/javascript" src="http://developer.yahoo.com/yui/examples/progressbar/assets/YQLDataSource.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {

YAHOO.util.Event.onDOMReady(function () {
var pbs = [];
var ratingFormatter = function (elLiner, oRecord, oColumn, oData) {
var pb = new YAHOO.widget.ProgressBar({
width:'90px',
height:'18px',
maxValue:5,
value:oData
}).render(elLiner);
pbs.push(pb);
};

var dt = new YAHOO.widget.ScrollingDataTable(
'Container',
[
{key:"Title",sortable:true},
{key:"Rating.AverageRating",label:"Rating", sortable:true, formatter:ratingFormatter}
],
new YAHOO.util.YQLDataSource(null, {responseSchema:{fields:[{key:"Rating.AverageRating",parser:"number"}]}}),
{
initialRequest:'select Title, Rating.AverageRating from local.search where query="sushi" and location="san francisco, ca"' ,height:"10em",width:'100px'
},
{height:"10em",width:'100px' }
);
dt.on('beforeRenderEvent',function() {
for (var i = 0; i<pbs.length; i++) {
pbs[i].destroy();
}
pbs = [];
});
});
});
</script>
</body>
</html>

-------cut here------------------
Type: defect Observed in Version: 2.8.1
Component: ProgressBar Severity: S3 (normal)
Assigned To: Jenny Donnelly Target Release: 2.9.0
Location: Website Priority: P5 (trivial)
Tags: ProgressBar ScrollingDataTable Relates To:
Browsers: IE 7.x
URL:
Test Information:

Tested on linux/Firefox (all fine), and Windows Vista/IE (wrong).

Screenshot attached.

Attachments

Attachment #1: screenshot.png (download)

Change History

Willem
Posted: 08/4/10
  • browser changed from N/A to IE 7.x

George

YUI Developer
Posted: 08/4/10

Ticket moved from: http://yuilibrary.com/projects/yuilibrary/ticket/2528274

George

YUI Developer
Posted: 08/4/10
  • component changed from None to DataTable
  • owner changed from Jenny Donnelly to George
  • priority changed to P3 (normal)
  • status changed from accepted to assigned
  • version changed to 2.8.1

Jenny,

Can you do first pass on analysis to determine if this is a data table issue or progressbar and reassign as necessary?

Thanks

Willem
Posted: 08/5/10

This can be resolved by updating the DataTable CSS file; [code]position: relative[/code] needs to be inserted as follows:

[code]
...
.yui-dt-scrollable .yui-dt-bd {
overflow:auto;
position:relative;
}

...
[/code]

Thanks to Satyam for checking.

George

YUI Developer
Posted: 08/6/10

Jenny Donnelly

YUI Developer
Posted: 01/17/11
  • component changed from DataTable to ProgressBar
  • location changed to Website
  • milestone changed to 2.9.0
  • owner changed from Jenny Donnelly to Satyam
  • priority changed from P3 (normal) to P5 (trivial)
  • severity changed from S2 (high) to S3 (normal)
  • status changed from accepted to assigned

Best handled in PB documentation.

Jenny Donnelly

YUI Developer
Posted: 01/17/11

Jenny Donnelly

YUI Developer
Posted: 01/17/11
  • status changed from assigned to accepted

Jenny Donnelly

YUI Developer
Posted: 03/19/11
  • status changed from accepted to checkedin

George

YUI Developer
Posted: 04/13/11
  • resolution changed to fixed
  • 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