# Reduce rows height in a grid

sebasfdz
101

Hi, I'm new to ZK framework and I've never worked with CSS so this is al new to me anda any help is greatly appreciated. I just wnat to reduce the height of the rows in a grid so it looks good with slimmer rows but i just cant to figure it out. How can I change the height of the rows and also how can i center the lables text in every cell?

Here's my code (well at least the style part which from what ive gathered i assume here's where i can fix it but if not pls let me know)

    <style>
.z-row-content .z-label {
font-size: 11px;
}
.z-column-content{
font-size: 11px;
}
.z-row-content{
}
</style>
<grid>......</grid>


I can't upload images yet but for now the padding 0 works only for the columns width and i just need the rows height to be smaller

delete retag edit

## 6 Replies

MDuchemin
2146 1 5

Hi There,

Karma bumped for image, links, etc ;)

If you are trying to modify a Grid and the row do not size down, you most likely have not reduced the line-height of the .z-row-content class.

Note: This will depends on your ZK version, the base theme for your application, etc

sebasfdz
101

thankssss, I tried that in a different code and it worked but i encountered a bigger problem i think. Turns out the issue is the iceblue them which sadly is the default one and for some reason if the label value is set in a java class using an MVC pattern, for some weird reason the line-height doesn't work. And this only happens with the iceblue theme, the other ones work just fine and now i have two possible solutions but i don't know how to do neither of them. How can i fix this in the iceblue theme (if possible) or how can i change zk's theme?

Here's the complete code in ZK Fiddle: my code

MDuchemin
2146 1 5

Hey there again ;)

Well, I wouldn't say the issue is "the iceblue theme" :D

Each theme has its own structure and constraints. FYI, if you are looking for a generally more compact experience, you could consider the iceblue_c (iceblue compact) theme as your application's basic theme.

Regarding what was missing to reduce the row height in this case: https://zkfiddle.org/sample/2t301n9/4-grid-iceblue-rows-height

The grid cell elements had 2 height-generating properties: line-height and padding. You can remove / reduce these values.

With table-based elements, generally a row is as tall as the largest child of the row. That means that you want to check the row content to see "who is the tall element which is giving a height to everything else"

I recommend the chrome developer tools, Elements panel (and style / computer style sub-pannels in that tab) to review your current style. Firefox tools also work decently well.

MDuchemin
2146 1 5

BTW a small warning in changing grid (or listbox or tree) sizing:

Some ZK functions rely on rows having "the same height" as all other rows. For example, if you are using paging mode the number of rows which can be fit in a page is calculated on the basis of (gridHeight / firstRowHeight).

There is nothing wrong about customizations like this in general, but you may want to be careful, especially if you are using any sort of render on demand, paging, automatic row count, etc.

sebasfdz
101

thank you, really. I still have a lot to learn about this but you helped me understand it better, thanks.

MDuchemin
2146 1 5

Happy to help ;)

[hide preview]