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 ?

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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

Add comment

Joao pro answered 6 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:

<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 class="page-footer font-small stylish-color-dark pt-4">

<divclass="container text-center text-md-left">

<divclass="row">

<divclass="col-md-4 mx-auto">

<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>

<hrclass="clearfix w-100 d-md-none">

<divclass="col-md-2 mx-auto">

<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>

<hrclass="clearfix w-100 d-md-none">

<divclass="col-md-2 mx-auto">

<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>

<hrclass="clearfix w-100 d-md-none">

<divclass="col-md-2 mx-auto">

<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>

</div>

</div>

<hr>

<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>

<hr>

<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>

<divclass="footer-copyright text-center py-3">© 2018 Copyright:

<ahref="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>

</div>

</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;

}

Add comment

Joao pro answered 6 years ago

0 0 Best answer

When can I expect this issue to be fixed ?

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

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

Write

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

Tags

stickycontent

Related topics

0: Sticky Content not working!

0: StickyContent not working for Angular

0: MDB Bootstrap Support

0: StickyContent Weird Behaviour

0: How to set topSpacing in Stickycontent angular version?

About author

Joao

Pro User

90Support score
2Questions 6Answers

0Snippets likes 0Snippets