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>
Improve this question
5
  • 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
    Commented Jan 7, 2020 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
    – Ajith Kumar
    Commented Jan 7, 2020 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
    Commented Jan 9, 2020 at 0:17
  • Can you help how to get screen resolution ?@WayneNi
    – Ajith Kumar
    Commented Jan 9, 2020 at 5:35
  • just normal javascript, screen.width, screen.height, check out if those outputs are the same
    – Wayne Ni
    Commented Jan 10, 2020 at 4:43

0

Reset to default

You must log in to answer this question.