Hallo,
I would like to reopen this thread, because we have the same “Problem” like Nigel had 4 years ago.
Columns - Fixed Widths or Wrapped - General - Checkmk Forum
Because of long filesystem-pathes or process-names a lot ef empty space is created.
To illustrate the issue our dashboard:
The Service Column gets very width because there is a filesystem-path further down below.
Best Regards
Frank
Workaround:
With browser plugin Stylus for Firefox or Chrome you can make client side changes in CSS code. Good for testing, or when you’re the complete IT department like me. (-;
When found the right CSS code, you can make a custom CSS theme with those changes that will make anyone using that theme in their profile see it. See thread Customize/change HTML of dashboards for some info about making a custom theme.
Dashboard uses dashlets, which are technically html iframes. When they have lists, they are data tables.
CSS example for testing: tr.data > td:nth-child(5){background-color: blue !important}
This makes every 5th column the background blue as seen here on dashboard of my server.
I haven’t found the correct CSS selector yet that includes the specific dashlet/iframe. So CSS code can be set independently for each list. Your screenshot suggests that it needs the 4th column instead of 5th on my server. And if you changed the layout of a list it doesn’t necessarily be consistent the same nth column for each dashlet. So that could be an issue with my CSS code.
Background blue is just for testing, you probably want something as word-wrap: break-word (forces to break non-spaced words) and/or a max-width instead.
Example: tr.data > td:nth-child(5){max-width: 300px !important; word-wrap: break-word !important}
Change the 300px into the width that is appropriate for you.
Happy tweaking if you go for this workaround!
@Yggy Thank you for this great answer!
Hello!
If one of the answers helped you solve your question, please mark it as the solution. This way, you thank the person who helped you and also indicate that the question has been resolved. This, in turn, helps others who come across the same question.
Thank you!
Perhaps more detailed:
Yggy’s CSS approach is the right idea. Here’s a more robust and server-side solution so it works for all users without requiring a browser plugin.
1. Create a custom theme (server-side, persistent, update-safe)
Checkmk ships with two built-in themes: facelift and modern-dark (see source on GitHub). You can create your own theme under the ~/local/ directory — files there are not overwritten during updates (Werk #10373).
As site user via SSH:
bash
# Create custom theme directory based on your preferred theme:
mkdir -p ~/local/share/check_mk/web/htdocs/themes/my-custom-theme
# Create the theme metadata:
cat > ~/local/share/check_mk/web/htdocs/themes/my-custom-theme/theme.json << 'EOF'
{"title": "My Custom Theme", "based_on": "modern-dark"}
EOF
Then create the CSS overrides in ~/local/share/check_mk/web/htdocs/themes/my-custom-theme/theme.css:
css
/* Limit column width and force word wrapping for long paths */
table.data td {
max-width: 400px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
}
/* Keep state columns compact and unwrapped */
table.data td.state {
white-space: nowrap;
}
After saving, each user can select the theme under Edit Profile > Interface theme. Since this lives entirely in ~/local/share/check_mk/web/htdocs/themes/, it survives Checkmk updates.
2. Use class-based CSS selectors instead of nth-child
@Yggy correctly noted that nth-child is fragile because column positions vary between dashlets and views. A better approach: open your dashboard, press F12 (browser DevTools), inspect the service column cell, and identify its CSS class. Then target it directly in your theme.css:
css
/* Service description column */
td.service_description {
max-width: 300px !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
/* Plugin output / summary column */
td.plugin_output {
max-width: 400px !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
This way the CSS applies to the correct column regardless of its position in the table, and works consistently across all dashlets and views. Adjust the max-width values to whatever fits your screen layout best.
Note: Checkmk currently has no native UI option for controlling column widths — neither in the views nor in the dashboard configuration. A custom theme with CSS is the intended approach for this kind of customization.
perhaps that`s more clear
Greetz Bernd
I wrote several posts regarding CSS and themes in the past, so lazy to rewrite stuff and I just referred to older material. 
Cool, that you collected the various sources together in one post! 
The Stylus browser plugin is great for tweaking on the spot. And best indeed to make a theme when you figured out the needed changes.
In my 2.1.0p5.cre version are no CSS classes for needed columns, so I couldn’t go for class-based selectors, which is my preference too.
Reason why I went for the nth-child approach instead. I was looking / tweaking for a way to include something else to reference so CSS could be made dashlet/view specific, but was unsuccessful when writing my original post.
<tr class="data odd0" style="">
<td class="icon"><img title="Final notification result" src="themes/facelift/images/icon_alert_notify_result.png" class="icon png"></td>
<td class="age recent">15 m</td>
<td class="nobr"><a href="#"><span class="state_rounded_fill host">blurred host</span></a></td>
<td class=""></td>
<td class="">Spooled mail to local mail transmission agent</td>
</tr>
Last <td class=""> is the summary and has no class.
Cool, if the current Checkmk version does have class-based CSS selectors.
Oh, and good to know when you’re tweaking CSS, at least in my Checkmk version, modern-dark dark theme uses assets from facelift light theme. You can see that with the icon image in HTML snippet above from my dark theme.
@Yggy I had already been grappling with this topic, and you were a great inspiration, so I had already put everything together.
The main work was done …
KR Bernd