Top indentation in Lightning experience tabs

iloveseven 08/10/2018. 1 answers, 47 views
lightning-components lightning lightning-experience css tab

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.

1 Answers


itzmukeshy7 08/10/2018.

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

component.cmp

<!--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}
</div>
<!-- Ending part -->

componentController.js

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);
}

Related questions

Hot questions

Language

Popular Tags