2

Is there any way to make a lightning:button expand horizontally until it fills the boundaries of its div? I've been trying for ages but nothing I try works, is it possible or is salesforce still working on that functionality? Here's what I'm trying/something to work with:

<div style="width:200px;">
    <div class="slds-grid slds-grid_pull-padded-medium">
        <div class="slds-col slds-p-horizontal_medium">
            <lightning:layout horizontalAlign="spread" pullToBoundary="small">
                <lightning:layoutItem flexibility="grow">

                    <lightning:button variant="neutral" label="TEST" iconName="utility:up" iconPosition="right"/>

                </lightning:layoutItem>
            </lightning:layout>
        </div>
   </div>
</div>

I've tried CSS stuff too but it won't work either, pretty much out of ideas at this point. Would appreciate any advice

CSS stuff:

.THIS.widebutton {

display: block;
margin: 10px 0;
padding: 10px;
width: 100%;
background-color: red;

}

still a n00b when it comes to salesforce css styling, I added class="widebutton" to the lightning:button but that may have been the wrong way to do it.

2
  • 1
    post everything you've tried using CSS to avoid suggesting things you have already tried. Additionally, what div are you trying to fully expand the button in? Thanks!
    – glls
    Jun 26, 2017 at 19:00
  • I'm trying to expand the button to the topmost div, '<div style="width:200px;">'. I'm actually building a component that I will use elsewhere all over the place, and need the button to expand to fill whatever container I put the component in. The <div style="width:200px;"> is just for testing, hopefully I'll be able to change/remove it later Jun 26, 2017 at 19:08

2 Answers 2

2

Everything @glls said is correct. This is to just help point out the areas where you might consider some changes...

<div style="width:200px;"> //This makes the max width of everything inside 200px.
  <div class="slds-grid slds-grid_pull-padded-medium">
    <div class="slds-col slds-p-horizontal_medium">
        <lightning:layout horizontalAlign="spread" pullToBoundary="small">
            <lightning:layoutItem flexibility="grow">

                <lightning:button variant="neutral" label="TEST" iconName="utility:up" iconPosition="right"/>

            </lightning:layoutItem>
        </lightning:layout>
    </div>
  </div>
</div>

This will give you the ability to be more flexible.

<div style="width: 50%; min-width: 200px; max-width: 400px;"> //Make this auto, or a percentage and it will scale with the screen.  
                                                              //You can also use min-width and max-width...
  <div class="slds-grid slds-grid_pull-padded-medium">
    <div class="slds-col slds-p-horizontal_medium">
        <lightning:layout horizontalAlign="spread" pullToBoundary="small">
            <lightning:layoutItem flexibility="grow">

                <lightning:button variant="neutral" label="TEST" iconName="utility:up" iconPosition="right"/>

            </lightning:layoutItem>
        </lightning:layout>
    </div>
  </div>
</div>

For your CSS:

.THIS.widebutton {
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 100%; // this will make it fill the width available to it. Which is currently 200px.
    background-color: red;
}

Try something like this CSS:

.THIS.widebutton {
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 96%;
    min-width: 140px;
    margin-left: auto;
    margin-right: auto; //the margin left and right auto make the display block center.
    background-color: red;
}

Again, @glls is correct... and if you wanted to fill everything in a top level container, you would have to have the button outside of divs that have limitations...

1
  • Success! As per usual less is more, all it took was '.THIS .wide { display: block; width: 96%; min-width: 120px; }' in the CSS file. Jun 28, 2017 at 15:48
1

You basically are putting your button in a box within another box that is in a bigger box, then you are telling your button to expand to its fullest within the smallest box.

enter image description here

Either take your button out of the smallest box, aka div and or change the display property value, property values can be found here

3
  • I figured there was some kind of scope problem, but which divs are limiting the scope? are the slds-col and slds-grid divs getting in the way/stopping the button from expanding to fill the 200px div? thanks for your help btw, I suck at styling Jun 26, 2017 at 19:24
  • youtube.com/watch?v=-pzckbNyqfc
    – glls
    Jun 26, 2017 at 19:25
  • lol so true, I'll keep you posted, think I'm getting closer Jun 26, 2017 at 19:37

You must log in to answer this question.

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