Sticky Content Cross Component Referral


Topic: Sticky Content Cross Component Referral

Joao pro asked 6 years ago

Hello, I'm trying to use the mdbSticky directive but its failing to point to an element that is being rendered on a diferent component (Which is a fixed top mdb-navbar). Is this even possible or does the "sticky-after" attribute as to be pointing to an element on the same component? Thanks in advance.   EDIT: Assuming I have to place the mdbSticky and an id on the nav element generated by the mdb-navbar component how can I accomplish that ?

Arkadiusz Idzikowski staff answered 6 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

Arkadiusz Idzikowski staff answered 6 years ago

Dear Joao, Please provide an example code with reproductions steps or demo app (you can send it to me on a.idzikowski@mdbootstrap.com) so we can debug this problem correctly. Regards, Arek

Joao pro answered 6 years ago

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>
<div class="container">
<divclass="row no-gutters">
<divclass="col-3"><app-sidebar></app-sidebar></div>
<divclass="col-9"><app-main-section></app-main-section></div>
</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
<div class="list-group">
<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>
<ahref="#"class="list-group-item list-group-item-action disabled waves-light"mdbWavesEffect>Vestibulum at eros</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>
<ahref="#"class="list-group-item list-group-item-action disabled waves-light"mdbWavesEffect>Vestibulum at eros</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>
<ahref="#"class="list-group-item list-group-item-action disabled waves-light"mdbWavesEffect>Vestibulum at eros</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>
<ahref="#"class="list-group-item list-group-item-action disabled waves-light"mdbWavesEffect>Vestibulum at eros</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>
<ahref="#"class="list-group-item list-group-item-action disabled waves-light"mdbWavesEffect>Vestibulum at eros</a>
</div>
main-section.component.html:
<div class="row no-gutters pt-0">
<divclass="col-9"id="center"></div>
<divclass="col-3"id="right">
<divclass="col green z-depth-1"mdbStickysticky-after="#navbar">
<h2>Sticky Widget</h2>
<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>
footer.component.html:
<!-- Footer -->
<footer class="page-footer font-small stylish-color-dark pt-4">
<!-- Footer Links -->
<divclass="container text-center text-md-left">
<!-- Grid row -->
<divclass="row">
<!-- Grid column -->
<divclass="col-md-4 mx-auto">
<!-- Content -->
<h5class="font-weight-bold text-uppercase mt-3 mb-4">Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing
elit.</p>
</div>
<!-- Grid column -->
<hrclass="clearfix w-100 d-md-none">
<!-- Grid column -->
<divclass="col-md-2 mx-auto">
<!-- Links -->
<h5class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ulclass="list-unstyled">
<li>
<ahref="#!">Link 1</a>
</li>
<li>
<ahref="#!">Link 2</a>
</li>
<li>
<ahref="#!">Link 3</a>
</li>
<li>
<ahref="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hrclass="clearfix w-100 d-md-none">
<!-- Grid column -->
<divclass="col-md-2 mx-auto">
<!-- Links -->
<h5class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ulclass="list-unstyled">
<li>
<ahref="#!">Link 1</a>
</li>
<li>
<ahref="#!">Link 2</a>
</li>
<li>
<ahref="#!">Link 3</a>
</li>
<li>
<ahref="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hrclass="clearfix w-100 d-md-none">
<!-- Grid column -->
<divclass="col-md-2 mx-auto">
<!-- Links -->
<h5class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ulclass="list-unstyled">
<li>
<ahref="#!">Link 1</a>
</li>
<li>
<ahref="#!">Link 2</a>
</li>
<li>
<ahref="#!">Link 3</a>
</li>
<li>
<ahref="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<hr>
<!-- Call to action -->
<ulclass="list-unstyled list-inline text-center py-2">
<liclass="list-inline-item">
<h5class="mb-1">Register for free</h5>
</li>
<liclass="list-inline-item">
<ahref="#!"mdbBtncolor="danger"rounded="true"mdbWavesEffect>Sign up!</a>
</li>
</ul>
<!-- Call to action -->
<hr>
<!-- Social buttons -->
<ulclass="list-unstyled list-inline text-center">
<liclass="list-inline-item">
<aclass="btn-floating btn-fb mx-1"mdbWavesEffect>
<mdb-iconicon="facebook"></mdb-icon>
</a>
</li>
<liclass="list-inline-item">
<aclass="btn-floating btn-tw mx-1"mdbWavesEffect>
<mdb-iconicon="twitter"></mdb-icon>
</a>
</li>
<liclass="list-inline-item">
<aclass="btn-floating btn-gplus mx-1"mdbWavesEffect>
<mdb-iconicon="google-plus"></mdb-icon>
</a>
</li>
<liclass="list-inline-item">
<aclass="btn-floating btn-li mx-1"mdbWavesEffect>
<mdb-iconicon="linkedin"></mdb-icon>
</a>
</li>
<liclass="list-inline-item">
<aclass="btn-floating btn-dribbble mx-1"mdbWavesEffect>
<mdb-iconicon="dribbble"></mdb-icon>
</a>
</li>
</ul>
<!-- Social buttons -->
<!-- Copyright -->
<divclass="footer-copyright text-center py-3">© 2018 Copyright:
<ahref="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
styles.scss
// Page Width
html body app-root div.container
{
max-width: 95vw;
}
// Page body padding top
html body app-root div.container div.row {
padding-top: 15vh;
}
#center {
background-color: purple;
height: 1024px;
}
#right {
background-color: aqua;
height: 1024px;
}

Joao pro answered 6 years ago

When can I expect this issue to be fixed ?

Arkadiusz Idzikowski staff answered 6 years ago

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

Damian Gemza staff answered 6 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: PC
  • Browser: Firefox
  • OS: WIN 7 x64
  • Provided sample code: No
  • Provided link: No