Editable cells Column alignment problem

Editable cells Column alignment problem

We have had this problem for quite a while:

In a grid with a mix of editable and non-editable cells (simple input fields), the editable cells push the alignment of the cell to the right a pixel (or so) for each cell so that as the columns progress to the right, the editable cells keep getting pushed further to the right. This causes the editable cells to be skewed further and further to the right. The headers are fine.

So, for example, columns 1-4 are fine (non-editable), col 5 (editable) starts fine but extends a pixel (or so) over to the next col (6) which is also editable and now extends two pixels (or so) over to the next cell etc.

I have tried various css settings but to no avail.

Any ideas?
Max

Ok, let me add some imp info:

the reason for the editable cells getting pushed to the right is that the editable cells are slightly wider (e.g 1 pixel wider) than the non-editable cells.

thanks
Max

This may happen if you use 'standards' mode doctype and you also added vertical border to the editable cell without reducing the padding (to keep the same width).

Alex - this happens even if I use the same css for editable or non-editable.
How would I adjust the doctype?

thanks

If you are ok with 'quirks' mode - just remove doctype declaration. Otherwise you should reduce padding by 1px in each place where you are adding 1px border.

#myGrid .aw-grid-cell {
border-right: 1px solid threeddarkshadow;
padding-right: 3px;
}

http://www.activewidgets.com/javascript.forum.19649.6/header-and-cell-data-alignment.html

Alex-
Even if I use the same css for editable - same as non-editable - I see the editable fields getting pushed to the right.
Max

example?

OK, so if I set it by hand:

grid.getCellTemplate(col).setStyle("padding-right", "2px") - it works

but it didn't work in my css setting for some reason

thanks!

google for "css specificity". The easy fix for this is adding !important after the value, like

padding-right:2px!important;