0

I want to have responsive button sizes, and I am using SLDS to accomplish that.

Here is my HTML Code:

<aura:component controller="CreateTaskLightningController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

<lightning:card iconName="action:new_task" title="CREATE FOLLOWUP TASKS">



            <div class="slds-grid slds-wrap" style="text-align:center;width: 100%;">
                <div class="slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-6 slds-p-around_small" >
                <lightning:button aura:id="1" variant="brand" label="Tomorrow" title="Tomorrow" onclick="{! c.handleClick }" />
                </div>

                <div class="slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-6 slds-p-around_small">
                <lightning:button aura:id="7" variant="brand" label="1 Week" title="1 Week" onclick="{! c.handleClick }" />
                </div>

                <div class="slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-6 slds-p-around_small">
                <lightning:button aura:id="14" variant="brand" label="2 Weeks" title="2 Weeks" onclick="{! c.handleClick }" />
                </div>

                <div class="slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-6 slds-p-around_small">
                <lightning:button aura:id="30" variant="brand" label="1 Month" title="1 Month" onclick="{! c.handleClick }" />
                </div>

                <div class="slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-6 slds-p-around_small">
                <lightning:button aura:id="90" variant="brand" label="3 Months" title="3 Months" onclick="{! c.handleClick }" />
                </div>

                <div class="slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-6 slds-p-around_small">
                <lightning:button aura:id="180" variant="brand" label="6 Months" title="6 Months" onclick="{! c.handleClick }" />
                </div>
            </div>


</lightning:card>

The problem is that I would like the "medium" sizing rules to kick in earlier. Look at the following picture:

enter image description here

I was wondering if there is any way to prevent words in buttons to do the wrap text style and stay as a static one liner (hopefully to kick in the the medium size slds grid format), or is there any way to have the "medium" size rule kick in earlier?

This is ideally what it should look like earlier on when I shrink the page:

enter image description here

Thank you!

0

No, the small/medium/large cutoffs are defined by SLDS and cannot be adjusted. You could use slds-truncate to force the text to cut off, but other than that, you must make sure that there's enough space for the next, or make your components larger to accommodate.

| improve this answer | |

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.