I've been using Adminimal Theme on a particular site build, and have noticed that when we're editing & previewing a Views display that needs to set its own width using CSS, its content not only overflows the width of the preview area, it causes the entire Views UI to expand to an immense degree.
In this particular example, I'm using Owl Carousel with its Drupal module to generate a carousel from a view of nodes of a particular type. Since Owl Carousel items are intended to be placed left to right, the carousel floats them all, and assigns a particular width to its parent element. This parent element is then assigned a particular XY position within a parent element that contains the CSS property overflow: hidden, so that elements not in view will be properly hidden.
However, it looks like this is playing havoc with Adminimal's default layout, because the #content-wrapper element is set to display: table. It appears that the width of this inner layout element is being used by #content-wrapper to calculate a complete table width. As such, the width of #content-wrapper is calculated to be some ridiculous number. Here's an example of what I get with stock Adminimal, stock Owl Carousel, with a completely fresh view.

I went hunting for a possible explanation, and it looks like this isn't a problem that's specific to Drupal. Other Owl Carousel users noted the same issue:
- Stack Overflow: Owl Carousel inside a table-cell parent makes parent to expand weird
- Owl Carousel Github: weird width expanding on table or table-cell parent #274
I took their recommendation to set table-layout: fixed on the #content-wrapper just for Views editing, and it appears to have had the desired effect - controlling the layout of the Views page so that views can now be edited & previewed normally.


The reason why this works is because fixed table layouts are defined by the widths of table and col elements, or by the width of their first row or cells. If this is not set, the table layout is dictated by content, and if you're using display: table for a full-page layout, this might not be the behaviour you want. (Source)
I've attached a patch against 7.x-1.x-dev to this issue, that applies this change.
I can understand that you might be reluctant to apply a change that fixes one issue with one external library, but this might also help users of other Views-compatible libraries such as Views Slideshow, maybe some of the mapping modules, and so on. I'm yet to test them, so let me know if you'd like me to do so.
| Comment | File | Size | Author |
|---|---|---|---|
| adminimal_theme-views-preview-display.patch | 449 bytes | geoffreyr | |
| adminimal-fixed2.jpg | 135.79 KB | geoffreyr | |
| adminimal-fixed1.jpg | 82.13 KB | geoffreyr | |
| adminimal-overflow3.jpg | 82.1 KB | geoffreyr | |
| adminimal-overflow1.jpg | 69.54 KB | geoffreyr |
Comments
Comment #1
geoffreyr commentedComment #3
ANDiTKO commentedThanks for reporting the issue and providing the patch fix.
Ive committed it into the latest dev version and it will be soon on the next stable version.
Have a nice day!
Comment #4
ANDiTKO commented