3

I need different widths for my LWC for lightning and classic(lightning out) as my LWC is shooting out of card width in lightning.

I am able to know whether a user is in lightning or classic using wire and apex. How can I use it to dynamically control the width of LWC?

LWC shoots out

APEX

public with sharing class ThemeTest {
    @auraEnabled(cacheable=true)
    public static String getUIThemeDescription() {
        String theme = UserInfo.getUiThemeDisplayed();
        return theme;
    }
}

This is how I get the context. (I want to set the component width here)

    @wire(getUITheme) theme({error,data}){
        if(data==='Theme4d'){             
            this.isLightning=true; 
        }  
        if(error){             
            this.error1 = error; 
        }                     
    }

HTML

<div id="setWidth" class="slds-scrollable" style="height:20rem;width:66rem">
                    <lightning-datatable 
                        key-field="Id"
                        data={wrappers}
                        columns={columns}
                        onrowaction={navigateToRecordViewPage}
                        hide-checkbox-column="true">
                    </lightning-datatable>
                </div>
</div>
  • You need to use media queries to get device-width then set the width of LWC based device width. – rahul gawale Nov 7 at 7:29
  • 1
    Good to see you looked for existing solutions. I would say that you should update your question to include a bit more code detail - for example, how you import the getUITheme wire. – Phil W Nov 7 at 7:38
  • I added the apex code above. Thanks – Koustubh Nov 7 at 8:37
2

You can use flexipageRegionWidth.

Make a Component Width-Aware

When you add a component to a region on a page in the Lightning App Builder, use @api flexipageRegionWidth to pass the region’s width to the component. Then with some strategic CSS, you can tell the component to render in different ways in different regions at run time.

Valid CSS class values are SMALL, MEDIUM, and LARGE

JS:

import { LightningElement, api } from 'lwc';

export default class TestClass extends LightningElement {
    @api flexipageRegionWidth = 'CLASSIC'; // default to classic. If its lightning, framework will set the value
}

HTML:

<template>
   <div class={flexipageRegionWidth}>
       <datatable>
   </div>
</template>

CSS:

div .CLASSIC {
    width: 66rem;
    ...
}
div .LARGE {
    width: 40rem;
    ...
}
div .SMALL {
    width: 15rem;
    ...
}
  • This works! It takes div .CLASSIC value for classic(lightning out) and sets width in lightning by itself. Thanks a lot. – Koustubh Nov 7 at 9:18
3

You can use a template if:true={property} expression to show different divs based on logic.

Here's a trailhead tutorial.

Another example:

<template if:false={moveToNextPage}>
    <div class={tableClass}>

    </div>
</template>

  @api
    controlTableOff() {
        this.tableClass = 'slds-hide';
    }
  • Thanks! Yes, I can use template if:true={isLightning} and template if:false={isLightning}, but I'll have to insert same datatable twice (with different widths) for lightning and classic. It doesn't seem like a good way of programming. Hence I was looking to set the CSS component width through javascript itself. – Koustubh Nov 7 at 8:34
  • I think you can just change the div's class as a dynamic property thus not making use of two tables? – Atlas Can Nov 7 at 8:41
  • How do I do that? I cannot use element = document.getElementById('div1');. I referred this link – Koustubh Nov 7 at 9:28
1

The obvious solution is to stop using fixed width (you use 66rem) and to use min/max widths plus a standard width of 100% which will try to fill the width of the container by default.

  • 1
    datatable uses 100% of width by default – salesforce-sas Nov 7 at 8:44

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.