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, 2018 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, 2018 at 16:11
  • As you can see this is under element.style{top:...} and it's set using JavaScript and for. Aug 10, 2018 at 16:32
  • @kurunve, I updated the question. I might help you understand my intentions.
    – iloveseven
    Aug 10, 2018 at 16:41
  • @Praveen, that is a bad practice if the documentation does not guarantee the 90px to be there forever.
    – iloveseven
    Aug 10, 2018 at 16:42

1 Answer 1


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, 2018 at 16:47
  • Sure, give it a try, and share your experience. ;-) Aug 10, 2018 at 16:48
  • For some reasons getElement() return null. Did you have the same problem?
    – iloveseven
    Aug 10, 2018 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, 2018 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, 2018 at 17:22

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .