1

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.

  • 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 '17 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 – Ben d'Straw Jun 26 '17 at 19:08
1

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

| improve this answer | |
  • Success! As per usual less is more, all it took was '.THIS .wide { display: block; width: 96%; min-width: 120px; }' in the CSS file. – Ben d'Straw Jun 28 '17 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

| improve this answer | |
  • 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 – Ben d'Straw Jun 26 '17 at 19:24
  • youtube.com/watch?v=-pzckbNyqfc – glls Jun 26 '17 at 19:25
  • lol so true, I'll keep you posted, think I'm getting closer – Ben d'Straw Jun 26 '17 at 19:37

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.