Embeddable Widget: override / setting value(s): scheduleMaxWidth

[MarkusTiede]

It'd be nice having documentation (I am no web developer) about overriding / properly setting the values for

• scrollParentWidth
• scheduleMaxWidth

As defined here: https://github.com/pretalx/schedule/blob/e879bf9e55ae649c19ace4e187c9b3cd082d7196/src/App.vue#L2C102-L2C118

Also e.g. in the officially reference documentation the schedule widget is wider than the actual page and make scrolling necessary.

Thanks for your help!

[MarkusTiede]

At the moment we (https://dinacon.ch/programm-2023) use this workaround (thanks @mirodietiker for providing this):

pretalx-schedule {
    margin: 0 calc(50% - 50vw);
    display: block;
}

[mirodietiker]

There are kinda two issues here: The calculated widget can be wider than the parent container. And it seems that the horizontal scrollbars are disabled. In a multi-room event (with multiple cols) this consition can be easily triggered on regular screens.

The bug seems to be more severe when the widget is displayed in a horizontally indented context. That's why i provided the workaround to break out of the indented container. I think, however that pretalx should respect the layout and not contain a hack to break out of the layout container.

[rashfael]

scheduleMaxWidth is an internal value that is dependent on the number of rooms. The widget itself does not try to ever add scrollbars, it looks for a scrolling parent to orient itself in (which is what scrollParentWidth is). If you want to have scrollbars that aren't on the document level, you need to add your own scroll container around the widget. (Yes, this should be documented). In your case, horizontal scrolling is not working, because you declared overflow: hidden on .fl-page article.fl-post.

Having a true max-width is difficult, because we have a min width of 320px per room.