erdmannfreunde / contao-grid-bundle

GNU General Public License v3.0
3 stars 4 forks source link

Column breaking out on firefox when using Contao Content Slider #10

Closed dennisbohn closed 2 years ago

dennisbohn commented 2 years ago

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.

image

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

image

denniserdmann commented 2 years ago

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: https://github.com/erdmannfreunde/optimist-theme-bundle/issues/5#issuecomment-726824705

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

dennisbohn commented 2 years ago

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 commented 2 years ago

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

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

dennisbohn commented 2 years ago

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

.ce_colStart {
    width: 100%;
}

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

denniserdmann commented 2 years ago

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 commented 2 years ago

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

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 commented 2 years ago

Can you test, if the following fix is working for you aswell? https://github.com/nutshell-framework/assets/commit/fb4f615ab9b7d8e322167685c6a2d2d65e15913d#diff-0f8c92d97bbd30a26ba8610e3307d91131a6bd37a91efb1edfc23ffabc21fd55R30

dennisbohn commented 2 years ago

It works. Thanks!

denniserdmann commented 2 years ago

fixed in 1.0.8