How to adjust the width of the bubble automatically to the width of the content?

Asked by SB
2 years ago.

We use the Bubble in the scheduler component. Unfortunately, the content in the bubble, on the right side of the screen in the scheduler, is pushed to the next line / down.

It is not possible to specify a minimum width because the content is dynamic.

The documentation states that the width="0" can be applied to make the bubble automatically adjust to the width of the content.
Where should we put this in an Angular project?

This is our code for the bubble:
bubble: new DayPilot.Bubble({
theme: "s bubble",
animated: false,
})

Or should we solve this in another way?

I'm looking forward to your response. Thanks in advance.

how-to javascript

Answer posted by Dan Letecky [DayPilot]
2 years ago.

The bubble content width is not changed by the bubble. It works like this:

1. The content is first rendered in an absolute layer. It will respect the content and use the CSS from the theme.
2. The real dimensions are measured.
3. The position is adjusted so that it is displayed at the desired position, taking the real dimensions into account.

No width setting is forced (the documentation mentioned a legacy mode which is not applied anymore).

The bubble is rendered at the top level under the document element so you may want to check the global CSS styles and your CSS theme to see if it affects the width. I recommend switching to the default theme and/or disabling the global styles temporarily to test that.

Answer posted by SB
2 years ago.

Thanks for the quick reply!
We've found the solution.

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

How to adjust the width of the bubble automatically to the width of the content?

Products

Learn

Get Support

DayPilot Pro