expand column width in lighting

Hi. I am very new to lightning development. Is there a way to:
1. extend my select option fields so they display in more than just one column?
2. expand the width of the component
3. Add an additional column so there are three columns as opposed to one?

Thank you!!!!

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickAction,force:hasRecordId" access="global" controller="GSController">
	 <!-- Handle component initialization in a client-side controller -->
	 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <!-- Dynamically load the list of contacts -->
    <aura:attribute name="groupstructures" type="Group_Structure__c[]"/>
    <aura:attribute name="groupstructureList" type="Group_Structure__c[]"/>
    <aura:attribute name="totalGroupStructures" type="Integer"/>
    
    <!-- Page header with a counter that displays total number of contacts -->
    <div class="slds-page-header slds-page-header_object-home">
        <lightning:layout>
            <lightning:layoutItem>
                <lightning:icon iconName="standard:group_structure__c" />
            </lightning:layoutItem>
            <lightning:layoutItem class="slds-m-left_small">
                <p class="slds-text-title_caps slds-line-height_reset">Group Structures</p>
                <h1 class="slds-page-header__title slds-p-right_x-small">Group Structure Viewer</h1>
            </lightning:layoutItem>
        </lightning:layout>
    
        <lightning:layout>
            <lightning:layoutItem>
                <p class="slds-text-body_small">{!v.totalGroupStructures} Group Structures • View Group Structures Based on Status</p>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
    
    <!-- Body with dropdown menu and list of Group Structures -->
    <lightning:layout>
        <lightning:layoutItem padding="horizontal-medium" >
            <!-- Create a dropdown menu with options -->
            <lightning:select aura:id="select" label="Status" name="source" 
                              onchange="{!c.handleSelect}" class="slds-m-bottom_small">
                <option value="">-- Select a Group Structure Status --</option>
                <option value="Active" text="Active"/>
                <option value="InActive" text="InActive"/>
                <option value="All" text="All"/>
            </lightning:select>
           
            <!-- Create a dropdown menu with options -->
            <lightning:select aura:id="selectHP" label="Health Product" name="sourceHP" 
                              onchange="{!c.handleSelect}" class="slds-m-bottom_small">
                 <option value="">-- Select a Horizon Product --</option>
                <option value="DA" text="DA"/>
                <option value="EPO Advantage" text="EPO Advantage"/>
                <option value="PPO" text="PPO"/>
                <option value="All" text="All"/>
            </lightning:select>
    
            <!-- Iterate over the list of Group Structures and display them -->
            <aura:iteration var="groupstructure" items="{!v.groupstructures}">
                  <c:GroupStructures groupstructure="{!groupstructure}"/>
            </aura:iteration>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

September 19, 2018
·
Like
0
·
Follow
1

Best Answer chosen by Fred13

Maharajan C
Hi fred,

you can use the size attribut in layoutitem inside the layout.

normally layoutitem size should be 12 so if you want the 3 column inside layout then each layoutiem size should be 4 if it's 2 column then each layoutitem should be 6.

Reference Link : https://developer.salesforce.com/docs/component-library/bundle/lightning:layoutItem/example#lightningcomponentdemo:exampleLayoutItemsDefaultSize

Your code should be like below:

<lightning:layout>
        <lightning:layoutItem padding="horizontal-medium"  size="4">
            
            <lightning:select aura:id="select" label="Status" name="source"
                              onchange="{!c.handleSelect}" class="slds-m-bottom_small">
                <option value="">-- Select a Group Structure Status --</option>
                <option value="Active" text="Active"/>
                <option value="InActive" text="InActive"/>
                <option value="All" text="All"/>
            </lightning:select>
         </lightning:layoutItem>

        <lightning:layoutItem padding="horizontal-medium"  size="6">

            
            <lightning:select aura:id="selectHP" label="Health Product" name="sourceHP"
                              onchange="{!c.handleSelect}" class="slds-m-bottom_small">
                 <option value="">-- Select a Horizon Product --</option>
                <option value="DA" text="DA"/>
                <option value="EPO Advantage" text="EPO Advantage"/>
                <option value="PPO" text="PPO"/>
                <option value="All" text="All"/>
            </lightning:select>
       </lightning:layoutItem>
</lightning:layout>

<lightning:layout>
        <lightning:layoutItem padding="horizontal-medium" >

            
            <aura:iteration var="groupstructure" items="{!v.groupstructures}">
                  <c:GroupStructures groupstructure="{!groupstructure}"/>
            </aura:iteration>
        </lightning:layoutItem>
</lightning:layout>

Can you please Let me know if it helps or not!!!

If it helps don't forget to mark this as a best answer!!!

Thanks,
Raj

September 19, 2018
·
Like
0
·
Dislike
0

This was selected as the best answer

Fred13
Perfect! Thanks for your help Maharajan!!!

Fred

September 20, 2018
·
Like
0
·
Dislike
0

Fred13
I would like to ask a follow up question. Now that I have my fields spread accross the way I would like, is there a way to change font colors? What I would like to do is to group the fields. For example, the section and package code should be grouped together... the effective date and end date should be grouped together. I see we can change the background color but I have not found anything on font color. thanks!!!!

September 20, 2018
·
Like
0
·
Dislike
0

Maharajan C
Yes Fred you can do change the color inLabel

add the class where you need and then add the below style in Lightning component bundle.

<lightning:inputField class="customRequired" field="' aura:id=""/>

.THIS .customRequired label{
color: rgb(255, 0, 0);
}

Thanks,
Raj C

September 20, 2018
·
Like
0
·
Dislike
0

Fred13
I must be missing something because I can't get the font to change... I added this to my Style file and only the background changes:

THIS .customRequired {
background-color: lightgreen;
color: rgb(255, 0, 0);
}

I also tried this but nothing changes (not even the background)
THIS .customRequired Label {
background-color: lightgreen;
color: rgb(255, 0, 0);
}

Here is what I have on my component:
<lightning:layout multipleRows="true" verticalAlign="center" >
<lightning:layoutItem size="1" padding="around-Small" >
<lightning:outputField fieldName="Status__c" class="customRequired" aura:id=""/>
</lightning:layoutItem>

Thanks for your help!!!

September 21, 2018
·
Like
0
·
Dislike
0

Fred13
Just to add to this... I can get the font color to update in a seperate lightning layout but not the one I want. See the attached screenshot which shows the code an the results. thanks!!!!!

September 21, 2018
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

expand column width in lighting

All Answers

You need to sign in to do that.