Column breaking out on firefox when using Contao Content Slider

[dennisbohn]

I am using the Grid Bundle in combination with the Contao Content Slider.

It seems there is a problem on Firefox.

https://test.office.bohn.media/

The fourth element is a content slider. Everything seems fine on Chrome and Edge.

But in Firefox (Windows, v100.0) the column breaks out when it contains a Content Slider.

[denniserdmann]

Moin Dennis,

i'm not sure, if we can prevent the slider from calculating the wrong width. We had the problem at the optimist-theme too: erdmannfreunde/optimist-theme-bundle#5 (comment)

May you find a general solution, otherwise at least a solution for your case.

[dennisbohn]

When I set the column to fixed 640px (see third row) or to "overflow: hidden" the slider calculates the correct width. The problem is, that I want to place the buttons outside the div while I am working with floating widths.

I'll check, if this problem happens with another grid too.

[dennisbohn]

Tested it with "Bootstrap für Contao Grid" and had the same problem.

https://test.office.bohn.media/bootstrap.html

[dennisbohn]

Giving all columns a width of 100% fixed the problem.

.ce_colStart {
    width: 100%;
}

https://test.office.bohn.media/euf.html

[denniserdmann]

Good work. I need to check, if your solution will cause other problems with the grid as there are too many options to keep in mind.

[dennisbohn]

Damn, found something that doesnt work anymore when you set the width to 100%. :'(

• justify-center
• justify-end

When the boxes grow to 100% the content is still aligned left inside the box. "max-width" seems to work.

.ce_colStart {
    max-width: 100%;
}

https://test.office.bohn.media/euf-maxwidth.html

[denniserdmann]

Can you test, if the following fix is working for you aswell? nutshell-framework/assets@fb4f615#diff-0f8c92d97bbd30a26ba8610e3307d91131a6bd37a91efb1edfc23ffabc21fd55R30

[dennisbohn]

It works. Thanks!

[denniserdmann]

fixed in 1.0.8