0

I would like to know if it is possible to change the way button groups appear based on the size of the browser window. Below is a screenshot of a small component that I have. The buttons themselves are in a button group in the "actions" slot of the card.

enter image description here

Code:

<lightning-button-group slot="actions">
<lightning-button variant="brand" label={preferenceButtonLabel} onclick={setPreferences}>
</lightning-button>
<lightning-button variant="brand-outline" label="Clear All Preferences" onclick={clearAllPreferences}
    disabled={clearDisabled}>
</lightning-button>

When the size of the screen is decreased this is what it looks like:

enter image description here

If possible, I would love for it to appear like this once the screen reaches a certain fixed size or less:

This means changing it from a button group to a button menu dynamically. I've tried many options and just can't come up with something. Any ideas?

1

Use CSS media queries, or LWC form factor and template if:true to render either the button group or the button menu based on that.

Updated:

To listen for manual changes:

You can use a listener on the resize event like: In the controller:

<div style={height}>
<div>

In the controller:

_height = window.innerHeight;

get height() {
    return `${this._height}px`;
}

renderedCallback() {
    window.addEventListener('resize', () => {
        this._height = window.innerHeight;
    });
}

Where your logic can basically set a boolean to true or false based on the new window.innerWidth, for example

4
  • Yeah, those work great when the screen is loaded at a certain size. But, I'm looking for a solution that provides the change to the UI in real time (i.e. if one opens the component with a large width browser, then shrinks the browser window manually, the buttons will change). Do you have a working example of this by chance? Jun 21 at 12:00
  • Kindly review my edited answer Jun 21 at 12:33
  • Thanks again for the response! I added an event listener prior to making the Stack Exchange post. It works perfectly in the sense that if you put a console.log() statement it dumps them perfectly. It even changes the values of the variables in the JS component. But the changes to the variables do not translate to real time changes in the UI. If I use a "template if:true=" statement with a variable, the variable changes values in the console, but doesn't affect the layout at all. Jun 22 at 13:31
  • I have edited the answer again adding an example of a real scenario working for me Jun 22 at 14:10

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.