asked on March 14, 2024
Dear Flexmonster Support Team,
I encountered an issue while using the Flexmonster Grid with JS.
Problem Description:
The column header seems to be incomplete when utilizing filters along with varying column widths. Specifically, the "hour" column does not fully extend, leaving a blank space.
Sample Demonstration:
I have prepared a demonstration of the issue on JSFiddle, which you can access through the following link: https://jsfiddle.net/falconeri/adv9kozc/4/
Expected Behavior:
I expect the column headers to extend fully, providing a seamless and visually consistent layout across all columns, even when filters are applied or column widths differ.
Please let me know if there are any workarounds for this issue. I look forward to your assistance in resolving it.
Thank you for your support.
Sincerely,
Alta
⋅ March 15, 2024
Hello Alta,
Thank you for contacting us.
We recommend using the following CSS rules to set the necessary cell width:
:root {
/* Desired maximum width */
--column-width: 50px;
}
#fm-pivot-view .fm-grid-column,
#fm-pivot-view .fm-grid-column-mobile {
width: var(--column-width) !important;
}
#fm-pivot-view .fm-grid-header,
#fm-pivot-view .fm-grid-header-mobile {
max-width: 10px !important;
}
#fm-pivot-view .fm-scroll-content .fm-grid-column,
#fm-pivot-view .fm-grid-column-mobile {
width: 100px !important;
}
.fm-cell[data-c]:not([data-c='0']){
width: var(--column-width) !important;
}
.fm-handle {
display: none;
}
Please check the following JSFiddle for reference: https://jsfiddle.net/flexmonster/b80rton9/
We hope it helps. You are welcome to contact us if other questions arise.
Kind regards,
Nadia
⋅ March 16, 2024
Hi,
But these CSS rules still do not follow the settings I want.
The tables need to be:
Any other way to change the CSS to "20px" without max-width but the column can still be normal?
https://jsfiddle.net/falconeri/ysb1t9dx/
Regards,
Alta
⋅ March 19, 2024
Hello Alta,
Thank you for the feedback.
We want to clarify that the minimum width of each cell in the grid is set at 50px. This is done to ensure that all content in the grid is displayed clearly and is easy to read. Maintaining a minimum cell width of 50px ensures that the content remains visible and that users can interact with the grid without any problems.
Additionally, to make the grid more compact, we recommend setting smaller font sizes and paddings of the cells. Please check the following JSFiddle illustrating such an approach: https://jsfiddle.net/flexmonster/5eu0wz79/. Using this approach, the resize handles can still be used to change the column size.
Feel free to contact us if other questions arise.
Kind regards,
Nadia
⋅ March 25, 2024
Hi,
I have applied the width and min-width as 50px, but the issue persists. I don't believe adjusting the CSS width will resolve the problem.
I have reproduced the same issue with a width of 51px here:
https://jsfiddle.net/falconeri/0onsLzat/
Please help to look into it.
Regards,
Alta
⋅ March 26, 2024
Hello Alta,
Thank you for providing us with details.
We have reproduced the described behavior on our side. The request has been added to the backlog. Our team will notify you if there are any updates on the matter.
Feel free to contact us in case other questions arise.
Kind regards,
Nadia