Forums

Board index » YUI 2.x: » DataTable and DataSource

Page 1 of 1   [ 3 posts ]
New Topic | Post Reply | Print view

Willem

  • Username: willem
  • Joined: Wed Aug 04, 2010 2:36 am
  • Posts: 2
  • Offline
  • Profile
Tags:

ProgressBar in ScrollingDataTable render problem in IE

Post Posted: Wed Aug 04, 2010 3:18 am
+0-
Problem with ProgressBar in a ScrollingDataTable seen in IE, but not Firefox:
The P'Bars are rendered outside the visible scroll area in IE, and do not scroll with the rest of the table.

Anyone know a solution?
Maybe it is just a CSS issue (but I fear it's IE messing up, I think I have seen something like this with vector graphics in a position:relative container as well...). Any input appreciated. Example to try added below. Firefox is fine, IE is broken.

Thanks
Willem

[ticket=]2828274[/ticket]


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------------------

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2016
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile
Tags:

Re: ProgressBar in ScrollingDataTable render problem in IE

Post Posted: Wed Aug 04, 2010 4:38 am
+0-
Try the following style declaration:

.yui-dt-bd {position:relative;}

If this fixes it, please add this solution to the ticket. you created (I couldn't find it) and make sure the component is set to DataTable

Willem

  • Username: willem
  • Joined: Wed Aug 04, 2010 2:36 am
  • Posts: 2
  • Offline
  • Profile
Tags:

Re: ProgressBar in ScrollingDataTable render problem in IE

Post Posted: Thu Aug 05, 2010 3:05 am
+0-
Ta v. much. That fixes it!
The following bit should be changed in the default DataTable .css file

Code:
...
.yui-dt-scrollable .yui-dt-bd {
overflow:auto;
position:relative;
}
...


I'll have the ticket resolved.
Page 1 of 1   [ 3 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

© 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

Powered by phpBB® Forum Software © phpBB Group