asked on January 20, 2021
Hello,
We have recently upgraded FM 2.1 to 2.8 version and could notice that the cell height for all columns/headers in FM 2.8 is:
min-height: 30px;
If I try to change the height of cells then it does it partially but doesn't apply to all the cells in the grid. Specially the height of fixed header filters on the side remain fixed and doesn't change.
Please find the fiddle for reference: https://jsfiddle.net/du5e6hfn/1/
I would like to reduce the cell height to 25px for all the cells in the grid including all the fixed headers, drill through columns and data cells.
Could you please advice is there a common class which can override the css for all the cells?
Similarly, I would like to reduce the font size to 11px for all cells.
When I tried reducing the height of fm-cell and fm-header then overall css of the grid is disturbed and there are empty spaces in the grid.
Attached screenshot for reference.
Thanks & Regards,
Tanushree
⋅ January 21, 2021
Hello,
Thank you for reaching out to us.
Please consider using the following selectors to regulate the row's height:
#fm-pivot-view .fm-grid-row,
#fm-pivot-view .fm-grid-row-mobile {
...
}
In its turn, the font-size for all cells can be adjusted using the following selector:
.fm-cell {
...
}
You are welcome to see the JSFiddle demonstrating this approach: https://jsfiddle.net/flexmonster/L026n7xz/.
Please let us know if it works for your case.
Our team is looking forward to hearing from you.
Kind regards,
Illia
⋅ January 21, 2021
Thanks for your response.
The fiddle solution worked!
Regards,
Tanushree
⋅ February 12, 2021
Hello Illia,
The above fiddle provides the solution to reduce the row/cell height.
However, I cannot re-size the row height manually (by dragging) in the app.
Is there a way we can reduce the height (from 30px to 25px) as well as allow the user to manually resize the row height in the app?
Thanks,
Tanushree
⋅ February 15, 2021
Hello,
Thank you for your feedback.
We have complemented the JSFiddle so that columns' width is decreased and they are still resizable.
You are welcome to see the sample by the link: https://jsfiddle.net/flexmonster/L026n7xz/.
Please let us know if it works for you now.
Kind regards,
Illia
⋅ February 15, 2021
Hello Illia,
I think there is a confusion in understanding the problem.
I would like to confirm if we can resize the height of rows manually (increase/decrease).
I am sharing this fiddle for reference which contains the css I'm using but it doesn't work as expected: https://jsfiddle.net/m1z5oLu4/
By default I want to keep the cell height as 25px.
But we would also like to re-size the row height manually.
If I try to alter the min-height then the highlighted cell css doesn't reflect properly.
Thanks,
Tanushree
⋅ February 17, 2021
Hello,
Please make sure you comment CSS code properly in your sample. For CSS, use /* */ notation instead of the double slash.
Also, we have found redundant CSS rules in your example that prevent Flexmonster from the correct display.
Instead, we suggest using the previously provided example as a reference: https://jsfiddle.net/flexmonster/L026n7xz/.
It demonstrates the correct way to reduce columns' height and preserve their resizability.
We hope it works for you.
Regards,
Illia
⋅ February 23, 2021
Thanks Illia for your suggestion.
It did help in restoring the flexibility to increase the height.
However, I noticed that the first row cells header when selected, the highlighted cell border shifts slightly up and the last filter header cell shifts slightly below.
This does not happen from second row onwards.
Let me know if this can be fixed as well.
Attached screenshot for reference.
Thanks,
Tanushree
⋅ February 24, 2021
Hello,
Thank you for your feedback.
Please add the following CSS rule to narrow down filter headers of the grid:
.fm-filter-header {
height: 25px;
}
We have complemented JSFiddle for the demonstration: https://jsfiddle.net/flexmonster/L026n7xz/.
Our team suggests using your browser's developer tools to perform further styling enhancements.
Please let us know if it helps.
Regards,
Illia
⋅ February 25, 2021
Thanks Illia for your solution and it helped!