asked on July 26, 2023
Hello,
We are attempting to implement a feature where users can customize their row height. Using tableSizes objects, we can set the height of the rows.
However, we are encountering issues with setting row heights below 30px. It simply does not go below (except for 0px in which case the row is hidden entirely).
We have attempted to set the CSS minimum height to 0px in both customizeCells and via the CSS. We have also attempted to follow the instructions in this ticket:
https://www.flexmonster.com/question/reduce-flex-monster-2-8-cell-height-and-font-size/?hilite=%22height%22
However, we have not found the solution in the link works (it does not even work in the JSFiddle in our experience).
Is it possible to set a row height of lower than 30px using table sizes (or a not too extensive workaround)?
Br
Jonas
⋅ July 26, 2023
Hello Jonas,
Thank you for reaching out to us.
It is possible to set custom row height using the following CSS rules:
#fm-pivot-view .fm-grid-row,
#fm-pivot-view .fm-grid-row-mobile {
height: 25px !important;
min-height: 25px;
}
You are welcome to check the following JSFiddle for reference: https://jsfiddle.net/flexmonster/Ldc1vrew/
Please let us know if it works for you. Looking forward to hearing from you.
Kind regards,
Nadia
⋅ July 27, 2023
Hello
i have attached a screen shot of the js fiddle. it helped a little but it is now only possible to go to 24px
we need to override the minimum height completely as we need to be able to style the table fully.
/MAM
⋅ July 28, 2023
Hello,
Thank you for the response.
Kindly note that the cell height is currently limited to a minimum of 24px. This limitation ensures proper display and readability of the content in the cells. Smaller cell heights make it difficult for users to interact with or view the data. Keeping a minimum cell height of 24px ensures the content remains visible, and users can easily interact with the cells without any issues.
You are welcome to contact us in case other questions arise.
Kind regards,
Nadia
⋅ July 31, 2023
Hello
Then i would like officially make feature request to make height customizable to any height. As we have some use cases in which this would be preferable, such as display of large financial reports in a compact manner.
having a default of 24 or 30 is fine for normal users. but i see no reason for superusers not being able to customize things like this to their specific liking and needs.
Br /MAM
⋅ July 31, 2023
Hello,
Thank you for the response.
Your suggestion on setting the height below 24px sounds reasonable. Our team will provide the feature with our minor release with the ETA September 4th. We will notify you about the release.
You are welcome to reach out to us in case further questions arise.
Kind regards,
Nadia
⋅ September 5, 2023
Hello,
We are glad to announce that the .fm-grid-header and .fm-grid-header-mobile CSS selectors were added to customize the width and height of grid sheet headers. See an example on JSFiddle.
This is included in the 2.9.59 version of Flexmonster: https://www.flexmonster.com/release-notes/version-2-9-59/
You are welcome to update the component. Here is our guide on upgrading to the latest version: https://www.flexmonster.com/doc/updating-to-the-latest-version/
Please let us know if the feature works fine for you.
Best regards,
Maksym
⋅ September 6, 2023
Thank you.
we will make sure let you know if it worked for us when we get back around to this one.
/MAM
⋅ September 6, 2023
Hello,
Thank you for the response.
Your feedback is valuable to our team, so we'll be waiting for the following updates on the matter.
Kind regards,
Nadia
⋅ October 12, 2023
Hello again,
Thank you for adding the feature. Is it possible to set the height for rows via tableSizes as well? Herein setting the height of specific rows? We can't get it to work, see attached fiddle for example:
https://jsfiddle.net/k7fq9bav/
br,
Jonas
⋅ October 13, 2023
Hello Jonas,
Thank you for the feedback.
To set the row height using tableSizes, you should set the min-height for the necessary selectors. For example,
#fm-pivot-view .fm-grid-row,
#fm-pivot-view .fm-grid-row-mobile {
min-height: 10px;
}
This way, you will be able to set the necessary height using the tableSizes.
Please let us know if it works for you. Looking forward to hearing from you.
Kind regards,
Nadia
⋅ October 13, 2023
Hello again,
I have modified the Fiddle I sent with the CSS code you gave. The height can indeed reach lower than 25px now with tableSizes, but it seems there are some unintentional visual side effects of this:
https://jsfiddle.net/4sxuL28e/
The row height does not seem to match right after the short row. Notice row the "Cars" row's header retains its size. This causes the next row to be kind of staggered. If you select the headers and navigate down, you will also notice that the selection coloring's placement is off. It seems to stem from the fact that the row number header height does not correspond to the row height.
⋅ October 13, 2023
Hello,
Thank you for the prompt response.
Kindly set the following CSS rules to display the cells properly:
#fm-pivot-view .fm-grid-row,
#fm-pivot-view .fm-grid-row-mobile {
height: 30px !important;
min-height: 10px;
}
#fm-pivot-view .fm-grid-column,
#fm-pivot-view .fm-grid-column-mobile {
width: 90px !important;
min-width: 90px;
}
#fm-pivot-view .fm-grid-header,
#fm-pivot-view .fm-grid-header-mobile {
height: 30px !important;
width: 10px !important;
}
#fm-pivot-view .fm-grid-layout div.fm-cell {
padding-top: 3px !important;
padding-bottom: 0 !important;
font-size: 11px !important;
}
#fm-pivot-view .fm-grid-layout div.fm-sheet-header {
line-height: 10px !important;
}
You are welcome to adjust those styles for your needs. Please check the following JSFiddle for reference: https://jsfiddle.net/flexmonster/5ymd90c6/
We hope it helps. You are welcome to write to us in case further questions arise.
Kind regards,
Nadia
⋅ October 16, 2023
Hello again,
Thank you for the help! We're going to be implementing this sometime in the future and I'll get back to you on whether or not it works with tableSizes. Given your latest jsFiddle, I think it will fit our purposes.
Thank you for the attention and implementation of this request 🙂
Br
Jonas
⋅ October 16, 2023
Hello Jonas,
Thank you for the feedback!
As always, feel free to contact us if further questions arise.
Kind regards,
Nadia
⋅ October 20, 2023
Hello again,
The row height itself seems to work fine now!
We have some minor nitpicks. If expanding/collapsing rows is enabled, the icon does not scale (with the current configuration at least) to the new row height. This means any row that can expand/collapse will have its text off-center. Rows without this look and function perfectly.
The sorting arrow, also, does not scale with the row height. So it looks too large for smaller row heights. This is visible in your latest JSFiddle on the Cars row: https://jsfiddle.net/flexmonster/5ymd90c6/
Both can be sorted with CSS/LESS, I think, so we can make it work for now. But it would be great if these issues can be ironed out without user intervention.
As always, thank you for your help. The lower row heights look really good. This is one of our users' most requested features and even with the aforementioned issues, they are extremely excited (as are we). We hope you know how much we appreciate your help, especially in this matter! 🙂
Br
Jonas
⋅ October 20, 2023
A separate note as well! If you have dragging enabled, the drag-indicators retain their height. This kind of breaks functionality on low row heights, because it becomes impossible to actually click the "expand/collapse" button on the dimension header.
Again, minor things. I think we can manage a workaround but if you have official solutions/suggestions it would be much appreciated!
⋅ October 23, 2023
Hello,
Thank you for the feedback. Our team highly appreciates your input.
We kindly recommend customizing the sort and expand icons using CSS rules. We suggest using the @container CSS queries to achieve cleaner code.
Regarding the dragging, you are welcome to check our answer in a parallel thread: https://www.flexmonster.com/question/grid-dragging-false-does-not-seem-to-work/
Do not hesitate to contact us in case other questions arise.
Kind regards,
Nadia
