Set the auto minimum width of bars, depending on their content


Hi there, i continue investigating this example - - a timeline with bars.
Let’s suppose we have a small-time event, that goes from 9.00 to 10.00 and it’s name is “The Event Name”. I want this name be always shown completely (and in one line!), so, i have to set a minimum width of bar with some approach, so we can’t make it less in width while resizing.

Something like “min-width: fit-content;” in css…

This is the fiddle -


Well, i solved it really with just adding:

.dhx_cal_event_line {
			min-width: fit-content !important;


Hello @AlexMav,

Nice that you solved the issue, just one thing of this solution - when it is applied, the event’s width, doesn’t always reflect its duration.

So the event with long text, but short duration(for example 5 minutes) may look like it has a longer duration(for example 1 day).


I have made a workaround for a problem that you mentioned, with adding a small 2-pixel-height div class=“dhx_cal_event_line barlength” with dots, that goes upper than the main div of bar, it looks like this:

.barlength {
			padding: 0 0 0 0 !important;
<div class="dhx_cal_event_line barlength " style="position:absolute; top:2px; height: 1px; border-top: 2px dotted black;background-color: transparent;z-index:100;"></div>


I think you guessed what is the meaning of these dots