4

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

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 '20 at 11:52
3

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 '20 at 9:28

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.