min-height does not work

@codyhillNov 06.2021

Hi,
I have a header which I want the height to be 560px. The problem is that on mobile the header overflow but I do no care about the height. So what I have used was min-height. Meaning that if the container doesn’t overflow then stay 560px but if it does then grow with the content.
The problem is that on mobile, even tho the content overflows the container keeps its 560px size, and all the content overflow on top of the content that is under the header. I also have 3 sliders, a carousel, and when I add overflow of x hidden the problem changes and now the content under the header is scrollable on top of the slide content.
I will leave a code pen with the code. The code doesn’t really run in codepen as it does in my project but the problem is still present. Also, the header does not keep his bottom padding of 25px for some reason
Also, if you know a fix on how I could reset the slide size when you resize the window so I don’t have that bug where the other slide is visible would be appreciated

Codepen: https://codepen.io/raul-rogojan/pen/MWvVbpm

to post a comment

JavaScript

18 Comments(s) _↴

@SempervivumNov 06.2021 — #@RaulRogojan#1639105
>The problem is that on mobile, even tho the content overflows the container keeps its 560px size, and all the content overflow on top of the content that is under the header.

The reason for both issues is absolute positioning - go without whenever possible.

In this case it is possible: Set the container's (`.carousel

</C>) width to 100% of the surrounding container and the item's width inside to 100% either.  Define a global CSS variable defining the amount of shifting the items. Then shift the items according to the desired position by changing that variable:
 <CODE>

<i>
 </i>            const moveSlide = () =&gt; {
 // carousel.style.transition = "all 400ms ease-out";
 // carousel.style.transform =
 //     "translateX(" + -slideWidth * counter + "px" + ")";
 
 /* change value of global CSS variable in order to shift
 all slides to the desired position: */
 document.documentElement.style.setProperty('--shift-amount', (-counter * slideWidth) + 'px');
 };<i>
 </i>

</CODE>
 CSS modifying the existing one:
 <CODE>

<i>
 </i>        /* we define the amount of shifting as a CSS variable
 so that it can be assigned easily to all slides: */
 :root {
 --shift-amount: 0;
 }
 
 .carousel {
 /* carousel should fill the window,
 items inside are arranged side by side: */
 width: 100%;
 display: flex;
 overflow: hidden;
 }
 
 .carousel-item {
 /* width should be equal to the width of the container: */
 flex: 0 0 100% !important;
 /* remove absolute positioning: */
 position: unset !important;
 /* amount of shifting according to global variable
 defined above: */
 transform: translateX(var(--shift-amount));
 transition: transform 0.5s;
 }<i>
 </i>

</CODE>
 Please don't mind the <C>

!important

</C>. You will be able to omit it when merging the existing CSS with the additional one.<br/>
 Still left to do: Adjust the variable <C>

slideWidth` when resizing the window.

@codyhillauthorNov 07.2021 — #@Sempervivum#1639109 Thank you very much! The CSS works but the Javascript does not... It does not move the sliders.

With my version of the moveSlide function, the slides do move, but it's empty white space.

@SempervivumNov 07.2021 — #Unfortunately I forgot to post a modification: This piece of code has to be deactivated:

``<i>
 </i>  //Place the slides in the correct position base on their with.
 // slides.forEach((slide, index) =&gt; {
 //   slide.style.transform = "translateX(" + slideWidth * index + "px" + ")";
 // });<i>
 </i> ``

@codyhillauthorNov 07.2021 — #@Sempervivum#1639109 Here are the changes that I've made: https://codepen.io/raul-rogojan/pen/MWvVbpm

Also, in my document for some reason the slides.length even tho then I console log it shows 3 sliders, the button style is active only after one click of the button.

@codyhillauthorNov 07.2021 — #@Sempervivum#1639117 I tried that. Also if I try to manually add a number into the transform: translateX(100%) the slides do not move

@codyhillauthorNov 07.2021 — #@Sempervivum#1639117 I see the problem on the button. On the mobile version the slide.length is 1 but on the desktop is 3...

@codyhillauthorNov 07.2021 — #@RaulRogojan#1639120 fixed this problem

@SempervivumNov 07.2021 — #Obviously you are setting `shift-amount

</C> by use of SCSS. However this line in the javascript:<br/>
 <C>

document.documentElement.style.setProperty('--shift-amount', (-counter * slideWidth) + 'px');`

affects the CSS variable only, not the variable defined by SCSS.

@codyhillauthorNov 07.2021 — #@Sempervivum#1639122 sorry! my bad! When I copied the code to show it to you I copied and pasted the code.

I did change the --shift-amount to $shift-amount. I also created a root {--shift-amount} in the sccs file and tried to use that.

Neith of them work.

@codyhillauthorNov 07.2021 — #@RaulRogojan#1639123

``<i>
 </i>      width: 100%;
 @include flex(none, column, center, center);
 flex: 0 0 100%;
 position: unset;
 transform: translateX($shift-amount);
 transition: transform 500ms ease; <i>
 </i>`</CODE>
 <CODE>`<i>
 </i>  const moveSlide = () =&gt; {
 // Change the css variable to the correct px number to move the slides.
 document.documentElement.style.setProperty(
 "$shift-amount",
 -counter * slideWidth + "px"
 );
 };<i>
 </i>``

@SempervivumNov 07.2021 — #You need to adjust this line either:

`transform: translateX($shift-amount);

</C><br/>
 to 
 <CODE>

<i>
 </i>      /* ---&gt; */
 transform: translatex(var(--shift-amount));<i>
 </i>

``
https://codepen.io/Sempervivum/pen/RwZMqBo

@codyhillauthorNov 07.2021 — #@Sempervivum#1639126 OMG it works xd.

I have tried the same exact thing and it didn't work. I must have some typo or I must have not changed the sccs variable to the CSS in the JS.

Thank you so much! And sorry for the inconvenience.

I have one question if you could help me with. I tried using swipe.js with sccs but for some reason, the sccs does not work with the swipe,js. Is there anything that needs to be imported, I tried googling it but I could not find an answer.

@SempervivumNov 07.2021 — #Regarding swipe.js: Unfortunately I'm not familiar with SCSS. I suspect that some classes are interfering or that there is something wrong with the specifity of the selectors (inline style or style applied by javascript have the highest priority).

@codyhillauthorNov 07.2021 — #@Sempervivum#1639128 yeah... originally I had to build that carousel using a library but all the libraries that I know of including bootstrap overwrite my CSS and I don't like that. I also have to use scss.

@codyhillauthorNov 07.2021 — #@Sempervivum#1639128 About adjusting the slideWith with window resize. I did it like this but it doesn't work.

``<i>
 </i>  window.addEventListener("resize", () =&gt; {
 slideWidth = slides[0].getBoundingClientRect().width;
 });<i>
 </i>``

@SempervivumNov 07.2021 — #This will only change the variable, you will have to apply it to the slides additionally:

``<i>
 </i>  window.addEventListener("resize", () =&gt; {
 slideWidth = slides[0].getBoundingClientRect().width;
 document.documentElement.style.setProperty(
 "--shift-amount",
 -counter * slideWidth + "px"
 );
 });<i>
 </i> ``

@codyhillauthorNov 07.2021 — #@Sempervivum#1639131 Still not working. https://codepen.io/raul-rogojan/pen/RwZMEWZ?editors=0010

@SempervivumNov 07.2021 — #This time the console tells us what's wrong:
>Uncaught TypeError: Assignment to constant variable.

You have to change `const</C> to <C>let</C> for the variable <C>linewidth`.

Also in #JavaScript _↴

innerHTML/getElementById Problem [RESOLVED] Jquery Slider error passing array

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This

min-height does not work

18 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

min-height does not work

18 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #JavaScript _↴