How to setup a max-height on a slideshow repeater ?
Product:
Wix Studio
What are you trying to achieve:
I want my slideshow don’t grow over 1280px width and 480px height.
I have setup a parent container and set up its max-width to 1280xp and max-height to 480px. The slideshow responsive behavior is to stretch. It works fine for the max-width but the max-height seems to be ignored.
When I extend device width, the slideshow width stop a 1280px BUT height continue to grow. It leads to dirty aspect ratio. The parent container stop at 480px height but the slideshow overflow on y.
What have you already tried:
I have tried to change stretch to relative width, it doesn’t work.
I have tried to apply a grid layout on slideshow, it crash Wix Studio (If you want to use a grid layout, you have to use a container first).
I have tried to apply a grid layout on slideshow’s element, it crash Wix Studio (If you want to use a grid layout, you have to use a container first)
I have tried to remove every steched componant inside my slideshow and set up relative sizes, doesn’t work.
I have tried multiple pre-built slideshow, they all have the issue.
I have tried custom css classes, doesn’t apply on slideshow elements
How to reproduce:
Create a new section
Add a container and set a small width like 400px and max-height like 250px
Add a Layout Tools > Slideshow Repeater (both should have the issue) into the container
Stretch the slideshow inside the container
Go to preview > increase width
Slideshow height overflow its container max height
Additional information:
I saw slideshow element is streched by default and cannot be changed until I go to advanced parameters. I saw this mention by enabling advanced size on slideshow element and hover disabled size properties. However, I cannot find where can I change it.
In case this couldn’t be fixed
Should I use a custom repeater with my own velo functions to be able to have a slideshow with a max-height ?
For the crashes is there any extra details you can provide? Exact steps to reproduce? Were there any error messages in your browser’s dev tools console?
For the issue I believe Slideshow Repeaters are intended to take up an entire section rather than being placed within a container. However you can set their max width and height without a container and they will follow it. If you need something to be put inside a grid then I’d recommend using a Pro Gallery instead.
Advanced sizing can be found at the ellipsis menu here:
Here is an example of a pro gallery in a section, a slideshow repeater in a section, and a pro gallery in a grid. For all I set their max width/height and it seems to be working.
About crashes, it is more like UI bugs.
Select your slideshow, right click then apply CSS grid, you will never have access to the grid configuration in the right panel. If you right click to customize grid directly on editor, it is possible to see grid layout but you cannot change any value.
The following error could be found in console :
ErrorBoundary.componentDidCatch EnhancedError: Couldn't get grid measurements for grid
at Object.getGridMeasurement (createGridLayoutPrivateAPI.ts:119:15)
at Object.getGridVisualMeasure (lodash.min.js:57:276)
at F (gridLinesBox.tsx:163:41)
at repluggable.bundle.min.js:1:32735
at Object.monitor (repluggable.bundle.min.js:1:6702)
at mapStateToProps (repluggable.bundle.min.js:1:32659)
at Function.mapToProps (repluggable.bundle.min.js:1:33211)
at n (react-redux.min.js:18:2175)
at react-redux.min.js:18:1791
at d (react-redux.min.js:18:1837)
at react-redux.min.js:18:1872
at Object.d [as onStateChange] (react-redux.min.js:18:7277)
at Object.c [as callback] (react-redux.min.js:18:2708)
at react-redux.min.js:18:2890
at Tf (react-dom.production.min.js:189:448)
at Object.notify (react-redux.min.js:18:2864)
at Object.notifyNestedSubs (react-redux.min.js:18:3354)
at Object.d [as onStateChange] (react-redux.min.js:18:7346)
at Object.c [as callback] (react-redux.min.js:18:2708)
at react-redux.min.js:18:2890
at Tf (react-dom.production.min.js:189:448)
at Object.notify (react-redux.min.js:18:2864)
at Object.notifyNestedSubs (react-redux.min.js:18:3354)
at Object.d [as onStateChange] (react-redux.min.js:18:7346)
at Object.c [as callback] (react-redux.min.js:18:2708)
at react-redux.min.js:18:2890
at Tf (react-dom.production.min.js:189:448)
at Object.notify (react-redux.min.js:18:2864)
at Object.notifyNestedSubs (react-redux.min.js:18:3354)
at et (react-redux.min.js:18:4163)
at react-redux.min.js:18:7586
at Id (react-dom.production.min.js:165:137)
at Ki (react-dom.production.min.js:179:431)
at Ii (react-dom.production.min.js:179:278)
at Ik (react-dom.production.min.js:178:329)
at Sk (react-dom.production.min.js:197:312)
at yb (react-dom.production.min.js:196:166)
at Mi (react-dom.production.min.js:189:373)
at db (react-dom.production.min.js:79:182)
at react-dom.production.min.js:184:289 Object$ep: "INDICATIONS_ROOT_COMPONENT_ENTRY_POINT"componentName: undefined[[Prototype]]: Object
I @ logToConsole.ts:23
If you right click on Element to apply a CSS grid, just atfer you choose a layout, the layout tab on the right panel will be empty.
About your example : container max height is valid however the content inside your repeater still continue to grow. You can scroll inside your container, it should not be possible.
I will give a try on gallery pro, I hope gallery pro layout can be fully customized.
I previously try to use it however using slideshow layout, the text is always below media.
I want to put text at right on media on desktop.
I think I just found what caused my issue with max-height.
When you have stacks, spacing is by default in % so the max-height of the container seems to be ignored. I have set all my spacing using px and it seems to be fixed
