PDA

View Full Version : Grid Panel Header - Right Border Disappears



septerr
5 Nov 2014, 3:24 PM
We are using version 4.2.0 of Ext JS. We are displaying a grid panel with rowediting plugin, so a user can edit rows. We are seeing a strange behavior. The column headers look as below when the screen is first rendered:
50924
After I click on a row, edit and hit Update, the header looks like below:
50925

Notice how the right border in the header columns is now missing?

Inspecting the html in Chrome's Dev Tools, I found that in the first case when the borders are displayed, the first column has following css properties:

position: absolute
left: 0;
width: 199px;
border-right: 1px;
The second column has following css properties:

position: absolute
left: 200;
width: 299px;
border-right: 1px;


In the second case i.e. after editing a row, the first column has following properties:

position: absolute
left: 0;
width: 200px;
border-right: 1px;
The second column has following properties:

position: absolute
left: 200;
width: 300px;
border-right: 1px;


Notice how the width of the first column changed from 199px to 200px, but the absolute left position of the second column stayed the same? The second column is hiding the border of the first column.

Is this a known problem? Is there a solution?

slemmon
7 Nov 2014, 12:27 PM
While it's not a familiar bug to me, you might try testing with 4.2.1 and see if the bug persists.

Are you using custom CSS to decorate the grid?
If so, if you remove the custom CSS do you still see the issue?

If not, can you post a test case that demonstrates the issue you're seeing at https://fiddle.sencha.com and we can test along with you?