TransWikia.com

LWC - Local Development preview in small size

Salesforce Asked by Sarvesh on February 26, 2021

I just start exploring Local LWC development.
The component preview is so small and it is showing the middle on the screen. Is there any workaround to increase the width and height of component by default.

    <template>
      <lightning-card title="Hello">
        <lightning-button label="New" slot="actions"></lightning-button>
        <p class="slds-p-horizontal_small">Card Body (custom component)</p>
        <p slot="footer">Card Footer</p>
      </lightning-card>
    </template>

enter image description here

3 Answers

Not exact answer, but adding anyway as searching for small viewport size directs here. My issue is that there wasn't enough space for component making it kinda useless. Thanks to Chuck Liddell for idea of using Chrome's overrides which I've detailed a bit more here - https://github.com/forcedotcom/lwc-dev-server-feedback/issues/18#issuecomment-736839151

Answered by dzh on February 26, 2021

For local dev I generally always wrap the component I am developing into a "testing" LWC parent component. This lets you pass it parameters and generally interact with it as if it is sitting within your application.

To make it take up the whole area wrap your component with a DIV set to class "slds-grid_frame" in a parent testing LWC. This lets you view it full screen (or a controlled size) without modifying your actual component.

Code for parent testing LWC that wraps your component.

<template>
    <div class="slds-grid_frame">
        <c-your-component></c-your-component>
    </div>
</template>

Answered by Matt Robison on February 26, 2021

Here is the solution I've came across using flexipageRegionWidth. This doesn't conflict with your org when deployed.

template

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

css

.CLASSIC {
  min-width: 66rem;
}
.LARGE {
  min-width: 40rem;
}
.SMALL {
  min-width: 15rem;
}

js

import { LightningElement, api } from "lwc";

export default class LibsD3 extends LightningElement {
  @api flexipageRegionWidth = "CLASSIC"

}

Answered by calmar on February 26, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP