Reset CSS

New Functionality Requests
#1

Re: v.2.5 build 91111

There has discussion over the past few years, largely initiated by Eric Meyer, about the use of a “reset.css” style sheet. The idea being that a web developer should not depend on the default handling of HTML tags being consistent across browsers. Please see:

meyerweb.com/eric/thoughts/2008/ … ing-again/

and other related pages. He encourages developers to load their own reset.css as the first style sheet loaded by a page. (He has a suggested ‘reset.css’ at the above link.)

I notice that if I have a default

style as:

td{text-align:left;font-weight:normal;}

then

myGrid.setColAlign(“center,right”);

will not work.

This, I believe, is a problem with dhtmlxGrid. I should be able to style HTML tags any way I need to style them (upstream) and still have your API work as expected.

Don’t you think?

Below is a sample page that demonstrates the problem as I see it.

Karl

Test Grid - Center and Right align do not work. /* Comment out this style, and right and center column align works. */ td{text-align:left;font-weight:normal;} #Schedule { margin:0; padding:0; border-width:1px; border-color:#000; border-style:ridge; } p { margin:0 10em; }; function initThisGrid() { gSchedule = new dhtmlXGridObject("Schedule"); gSchedule.setImagePath("codebase/imgs/"); gSchedule.setHeader("Col1,Col2,Col3,Col4,Col5,Col6"); gSchedule.setInitWidths("87,115,115,115,115,*"); //ReadOnly (ro) - the cell can't be edited; gSchedule.setColTypes("ro,ro,ro,ro,ro,ro"); // Setting horizontal alignment to test right and center alignment gSchedule.setColAlign("left,center,right,right,right,right"); // Setting vertical Alignment gSchedule.setColVAlign("middle,middle,middle,middle,middle,middle"); gSchedule.setEditable(false); gSchedule.enableSmartRendering(true); gSchedule.init(); }; 
		function fillGrid() {
			gSchedule.clearAll();
			gSchedule.addRow(1, Array("2010", "01/01/2010", "1,000", "2,000", "3,000.99", "4,000.88"));
			gSchedule.addRow(2, Array("2010", "02/01/2010", "1,000", "3,000", "5,000.99", "14,000.88"));
			gSchedule.addRow(3, Array("2010", "03/01/2010", "1,000", "4,000", "6,000.99", "24,000.88"));
			return true;
		}
	</script>
</head>
<body>
	<div style="margin:10em;">
		<div id="Schedule" style="height: 17.5em;width:40em;"></div>
	</div>
	<p><input type="button" onclick="fillGrid();" value="Populate Grid" /></p>
	<script type="text/javascript">
		initThisGrid();
	</script>
</body>
#2

If you are setting styles for html elements - they will affect all elements on the page, including ones which are used by grid. While TD style, in your example, can be reset by grid’s styles, it possible to define css in such way that it will be nearly impossible to redefine from the grid.

We may update this logic in future, but for now global css styles will affect rendering of a grid.

#3

Thanks for your comment.

Personally, I would vote for changing the logic. As of now, it seems to me that the cascade is broken.

Calling an align method (or any method) should override any default styles that a developer might have previously set.