0

I'm new to SLDS and trying to make a lightning:layoutitem fit the whole page and I've tried playing around with slds-size class but to no avail. What I'm trying to do is to make the Add Expense fit the whole screen or something like 8 of 12 columns etc. How to do it? Pl advise.

<aura:component>

    <aura:attribute name="expenses" type="Expense__c[]"/>


    <aura:attribute name="newExpense" type="Expense__c"
     default="{ 'sobjectType': 'Expense__c',
                    'Name': '',
                    'Amount__c': 0,
                    'Client__c': '',
                    'Date__c': '',
                    'Reimbursed__c': false }"/>


<!-- PAGE HEADER -->
<lightning:layout class="slds-page-header slds-page-header--object-home">
    <lightning:layoutItem>
        <lightning:icon iconName="standard:scan_card" alternativeText="My Expenses"/>
    </lightning:layoutItem>
    <lightning:layoutItem padding="horizontal-small">
        <div class="page-section page-header">
            <h1 class="slds-text-heading--label">Expenses</h1>
            <h2 class="slds-text-heading--medium">My Expenses</h2>
        </div>
    </lightning:layoutItem>
</lightning:layout>
<!-- / PAGE HEADER -->

<!-- NEW EXPENSE FORM -->


<div class="slds-size--10-of-12">    
<lightning:layout>

    <lightning:layoutItem flexibility="grow" >

       <!-- CREATE NEW EXPENSE -->
    [![enter image description here][1]][1] <div aria-labelledby="newexpenseform">

    <!-- BOXED AREA -->
    <fieldset class="slds-box slds-theme--default slds-container--small">

    <legend id="newexpenseform" class="slds-text-heading--small 
      slds-p-vertical--medium">
      Add Expense
    </legend>

    <!-- CREATE NEW EXPENSE FORM -->
    <form class="slds-form--stacked">          
        <lightning:input aura:id="expenseform" label="Expense Name"
                         name="expensename"
                         value="{!v.newExpense.Name}"
                         required="true"/> 
        <lightning:input type="number" aura:id="expenseform" label="Amount"
                         name="expenseamount"
                         min="0.1"
                         formatter="currency"
                         step="0.01"
                         value="{!v.newExpense.Amount__c}"
                         messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>
        <lightning:input aura:id="expenseform" label="Client"
                         name="expenseclient"
                         value="{!v.newExpense.Client__c}"
                         placeholder="ABC Co."/>
        <lightning:input type="date" aura:id="expenseform" label="Expense Date"
                         name="expensedate"
                         value="{!v.newExpense.Date__c}"/>
        <lightning:input type="checkbox" aura:id="expenseform" label="Reimbursed?"  
                         name="expreimbursed"
                         checked="{!v.newExpense.Reimbursed__c}"/>
        <lightning:button label="Create Expense" 
                          class="slds-m-top--medium"
                          variant="brand"
                          onclick="{!c.clickCreate}"/>
    </form>
    <!-- / CREATE NEW EXPENSE FORM -->

  </fieldset>
  <!-- / BOXED AREA -->

</div>
<!-- / CREATE NEW EXPENSE -->

    </lightning:layoutItem>

</lightning:layout>
</div>
<!-- / NEW EXPENSE FORM -->

<c:expenseList expenses="{!v.expenses}"/>

1
  • Mind changing the title of your post to something relevant?
    – glls
    Jan 4 '18 at 3:17
1

You've got multiple size boxes all laid out in a row, when you really only needed... none of them. Here's the relevant code starting from the line <!-- NEW EXPENSE FORM -->:

<!-- NEW EXPENSE FORM -->
   <!-- CREATE NEW EXPENSE -->
    <div aria-labelledby="newexpenseform">

    <!-- BOXED AREA -->
    <fieldset class="slds-box slds-theme_default">

    <legend id="newexpenseform" class="slds-text-heading_small 
      slds-p-vertical_medium">
      Add Expense
    </legend>

    <!-- CREATE NEW EXPENSE FORM -->
    <form class="slds-form--stacked">          
        <lightning:input aura:id="expenseform" label="Expense Name"
                         name="expensename"
                         value="{!v.newExpense.Name}"
                         required="true"/> 
        <lightning:input type="number" aura:id="expenseform" label="Amount"
                         name="expenseamount"
                         min="0.1"
                         formatter="currency"
                         step="0.01"
                         value="{!v.newExpense.Amount__c}"
                         messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>
        <lightning:input aura:id="expenseform" label="Client"
                         name="expenseclient"
                         value="{!v.newExpense.Client__c}"
                         placeholder="ABC Co."/>
        <lightning:input type="date" aura:id="expenseform" label="Expense Date"
                         name="expensedate"
                         value="{!v.newExpense.Date__c}"/>
        <lightning:input type="checkbox" aura:id="expenseform" label="Reimbursed?"  
                         name="expreimbursed"
                         checked="{!v.newExpense.Reimbursed__c}"/>
        <lightning:button label="Create Expense" 
                          class="slds-m-top_medium"
                          variant="brand"
                          onclick="{!c.clickCreate}"/>
    </form>
    <!-- / CREATE NEW EXPENSE FORM -->

  </fieldset>
  <!-- / BOXED AREA -->

</div>
<!-- / CREATE NEW EXPENSE -->

    </lightning:layoutItem>

</lightning:layout>
</div>
<!-- / NEW EXPENSE FORM -->

The size 10-of-12 near the top made an outer box that was ~83% of the screen wide, followed by the slds-container--small, which specifies a small container (6-of-12, or 50%). Field sets (fieldset) are already naturally full width, and only need a grid container if they're going to be smaller than that.

NOTE: The -- version of SLDS directives has been largely deprecated and subject to removal in future releases. Make sure you check the documentation; most of the elements have replaced -- with _ and __. I've changed the example code to match this new style. You should update your code as soon as possible.


As a personal recommendation, prefer using lightning:layout and lightning:layoutItem with the appropriate size, smallDeviceSize, mediumDeviceSize, and largeDeviceSize attributes instead of using SLDS classes directly for maximum future-proofing effects. You could also probably remove most of the other elements in favor of the new components released in the past two releases. Lightning is still under massive development, so it would be worth your time to read up on the relevant release notes.

1
  • @JJSHHS I added an edit about -- versus _, as well. Make sure you update your code soon.
    – sfdcfox
    Dec 26 '17 at 6:22
0

Check out lightning layout item documentation here

There are different attributes like size, smallDeviceSize,mediumDeviceSize,largeDeviceSize. If you specify size as 8 it gets converted to slds 8-12 in run time.

If you want different size in mobile,desktop based on device resolution you can specify smallDeviceSize,mediumDeviceSize and it will use the space accordingly in those devices

<lightning:layoutItem padding="around-small" size="6">
    <div>1</div>
</lightning:layoutItem>

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.