[SalesForce] How to control LWC styling dynamically

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>

Best Answer

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;
    ...
}
Related Topic