PDA

View Full Version : Grid column head height style issue



rational
8 Jun 2010, 6:49 AM
I'm changing the theme of an existing gxt application. From a CSS theme that looks near my idea, I'm modifying several classes to adjust the look and feel.

I was very surprised when, with the new theme, the text of the headers in the grid's columns, appear one a little bit taller than the one before. I thought that the new CSS would have some padding which didn't work fine, but analyzing, I discovered that the "height" parameter responsible of that behavior was defined inline. How can it be if I just swapped the CSS file?

In the java code there isn't any mention of this height, who is defining this style?

The code generated using the old theme:
<div __uiobjectid="8" __eventbits="125" class=" x-grid3-hd-inner x-grid3-hd-turnoVo.indHorarioFijo x-component" id="x-auto-122" style="width: 68px; height: 22px;"><a href="#" class="x-grid3-hd-btn"></a><span class=" x-component" id="x-auto-121">Presencia</span><img width="1" height="1" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-grid3-sort-icon"></div>
<div __uiobjectid="9" __eventbits="125" class=" x-grid3-hd-inner x-grid3-hd-turnoVo.indDisponibilidad x-component" id="x-auto-124" style="width: 88px; height: 22px;"><a href="#" class="x-grid3-hd-btn"></a><span class=" x-component" id="x-auto-123">Disponibilidad</span><img width="1" height="1" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-grid3-sort-icon"></div>

The code with the new theme:
<div __uiobjectid="8" __eventbits="125" class=" x-grid3-hd-inner x-grid3-hd-turnoVo.indHorarioFijo x-component" id="x-auto-120" style="width: 68px; height: 23px;"><a href="#" class="x-grid3-hd-btn"></a><span class=" x-component" id="x-auto-119">Presencia</span><img width="1" height="1" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-grid3-sort-icon"></div>
<div __uiobjectid="9" __eventbits="125" class=" x-grid3-hd-inner x-grid3-hd-turnoVo.indDisponibilidad x-component" id="x-auto-122" style="width: 88px; height: 29px;"><a href="#" class="x-grid3-hd-btn"></a><span class=" x-component" id="x-auto-121">Disponibilidad</span><img width="1" height="1" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-grid3-sort-icon"></div>

With the first theme, the height is 22px in both columns, while with the second theme, the heigh is 23px for the first column and 29px for the second. But the height is defined inline? How?

Any idea?

Thanks a lot.