Sticky Content Cross Component Referral

Arkadiusz Idzikowski staff answered 5 years ago

Dear Joao, I debugged this problem on the code you provided and unfortunately it looks like there are some problems with this directive that we need to fix. Regards, Arek

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=48616" rel="nofollow">@Joao</a> </p><p>I have investigated your problem - I've tried to find where this bug has a place. But after some digging in the code I've discovered, that there's no bug. Sticky Directive works fine.</p><p>The problem was with your code.</p><p>In the main-section.component.html you're having such line:</p><pre class="code-toolbar grey lighten-2 p-3 mb-3">sticky-after="#navbar"</pre><p>But you should use there a .navbar selector. I'll describe that why you should use the .navbar selector later. So your sticky-after input should look like the below one:</p><pre class="code-toolbar grey lighten-2 p-3 mb-3">sticky-after=".navbar"</pre><p>Explanation: sticky-after input requires to pass a CSS selector, not an angular selector. So in this way you would add id="navbar" to the mdb-navbar element. </p><p>But this also will not work, because mdb-navbar element hasn't got a height. So you can't stick element to another element which has no height.</p><p>But element which has the .navbar class got height value - to this element you can stick another element.</p><p>Best Regards,</p><p>Damian</p>

Please insert min. 20 characters.

Dear @Joao

I have investigated your problem - I've tried to find where this bug has a place. But after some digging in the code I've discovered, that there's no bug. Sticky Directive works fine.

The problem was with your code.

In the main-section.component.html you're having such line:

sticky-after="#navbar"

But you should use there a .navbar selector. I'll describe that why you should use the .navbar selector later. So your sticky-after input should look like the below one:

sticky-after=".navbar"

Explanation: sticky-after input requires to pass a CSS selector, not an angular selector. So in this way you would add id="navbar" to the mdb-navbar element.

But this also will not work, because mdb-navbar element hasn't got a height. So you can't stick element to another element which has no height.

But element which has the .navbar class got height value - to this element you can stick another element.

Best Regards,

Damian

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

Dear Joao, Unfortunately i can't provide an ETA yet. Regards, Arek

Add comment

Joao pro answered 5 years ago

0 0 Best answer

When can I expect this issue to be fixed ?

Add comment

Joao pro answered 5 years ago

0 0 Best answer

Hello Arek

Here is some sample code.

Sorry for the long post I still haven't figured out how to use the post code wrapper properly. I can send you the example code via email but this will be nicer for other users facing the same question.

Again my question is how can I point to the navbar with my sticky element that is on the right side container of the main-section component.

Thank you,

Joao

app-component.html:
<div>
<div><app-navbar></app-navbar></div>
<div><div class="container"></div>
<div><divclass="row no-gutters"></div>
<div><divclass="col-3"><app-sidebar></app-sidebar></div></div>
<div><divclass="col-9"><app-main-section></app-main-section></div></div>
<div></div></div>
<div></div></div>
<div><app-footer> </app-footer></div>
</div>
<div></div>
<div></div>
<div>navbar.component.html:</div>
<div></div>
<div>
<div>
<div><mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo fixed-top scrolling-navbar" mdbSticky #navbar></div>
<div><mdb-navbar-brand></div>
<div><aclass="navbar-brand"href="">Navbar</a></div>
<div></mdb-navbar-brand></div>
<div><links></div>
<div><formclass="form-inline waves-light waves-light ml-auto"mdbWavesEffect></div>
<div><divclass="md-form mt-0"></div>
<div><inputclass="form-control mr-sm-2"type="text"placeholder="Search"aria-label="Search"></div>
<div><buttonmdbBtncolor="success"outline="true"size="sm"class="my-0 waves-light"type="submit"mdbWavesEffect>Search</button></div>
<div></div></div>
<div></form></div>
<div></links></div>
<div></mdb-navbar></div>
</div>
</div>
<div></div>
<div>sidebar.component.html</div>
<div></div>
<div>
<div>
<div><div class="list-group"></div>
<div><ahref="#"class="list-group-item active waves-light"mdbWavesEffect> Cras justo odio </a></div>
<div><ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Dapibus ac facilisis in</a></div>
<div><ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Morbi leo risus</a></div>
<div><ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Porta ac consectetur ac</a></div>
<div><ahref="#"class="list-group-item list-group-item-action disabled waves-light"mdbWavesEffect>Vestibulum at eros</a></div>
<div><ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Dapibus ac facilisis in</a></div>
<div><ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Morbi leo risus</a></div>
<div><ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Porta ac consectetur ac</a></div>
<div><ahref="#"class="list-group-item list-group-item-action disabled waves-light"mdbWavesEffect>Vestibulum at eros</a></div>
<div><ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Dapibus ac facilisis in</a></div>
<div><ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Morbi leo risus</a></div>
<div><ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Porta ac consectetur ac</a></div>
<div><ahref="#"class="list-group-item list-group-item-action disabled waves-light"mdbWavesEffect>Vestibulum at eros</a></div>
<div><ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Dapibus ac facilisis in</a></div>
<div><ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Morbi leo risus</a></div>
<div><ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Porta ac consectetur ac</a></div>
<div><ahref="#"class="list-group-item list-group-item-action disabled waves-light"mdbWavesEffect>Vestibulum at eros</a></div>
<div><ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Dapibus ac facilisis in</a></div>
<div><ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Morbi leo risus</a></div>
<div><ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Porta ac consectetur ac</a></div>
<div><ahref="#"class="list-group-item list-group-item-action disabled waves-light"mdbWavesEffect>Vestibulum at eros</a></div>
<div></div></div>
</div>
</div>
<div></div>
<div></div>
<div>main-section.component.html:</div>
<div>
<div>
<div><div class="row no-gutters pt-0"></div>
<div><divclass="col-9"id="center"></div></div>
<div><divclass="col-3"id="right"></div>
<div><divclass="col green z-depth-1"mdbStickysticky-after="#navbar"></div>
<div><h2>Sticky Widget</h2></div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum luctus eros sed pretium. Proin turpis odio, viverra et tincidunt nec, tincidunt sed nisl.</p></div>
<div></div></div>
<div></div></div>
<div></div></div>
</div>
</div>
<div></div>
<div></div>
<div>footer.component.html:</div>
<div></div>
<div>
<div>
<div></div>
<div><footer class="page-footer font-small stylish-color-dark pt-4"></div>
<div></div>
<div><divclass="container text-center text-md-left"></div>
<div></div>
<div><divclass="row"></div>
<div></div>
<div><divclass="col-md-4 mx-auto"></div>
<div></div>
<div><h5class="font-weight-bold text-uppercase mt-3 mb-4">Footer Content</h5></div>
<div><p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing</div>
<div>elit.</p></div>
<div></div></div>
<div></div>
<div><hrclass="clearfix w-100 d-md-none"></div>
<div></div>
<div><divclass="col-md-2 mx-auto"></div>
<div></div>
<div><h5class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5></div>
<div><ulclass="list-unstyled"></div>
<div><li></div>
<div><ahref="#!">Link 1</a></div>
<div></li></div>
<div><li></div>
<div><ahref="#!">Link 2</a></div>
<div></li></div>
<div><li></div>
<div><ahref="#!">Link 3</a></div>
<div></li></div>
<div><li></div>
<div><ahref="#!">Link 4</a></div>
<div></li></div>
<div></ul></div>
<div></div></div>
<div></div>
<div><hrclass="clearfix w-100 d-md-none"></div>
<div></div>
<div><divclass="col-md-2 mx-auto"></div>
<div></div>
<div><h5class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5></div>
<div><ulclass="list-unstyled"></div>
<div><li></div>
<div><ahref="#!">Link 1</a></div>
<div></li></div>
<div><li></div>
<div><ahref="#!">Link 2</a></div>
<div></li></div>
<div><li></div>
<div><ahref="#!">Link 3</a></div>
<div></li></div>
<div><li></div>
<div><ahref="#!">Link 4</a></div>
<div></li></div>
<div></ul></div>
<div></div></div>
<div></div>
<div><hrclass="clearfix w-100 d-md-none"></div>
<div></div>
<div><divclass="col-md-2 mx-auto"></div>
<div></div>
<div><h5class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5></div>
<div><ulclass="list-unstyled"></div>
<div><li></div>
<div><ahref="#!">Link 1</a></div>
<div></li></div>
<div><li></div>
<div><ahref="#!">Link 2</a></div>
<div></li></div>
<div><li></div>
<div><ahref="#!">Link 3</a></div>
<div></li></div>
<div><li></div>
<div><ahref="#!">Link 4</a></div>
<div></li></div>
<div></ul></div>
<div></div></div>
<div></div>
<div></div></div>
<div></div>
<div></div></div>
<div></div>
<div><hr></div>
<div></div>
<div><ulclass="list-unstyled list-inline text-center py-2"></div>
<div><liclass="list-inline-item"></div>
<div><h5class="mb-1">Register for free</h5></div>
<div></li></div>
<div><liclass="list-inline-item"></div>
<div><ahref="#!"mdbBtncolor="danger"rounded="true"mdbWavesEffect>Sign up!</a></div>
<div></li></div>
<div></ul></div>
<div></div>
<div><hr></div>
<div></div>
<div><ulclass="list-unstyled list-inline text-center"></div>
<div><liclass="list-inline-item"></div>
<div><aclass="btn-floating btn-fb mx-1"mdbWavesEffect></div>
<div><mdb-iconicon="facebook"></mdb-icon></div>
<div></a></div>
<div></li></div>
<div><liclass="list-inline-item"></div>
<div><aclass="btn-floating btn-tw mx-1"mdbWavesEffect></div>
<div><mdb-iconicon="twitter"></mdb-icon></div>
<div></a></div>
<div></li></div>
<div><liclass="list-inline-item"></div>
<div><aclass="btn-floating btn-gplus mx-1"mdbWavesEffect></div>
<div><mdb-iconicon="google-plus"></mdb-icon></div>
<div></a></div>
<div></li></div>
<div><liclass="list-inline-item"></div>
<div><aclass="btn-floating btn-li mx-1"mdbWavesEffect></div>
<div><mdb-iconicon="linkedin"></mdb-icon></div>
<div></a></div>
<div></li></div>
<div><liclass="list-inline-item"></div>
<div><aclass="btn-floating btn-dribbble mx-1"mdbWavesEffect></div>
<div><mdb-iconicon="dribbble"></mdb-icon></div>
<div></a></div>
<div></li></div>
<div></ul></div>
<div></div>
<div></div>
<div><divclass="footer-copyright text-center py-3">© 2018 Copyright:</div>
<div><ahref="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a></div>
<div></div></div>
<div></div>
<div></footer></div>
<div></div>
</div>
</div>
<div></div>
<div>styles.scss</div>
<div></div>
<div>
<div>
<div>// Page Width</div>
<div>html body app-root div.container</div>
<div>{</div>
<div>max-width: 95vw;</div>
<div>}</div>
<div>// Page body padding top</div>
<div>html body app-root div.container div.row {</div>
<div>padding-top: 15vh;</div>
<div>}</div>
<div>#center {</div>
<div>background-color: purple;</div>
<div>height: 1024px;</div>
<div>}</div>
<div>#right {</div>
<div>background-color: aqua;</div>
<div>height: 1024px;</div>
<div>}</div>
</div>
</div>
<div></div>

Please insert min. 20 characters.

Hello Arek Here is some sample code. Sorry for the long post I still haven't figured out how to use the post code wrapper properly. I can send you the example code via email but this will be nicer for other users facing the same question. Again my question is how can I point to the navbar with my sticky element that is on the right side container of the main-section component. Thank you, Joao app-component.html:

<app-navbar></app-navbar>

<divclass="row no-gutters">

<divclass="col-3"><app-sidebar></app-sidebar></div>

<divclass="col-9"><app-main-section></app-main-section></div>

</div>

<app-footer> </app-footer>

navbar.component.html:

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo fixed-top scrolling-navbar" mdbSticky #navbar>

<mdb-navbar-brand>

<aclass="navbar-brand"href="">Navbar</a>

</mdb-navbar-brand>

<links>

<formclass="form-inline waves-light waves-light ml-auto"mdbWavesEffect>

<divclass="md-form mt-0">

<inputclass="form-control mr-sm-2"type="text"placeholder="Search"aria-label="Search">

<buttonmdbBtncolor="success"outline="true"size="sm"class="my-0 waves-light"type="submit"mdbWavesEffect>Search</button>

</div>

</form>

</links>

</mdb-navbar>

sidebar.component.html

<ahref="#"class="list-group-item active waves-light"mdbWavesEffect> Cras justo odio </a>

<ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Dapibus ac facilisis in</a>

<ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Morbi leo risus</a>

<ahref="#"class="list-group-item list-group-item-action waves-light"mdbWavesEffect>Porta ac consectetur ac</a>