Data in some cells are only partially visible, some data not showing clearly

Answered
Manavjeet Gupta asked on April 6, 2022

Hi Team!
  The data in some cells of the table are not being shown as expected, The lining of next row start in half way of the previous row data. Since it's happening for some random rows, I am unable to be fix it using the different APIs/CSS. Please find the attached SS.
  So please provide me solution of this problem.

3 answers

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster April 7, 2022

Hello, Manavjeet,
 
Thank you for reaching out to us.
 
Kindly note that currently, Flexmonster converts all the multiline values to a single line. Multiline values in cells are not supported out of the box. Multiline for the flat form is not recommended since the cell's height does not match its content automatically. 
In your case, we suggest changing the default cell sizes using CSS rules for all cells. For example, 

.fm-cell[role=gridcell] {
min-height: 60px !important;
}

 
We hope it helps. You are welcome to write to us in case further questions arise.
 
Kind regards,
Nadia

Public
Manavjeet Gupta April 11, 2022

Hi @Nadia!
 Thanks, It worked. But I want also to fix the header height(1st row), I tried to manage with this code in .css,
#fm-pivot-view .fm-grid-layout.fm-flat-view .fm-filter-header {
    background-color: #e4f1f7;
    height: 40px !important;
}
but it renders only for some column but not always.
Actually I want to strictly fix header height (40px) and all other rows will be having with different height it may be strictly fixed(like 65px) or auto adjustable according to data available in the row(max data in a column of that particular row). 
Please provide solution for it.
With regards
Manavjeet Gupta
 

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster April 11, 2022

Hello, Manavjeet,
 
Thank you for your response.
 
Please note that currently, Flexmonster does not support auto adjustable height based on cell data. We suggest the following approach:

  1. Set all the cells height via CSS:
    #fm-pivot-view .fm-grid-row,
    #fm-pivot-view .fm-grid-row-mobile {
       min-height: 40px;
       max-height: 120px;
       height: 65px !important;
    }
  2. Overwrite the first row's height using TableSizesObject:
    tableSizes: {
    rows: [{
    height: 40,
    idx: 0
    }]
    }

You can see the example on the following JSFiddle: https://jsfiddle.net/flexmonster/tf7mrw9p/
 
Feel free to contact us if other questions arise.
 
Kind regards,
Nadia

Please login or Register to Submit Answer