Does Lightning experience guarantee that the body of the tab will always indent 90px from top? If the value is not guaranteed, then how would I be able to get it in code?

enter image description here

In order to avoid x-y problem.

I need this so that I would be able to implement fixed side bar on the left. The cyan color part on the left should take the whole height it can and have all parts visible (the bottom should not go below the bottom of the browser page and the top should not go under the lightning header with tabs above) at the same time. And when the user scrolls the cyan color part on the left should not violate restrictions just described (go below page or under the tabs header). I am using position: sticky for the purpose. And there are actually two problems I face here: the one is about getting the header height (the question is about it) and another is about getting the height of the browser page with the header height subtracted. Here is a js fiddle of what I am trying to do for those who are interested.

  • Why can not you relate your content based on section? Personally I remember that in case if you enable Utility Bar, it will be 100%-140px (or something similar) – kurunve Aug 10 '18 at 16:09
  • I don't think there's way to get the value, but that 90px, to be honest, is there almost a year. In our use case, we had to show popovers dynamically relative to the clicked anchor tag in a custom Lightning component running in LEX, we kind of hardcoded that 90px in the code solved the positioning issue. – Praveen Aug 10 '18 at 16:11
  • As you can see this is under element.style{top:...} and it's set using JavaScript and for. – itzmukeshy7 Aug 10 '18 at 16:32
  • @kurunve, I updated the question. I might help you understand my intentions. – iloveseven Aug 10 '18 at 16:41
  • @Praveen, that is a bad practice if the documentation does not guarantee the 90px to be there forever. – iloveseven Aug 10 '18 at 16:42

With the help of below JS logic you can get the top height dynamically:


<!--Top component required/needed things -->
<aura:handler name="init" value="{!this}" action="{!c.onInit}"  />

<aura:attribute name="topHeight" type="String" default="" />

<div aura:id="container">
    <!-- Your markup -->
    Top Height: {!v.topHeight}
<!-- Ending part -->


onInit: function(c, e, h){
  window.setTimeout($A.getCallback(function () {
    try {
      var container = c.find('container');
      var bounds = container.getElement().getBoundingClientRect();
      c.set('v.topHeight', (bounds.top + 'px'));
    } catch (err) { }
  }), 250);
  • lol. let me try and I will be back – iloveseven Aug 10 '18 at 16:47
  • Sure, give it a try, and share your experience. ;-) – itzmukeshy7 Aug 10 '18 at 16:48
  • For some reasons getElement() return null. Did you have the same problem? – iloveseven Aug 10 '18 at 16:52
  • 1
    @itzmukeshy7 You need to do this in afterRender. There's no guarantee the DOM will be present when init handler. – Praveen Aug 10 '18 at 16:57
  • 1
    @itzmukeshy7 But still the afterRender is the right place to do it. Framework guarantees DOM availability if you use it there. – Praveen Aug 10 '18 at 17:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.