Materialize: content after fullscreen slider

[louishugens]

Hello Guys,

I'm new using materialize, so sorry :). I'm trying to add text after fullscreen slider but it apears under the slider. Any idea? Thanks.

[Dogfalo]

You might have changed the CSS on something

[louishugens]

The materialize.css file you mean?
Le 3 avr. 2015 15:02, "Alvin Wang" [email protected] a écrit :

You might have changed the CSS on something

—
Reply to this email directly or view it on GitHub
https://github.com/Dogfalo/materialize/issues/1092#issuecomment-89392388
.

[Dogfalo]

Can you produce your problem in the codepen on the README?

[martinmasignano]

Hey guys, I have the same problem here. When I try to add some additional content after the full screen slider, i.e. a div container, not shown below, but behind. That is, the slider hides the rest of the content. Any ideas?

[wenbo-lin]

Perhaps, try using z-index to move the element stack order?

[martinmasignano]

But I need to show content below, not behind

[Ethaan]

I ended up doing something like this

<div class="secondary-content">
</div>

.secondary-content {
   top: 100%;
  position: absolute;
}

[jomarbarnobal]

i come up with this. i wrapped my content in slider div like this

• image_tag ' '

[samuelesantoni]

someone has solved this problem? The div, is under the "fullscreen slider"...

[JanG85]

Hi Guys!
Same Problem! Googleing around --> no solution!

My solution:

the problem is cause by the fullscreen class.

Do the following steps:

1. remove fullscreen class after slider class
   
   
   2: insert that into your style.css:

.slider {
height: 100vh;
top: -74px;
}

.slider .indicators {
z-index: 9999;
bottom: 30px;
}

1. insert this in your main.js:

$('.slider').slider({
height: '100%'
});

It works for me. Hope it works for you too

[anshap1719]

Or can wrap everything after the fullscreen slider in a div (say with id
content) and set css as follows :

content {

position: relative;
top : 100vh;

}

Thats what I did!
On Jul 8, 2016 19:38, "eleumas" [email protected] wrote:

someone has solved this problem? The div, is under the "fullscreen
slider"...

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/Dogfalo/materialize/issues/1092#issuecomment-231368652,
or mute the thread
https://github.com/notifications/unsubscribe/ASRuSYQZe88hp1RRWsj6fHIPIu0NsEbxks5qTlm-gaJpZM4D57eW
.

[JanG85]

Thanks a lot!

your solution works much better on mobile.

thumb up! ;-)

[samuelesantoni]

@anshap1719 Please, can you post your snippet for the fullscreen slideshow? I have tried your solution but i have some problem. Thanks.

[Rubel-hossain]

Thanks JanG85 , i am facing the same problem and solved by your given tips. But The Problem Should be solved By materialize.

[jomarbarnobal]

lets wait for materializecss developer to make it happen, for now use that step to use in your page, i only use full screen slider in sigle page app or landing page.

[kartikchauhan]

@anshap1719 thank you so much, that trick worked like a charm.

[diegofsousa]

Fantastic resolution! thanks!

[khushbuthakur]

I have got very simple solution i.e.

# $('.slider').slider({
"height": $(window).height()
});
Remove fullscreen class from slider and write the above code in js.
This makes slider fullscreen and doesn't even hides content after slider. :)

[chintan-mishra]

None of these solutions work with the 1.0-rc2
Does anyone have any suggestion?

[misterpola]

The problem is that the .fullscreen class gives the slider an absolute position.
If you wrap the slider in a div with width:100% and height: 100vh it will work as intended.