0

Reduce rows height in a grid

asked 2022-07-15 08:07:45 +0800

sebasfdz gravatar image 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;
    padding: 0;
    }
    .z-column-content{
    font-size: 11px;        
    padding: 0;
    }
    .z-row-content{
    padding: 0;
    }
</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 flag offensive retag edit

6 Replies

Sort by ยป oldest newest

answered 2022-07-15 10:19:16 +0800

MDuchemin gravatar image MDuchemin
2146 1 5
ZK Team

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

See a sample with the updated CSS here.

link publish delete flag offensive edit

answered 2022-07-15 11:10:54 +0800

sebasfdz gravatar image 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

link publish delete flag offensive edit

answered 2022-07-15 11:46:32 +0800

MDuchemin gravatar image MDuchemin
2146 1 5
ZK Team

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.

link publish delete flag offensive edit

answered 2022-07-15 11:55:10 +0800

MDuchemin gravatar image MDuchemin
2146 1 5
ZK Team

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.

link publish delete flag offensive edit

answered 2022-07-15 12:44:03 +0800

sebasfdz gravatar image sebasfdz
101

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

link publish delete flag offensive edit

answered 2022-07-15 12:54:54 +0800

MDuchemin gravatar image MDuchemin
2146 1 5
ZK Team

updated 2022-07-15 12:55:53 +0800

Happy to help ;)

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2022-07-15 08:07:45 +0800

Seen: 7 times

Last updated: Jul 15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More