3.2.0

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
Max
March 11,
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
Max
March 11,
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 (ActiveWidgets)
March 11,
Alex - this happens even if I use the same css for editable or non-editable.
How would I adjust the doctype?

thanks
Max
March 11,
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 (ActiveWidgets)
March 11,
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
Max
March 11,
example?
Alex (ActiveWidgets)
March 11,
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!
Max
March 11,
google for "css specificity". The easy fix for this is adding !important after the value, like

padding-right:2px!important;
Alex (ActiveWidgets)
March 11,

This topic is archived.

See also:


Back to support forum