Streaming live at 10am (PST)

Grid bugs in combination with the slider component


#1

Hi Guys,

I try to rebuild the following layout with the new grid component. I built this site before with divs and flexbox, but with the new grid, it should be much simpler. The only problem is that the slider component seems to not working with the grid component together at the moment. Does anybody have an idea what here the problem?

This is the original layout built with flexbox:

And this is happening when using the grid to rebuilt it:


Here is my site Read-Only: Link
(how to share your site Read-Only link)


#2

@Maurice I’m not sure if that’s a bug with Grid, but a workaround for now is to add a width (75vw) to your slider wrapper with the class c-slider.

We’re going to look into this slider issue though and keep you updated.


#3

Thank you. I’m hoping you find a solution, then set the width of the slider to 75vw is not working for me, because I need the slider in full width.


#4

Hi @Maurice

We are still looking into this, where the slider goes beyond it’s parent element.

If we are looking at the ‘Home 2’ page for testing, the C-Slider (75vw) approach from @Lindapham seems to match the layout in your first screenshot.

If you want the slider almost full width as you described, covering where the tile currently has ‘IC goes Expo Real 2018’ - using 96vw seems to achieve that layout (and maintain the grey borders).

Is that closer to what you are trying to achieve?


#5

Thank you for this update.

That’s right for the moment this is a workaround, but I would prefer a cleaner way. I have set up the grid columns with 3fr x 1fr. So when I use 75vw its not truly the exact dimensions.


#6

@Maurice Our team looked into the slider bug and it looks like it’s only a problem once you have more than 10 slides. We will do our best to resolve it, but changing your container width from 100% to 100vw should do the trick.


#7

Hey @Lindapham, that sounds weird :sweat_smile:

At the moment I gave the slider a width of 75vw, which works pretty well. I also noticed that when I want the slider to be at 100% of the height, I have to give the slider 100% of min-height then when I give it 100% of height it will take endless space vertically.

Here the weird behavior with a height of 100%:

And here the correct one with a min-height of 100%: