asked on November 17, 2023
Hello,
We have previously used TableSizes to set our column widths, but we are moving away from it as we (currently) only support one global width value (rather than e.g. column or measure-specificity).
Because of this, we believe it would be easier to use CSS. This would avoid certain issues we have had reported, such as users expressing frustration at the column widths not applying in flat view w/ only rows, or in other cases such as where there's no column data.
Using solutions you have posted elsewhere, such as this one, we have achieved a rudimentary implementation. The only issue with this is that the CSS posted also affects row headers. We would like the column widths here to not affect columns that include row headers, as it makes the grid look wonky (see example). Another benefit of this is that it would affect the grand total columns, which are not affected by our implementation of tableSizes.
We have attempted different solutions using CSS pseudo-selectors, but have not been able to achieve a result. The first column will consistently have the same width as the rest of the columns.
Is there a a way to implement this?
Br
Jonas
⋅ November 20, 2023
Hello Jonas,
Thank you for providing us with the detailed information.
After the research, our team has concluded that it is not feasible to increase the width of a specific column using CSS rules. The workaround with global width has limitations, as it will affect all the cells. Our recommendation is to continue using the TableSizes approach along with CSS. We believe that this is the best approach to achieve the desired outcome.
You are welcome to contact us in case other questions arise.
Kind regards,
Nadia
⋅ November 20, 2023
Hello again,
"Our recommendation is to continue using the TableSizes approach along with CSS"
What do you mean with this? If we can combine TableSizes and CSS we could easily solve our problem - simply by setting the global width and then specifying with TableSizes the actual width later. Unfortunately, it seems this is not supported.
Setting with TableSizes could be a solution, but because there is no way to get the column number it is not really feasible. Either we guess how many there are (e.g. iterating from index 1 to 100 and setting the width) or we have to do some relatively expensive calculations/inferences to get the actual count. At any rate, both seem very non-ideal and backwards for our purposes which is just to set a size on all columns except the first.
How would you imagine the solution looks? I am having difficulty thinking of one that is better than those above, but you guys are the experts 🙂
Br
Jonas
⋅ November 21, 2023
Hello Jonas,
Thank you for the response.
We understand your concerns about the difficulty of setting TableSizes for all the columns. Therefore, we recommend checking the alternative solution using CSS. Instead of overriding the width of the first column, we suggest overriding the width of all columns except the first one with row headers. This way, the first column will rely on the default max-width, and the other will have the fixed width defined by the global width value. For example:
:root {
/* Desired maximum width for all columns */
--column-width: 60px;
}
#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-cell[data-c]:not([data-c='0']) {
width: var(--column-width) !important;
min-width: var(--column-width) !important;
}
When using this approach, it is important to hide resizing controls to prevent column resizing and ensure correctly displayed selection:
.fm-handle {
display: none;
}
You are welcome to check the following JSFiddle for illustration: https://jsfiddle.net/flexmonster/xL2p7moz/
Please let us know if it works for you. Looking forward to hearing your feedback.
Kind regards,
Nadia
⋅ November 22, 2023
Hello Nadia,
Thank you for the provided solution! With only a very minor change, we found it perfectly fits all situations, including both compact, classic, and flat views.
.fm-cell[data-c]:not([role="rowheader"]
Setting the exclusion rule to rowHeader, we ensure that:
The only note is that a size less than 50 seems to create issues in the grid, including the grid not taking up the full width of the container it is in and the selection being slightly wonky. We understand a column width lower than 50 is an edge-case and it is an acceptable compromise for now.
Thank you for your help! 🙂 As always it is highly appreciated!
Br
Jonas
⋅ November 22, 2023
Hello Jonas,
Thank you for the response and for sharing the improved solution.
We are glad to hear that it works for you! Your feedback is valuable to our team.
As always, feel free to contact us in case other questions arise.
Kind regards,
Nadia