0

I have an lightning component and I am Using it in two different record detail page ,One on main page and other in small side bar. My component is compatible with the main bar,But when I placed my component in side bar Designs are collapsed. Please check the image below.

SideBar MainBar

Update: Show and hide class working based on window size, While i am checking it with preview app Those classes are working fine if i reduce window size, But on side bar It's consider full window size.

<div class="demo-only demo-visibility">
    <table width="100%" class="slds-show_medium">
    </table>
</div>
  • This makes sense as aura component is responsive OOTB, if you want to specify you own boundary and width for each section, check below 2 links: salesforce.stackexchange.com/questions/163479/… developer.salesforce.com/blogs/developer-relations/2017/04/… – Wayne Ni Jan 7 at 5:51
  • @WayneNi Show and hide class working based on window size, While i am checking it with preview app Those classes are working fine if i reduce window size, But on side bar It's consider full window size – nubie Jan 7 at 6:13
  • Ok, I might have a solution, in your lightning component, console log the current screen resolution and check what is the current resolution if it is side bar. If the resolution is side bar's one, putting additional logic to add custom css class in the after rendering. If this still doesn't work, I think you are running out of luck. – Wayne Ni Jan 9 at 0:17
  • Can you help how to get screen resolution ?@WayneNi – nubie Jan 9 at 5:35
  • just normal javascript, screen.width, screen.height, check out if those outputs are the same – Wayne Ni Jan 10 at 4:43

Your Answer

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

Browse other questions tagged or ask your own question.