ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: markn on October 10, 2024, 02:53:50 am

Title: Issue with setting row height
Post by: markn on October 10, 2024, 02:53:50 am

I am facing an issue with setting the row height in PQGrid. Despite multiple attempts, the grid continues to render rows with a height that differs from my defined settings.

Details:

• I have set autoRow: false in the grid configuration and attempted to manually set the row height using both CSS and JavaScript.
• With autoRow: false, the maximum row height I observe is 27px, which is smaller than my desired height of 36px.
• I’ve also tried using autoRow: true, but with this setting, the smallest row height observed is 39px, which is larger than my desired row height of 36px.
• I have used various CSS and JavaScript methods to control the row height, but none seem to take effect as expected.

Here are the steps I have done:

• Set autoRow: false and tried using rowHeight in the grid configuration.
• Added the following CSS rule to control row height: .pq-grid-row { height: 36px !important; } This rule does not seem to apply, and the grid still displays rows with a maximum height of 27px.
• I also tried using the following CSS, based on a suggestion in another support item: .pq-no-wrap > .pq-grid-row > .pq-grid-cell, .pq-no-wrap > .pq-grid-row > .pq-grid-col > .pq-td-div { word-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0px; height: 36px; } However, this CSS also had no effect on the row height.
• Additionally, I tried using jQuery to manually adjust the height after the grid rendered: $(".pq-grid-row").css("height", "36px"); Despite these efforts, the grid still renders row heights of 27px with autoRow: false

I need to set the row height to specific value, and I would like guidance on how to achieve this, whether through the configuration, CSS, or JavaScript. 

Could you please advise on how to set the row height?

Thank you in advance for your assistance!

Best regards,

Mark

Title: Re: Issue with setting row height
Post by: paramvir on October 10, 2024, 06:36:29 am

Please check this documentation on row heights: https://paramquery.com/pro/demos/row_heights

and let me know if you need further assistance.

Title: Re: Issue with setting row height
Post by: mikep on October 17, 2024, 12:25:26 am

Can you update the row Height in this simple example so that there is no extra vertical space? When I try to adjust the row height to remove the extra space at the bottom of the icon, it ends up clipping off the top of the icon.

https://jsfiddle.net/vhaLqg6m/

Title: Re: Issue with setting row height
Post by: paramvir on October 17, 2024, 01:55:37 pm

Please check this jsfiddle to remove extra space at bottom of icon: https://jsfiddle.net/rL42ub1d/

I've set autoRow: false and rowHt: 32

Title: Re: Issue with setting row height
Post by: mikep on October 17, 2024, 05:06:40 pm

thank you. Is there any way to get the icon in the middle of the cell? It seems like there is always an extra space, either top or bottom, and adjusting the valign and/or rowHt doesnt address it.

Title: Re: Issue with setting row height
Post by: paramvir on October 19, 2024, 06:56:25 am

It's because of padding in a cell, position:absolute can be used for the image for precise positioning of the image in cell.

https://jsfiddle.net/d408bzj7/