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

Scheduler Javascript
#1

Hi there, i continue investigating this example - https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html - 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 - http://snippet.dhtmlx.com/5/3e7c2ed2e

#2

Well, i solved it really with just adding:

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

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).

#4

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:

<style>
.barlength {
			padding: 0 0 0 0 !important;
		}
</style>
<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>

%D0%B3%D1%80%D0%B5%D0%B3%D0%BE%D1%80

I think you guessed what is the meaning of these dots

1 Like