NO BUG: Nestable Slider: "Align main axis" does not work on a class

Bugs
1

Browser: Safari 16.3
OS: macOS 13.3.1

The CSS grid option “Align to main axis” does not work when used in CSS class.

Screenshot 1: Align main axis: End used outside CSS class (the container is not completely at the bottom because I added a bottom padding in the parent element)

Option
Option1621×1248 408 KB

Screenshot 2: Align main axis: End used in CSS class

Option in CSS class
Option in CSS class1623×1288 418 KB

Did I miss something?

Best regards,
Chris

2

Hi Christoph,
Thanks so much for your report!

Unfortunately, I cannot reproduce the issue. Would you be so kind as to provide a live link and a screencast using https://birdeatsbug.com or https://jam.dev showing and explaining what’s going on? Please use one of the tools mentioned, because they log every single step, making it possible to reproduce the issue.

Is it possible that you are overwriting the class on the ID?
I have removed “CSS grid” from the title and content because it appears to be a flexbox container (display: flex), not some CSS grid issue.

Best regards,
timmse

3

Hi @timmse,

I created a video and a temporary administrator to my website. I will send these information to help@bricksbuilder.io.

Thank you in advance for looking into this issue.

Best regards,
Chris

4

Hi Christoph,
First of all, it’s about the nestable slider and the alignment of the content within the slides.

If you set the “align vertical” settings directly in the slide settings of the nestable slider, it works as expected.

Then you can even remove the class on the slides. This is because the default selector consists of two classes and is therefore more specific than your single class.

Best regards,
timmse

image
image864×1424 34 KB

5

Apologies for the confusion!

It’s a little strange that the option works when enabled in the child element, but not when used in a CSS class in the child element. Does the option in the parent (Slider (Nestable)) overwrite the options in the child elements?

Many thanks for the fantastic support!

Best regards,
Chris

6

This is the default that can not be overridden with a single class, because of the specificity:

image

If you use the dedicated setting, it targets the .splide__slide class and everything is fine :slight_smile: