Get Free Trial

Reduce Flex monster 2.8 cell height and font size

Answered
Tanushree 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

9 answers

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
Tanushree January 21, 2021

Thanks for your response.
The fiddle solution worked!
Regards,
Tanushree

Public
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

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
Tanushree 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

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
Tanushree 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

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
Tanushree February 25, 2021

Thanks Illia for your solution and it helped!

Please login or Register to Submit Answer