Angular mdbSticky Documentation is Unclear

Topic: Angular mdbSticky Documentation is Unclear

BruceVWilcox pro asked 5 years ago

I cannot get the mdbSticky directive to work based on the documentation at https://mdbootstrap.com/docs/angular/advanced/sticky/

The step 1 and step 2 examples do not work for me.

The comprehensive example works but the documentation does not mention whether the 'widget', 'static', and 'z-depth-1' classes are essential to the behavior. Also, is the overflow: hidden css part of the formula?

I just want one of the divs on my page to not scroll out of view at the top of the page. Simply adding the mdbSticky directive does not stop it from scrolling off the screen.

Here is my relevant html code. What am I missing?

<div class="row mt-3">

    <div id="entrydiv"
         class="col-lg-5">

        <div *ngIf="debugMode">
            <pre>EntryViewComponent.docData: {{ docData | json }}</pre>
        </div>

        <div>

            <flib-data-entry (docValueChanged)="docValueWasChanged($event)"
                             [debugMode]="debugMode"
                             [docData]="docData"></flib-data-entry>

        </div>

    </div>

    <div id="facsimilediv"
         mdbSticky
         class="col-lg-7">

            <flib-facsimile [debugMode]="debugMode" [docData]="docData"></flib-facsimile>

    </div>

</div>

Konrad Stępień staff commented 5 years ago

Hi @BruceVWilcox,

For a component to work properly you need three things

mdbSticky directive
stickyAfter Input (optional)
And correctly styles

Can you prepare for me your project with styles on snippets / Github?

You may not even need this component.

Unfortunately, I don't have enough data to reproduce the problem.

BruceVWilcox pro commented 5 years ago

I finally found the time to work on this. Please see my content at https://github.com/iTipsDev/mdb-sticky-examples

See the 'example4' component which is the pattern I am trying to get work.

I think the problem lies in the "correct styles".

My point is that the documentation gives no guidance on the subject of necessary .css content.

Thank you for your help.

Konrad Stępień staff commented 5 years ago

Hi @BruceVWilcox

Very thanks for your code.

We will edit this docs page in near future.

PS: please edit your package-lock.json file (just remove token) and run:

git commit --amend, then save opened messages. git push --f.

Then your token will be removed in your repo on the last commit.

BruceVWilcox pro commented 5 years ago

Any word on this?

Does the mbdSticky directive not work on a bootstrap column tag?

Konrad Stępień staff commented 5 years ago

Can you provide me part of your code?

We will check if this is not a bug.

BruceVWilcox pro commented 5 years ago

I provided my code at https://github.com/iTipsDev/mdb-sticky-examples 3 weeks ago.

Konrad Stępień staff commented 5 years ago

Sorry for that @BruceVWilcox, I misunderstood your answer. Please check my answer below.

BruceVWilcox pro commented 5 years ago

Thank you. That works.

To summarize the requirement:

1) Place the sticky div inside column div (bootstrap class="col-xx-x"). 2) Give the surrounding row div (bootstrap class="row") a style of 'overflow: hidden' 3) Give the column div a style of 'float: left'

Is that right?

Can you explain what each of #1, #2, #3 above do to make it work? I'd like to understand the 'why' of the solution.

Thank you for solving this for me.

Konrad Stępień staff commented 5 years ago

Hi @BruceVWilcox,

For a component to function properly it must have its own wrapper.

MdbSticky moves in the right-wrapper column, which is the same height as its neighbour (left), but right class has an auto height.

For correctly working of component you only need an appropriate HTML structure.

Like this:

<div class="row">
  <div class="col-lg-5">
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
  </div>
  <div class="col-lg-7">
    <div mdbSticky>
      <p>This column is shorter. I want it to not scroll off page. Or jump to bottom.</p>
      <p>This column is shorter. I want it to not scroll off page. Or jump to bottom.</p>
      <p>This column is shorter. I want it to not scroll off page. Or jump to bottom.</p>
      <p>This column is shorter. I want it to not scroll off page. Or jump to bottom.</p>
      <p>This column is shorter. I want it to not scroll off page. Or jump to bottom.</p>
    </div>
  </div>
</div>

Do you have any additional questions?

Add comment

Konrad Stępień staff answered 5 years ago

0 0 Best answer

Hi @BruceVWilcox,

Can you try my code?

<div id="wrapper" class="row">
  <div class="left col-lg-5">
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
    <p>This column is taller than page.</p>
  </div>
  <div class="right-wrapper col-lg-7 px-0">
    <div class="right" mdbSticky>
      <p>
        This column is shorter. I want it to not scroll off page. Or jump to
        bottom.
      </p>
      <p>
        This column is shorter. I want it to not scroll off page. Or jump to
        bottom.
      </p>
      <p>
        This column is shorter. I want it to not scroll off page. Or jump to
        bottom.
      </p>
      <p>
        This column is shorter. I want it to not scroll off page. Or jump to
        bottom.
      </p>
      <p>
        This column is shorter. I want it to not scroll off page. Or jump to
        bottom.
      </p>
    </div>
  </div>
</div>

And SCSS:

#wrapper {
  overflow: hidden;
  .right-wrapper {
    float: left;
  }
}

.left {
  background-color: aqua;
  padding: 2em;
}

.right {
  background-color: pink;
  padding: 2em;
}

p {
  font-weight: bold;
  font-size: 16px;
  color: #000000;
}

Something like this? stkicky