MDB jQuery Sticky weird behaviour


Topic: MDB jQuery Sticky weird behaviour

twentyfour pro asked 6 years ago

Hi all, a little problem here with the sticky-class.

*Expected behavior*After adding the HTML and javascript, the column should stop being position:relative and become position:static;

*Actual behavior*The whole column disappears and is actually located above and outside the viewport because for some weird reason, bottom: 0 is being injected in the HTML

Resources (screenshots, code snippets etc.) When not activated:

<div id="sidebar" class="col-md-3 my-5 pr-5 sticky" style="position: static; width: 284.25px; height: 190px; z-index: 2; bottom: 0px; top: 0px;">
          <img class="img-fluid rounded-circle z-depth-2" src="https://mdbcdn.b-cdn.net/img/24DegreesTransparent.png" alt="alternate description">
        </div>

When activated:

<div id="sidebar" class="col-md-3 my-5 pr-5 sticky" style="position: absolute; width: 284.25px; height: 150px; z-index: 2; bottom: 0px;">
          <img class="img-fluid rounded-circle z-depth-2" src="https://mdbcdn.b-cdn.net/img/24DegreesTransparent.png" alt="alternate description">
        </div>

So I noticed the top:0 is removed when activated, but the bottom:0 is still there.

Weird. All help welcome, I don't get it.

kind regards,

Michaël


Bartłomiej Malanowski staff pro premium commented 6 years ago

Can you help us with recreating your issue? Live demo or snippet would be highly appreciated


twentyfour pro answered 6 years ago

Sorry, forgot to mention: if I manually remove the bottom:0 when activated, then it's visible again. Until I scroll of course, then it is gone because bottom:0 is added again.


twentyfour pro answered 6 years ago

@Bartlomeij: I have send you a link to the documents, did you receive it?

Thanks


Bartłomiej Malanowski staff pro premium answered 6 years ago

Yes, I've got your email. Please try to change your HTML. Please remove the .sticky class from to #sidebar and add it again like this:

<div id="sidebar" class="col-md-3 mb-5 pr-5 mx-auto">
  <div class="sticky">
      <!-- The content of your sidebar -->
  </div>
</div>

twentyfour pro answered 6 years ago

Hi Barlomiej,

I tried your code but it didn't work. I'll look into it later, I'm starting to think that some of my SCSS is causing this behaviour. I'll keep you posted and thanks for the help !!

kind regards,


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.5
  • Device: iMac
  • Browser: Chrome
  • OS: OsX
  • Provided sample code: No
  • Provided link: No