Rows are not aligned properly under the Column headers in EditorGrid in GXt 2.2.3

Question

I Created an EditorGrid using GXT 2.2.3.Now the problem is rows are not aligned properly under the column header,they are slightly move to left side.

Please suggest how to resolve this.

Occidental

Check your CSS. If you have custom CSS file then remove it and check the output. – Nichol

@Nichol Not possible to remove the custom css file.it was used by some other forms in project – Occidental

If by disabling custom CSS fixes your issue, then you know where the problem is. You will need to isolate the problematic CSS. – Nichol

@Nichol can please help me how to disable the custom css – Occidental

By disabling, I meant comment or remove the section that includes custom CSS to your page. If your issue is fixed after removing that then you know that you are on right track and start digging deeper. – Nichol

@Nichol I had .x-grid3-row,.x-grid3-row-alt,.x-grid3-row-over and some more in my common css file.Which one I need to override to resolve this issue – Occidental

Sorry, not sure about the exact CSS class. You could do trial and error. – Nichol

Answer 1

I solved this by setting the padding and width of each column as below:

actioncolumn.setStyle("width:100%;");
actioncolumn.setStyle("padding-right:3px;");

Pursuant

Answer 2

We've had problems with column header alignment before...

If you are re-initializing your grid with reconfiure() calls, make sure the widget is attached to DOM. If widget is not attached, column width calculations won't be correct. I realized this while debugging deep inside GXT framework running in GWT dev mode.

In our case we are treating our display classes as singleton objects to speed up rendering. The alignment issue did not appear the first time, only when revisiting the already rendered place.

See my post: https://coderwall.com/p/tuqi6a

Frostwork

I am new to GXT.After fetching the Data from the database I am putting the values into the Grid by using the Model and then I 'grid.reconfigure(caseStoreModule, createColumnModel(ACCCheckBoxModel));' to show the values in the Grid.I didn't get , make sure the widget is attached to DOM.Please elaborate it to resolve this. – Occidental

Without grid.reconfigure() also same issue I am facing – Occidental

I got the similar problem in GXT 3. For me, the issue was, i was not using the standard doctype in my first page i.e index.html .. try the standard doctype for HTML 5 (if you are not using it already) – Chirlin

If you ran the GUI without the grid.reconfigure() call and you don't have the behavior that the grid becomes unaligned when reattaching it to DOM, my tip won't help you i'm afraid. I would suggest removing all CSS files but the GXT ones. – Frostwork

@user3563830: Do you know if this is reproducible with GXT3? – Rabaul