5

I just start exploring Local LWC development. The component preview is so small and it is showing in the middle of the screen. Is there any workaround to increase the width and height of the 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

1
  • You can put the lightning card in a div and provide width for the div or add width to inner tags like p
    – manjit5190
    Mar 11, 2020 at 11:52

3 Answers 3

4

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

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

0

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"

}
1
  • I've tried the above and am using the SMALL variant and I have included a simple child component that only displays a lightning-record-form and it displays like this i.stack.imgur.com/Y4tDw.png. Any idea why?
    – JodieM
    Jul 12, 2020 at 9:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .