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


public with sharing class ThemeTest {
    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}){
            this.error1 = error; 


<div id="setWidth" class="slds-scrollable" style="height:20rem;width:66rem">
  • You need to use media queries to get device-width then set the width of LWC based device width. Nov 7, 2019 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, 2019 at 7:38
  • I added the apex code above. Thanks
    – Koustubh
    Nov 7, 2019 at 8:37

3 Answers 3


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


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


   <div class={flexipageRegionWidth}>


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, 2019 at 9:18
  • Is there any option to do the same in the lightning communities? I have a component on the login page and even though it takes by default 1/3 of the whole page, slds sees the screen as large, so i cannot use slds for small/medium/large devices.
    – jm.
    Jan 29, 2020 at 11:24

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


    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, 2019 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, 2019 at 8:41
  • How do I do that? I cannot use element = document.getElementById('div1');. I referred this link
    – Koustubh
    Nov 7, 2019 at 9:28

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 Nov 7, 2019 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.