Mixing
How to Align Lightning Component Label and Fields
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
1
down vote
favorite
How to align lightning label and lightning input in 1 row? I can't seem to putll it off. 
Here's my current form. However, my goal is to make it look like this 
This is my lightning form code for the first image above:
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">
<lightning:input aura:id="contactField" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning:input aura:id="contactField" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
</div>
<br/>
<div class="slds-col slds-size_1-of-2">
<lightning:input aura:id="contactField" type="email" name="email" label="Email" value="!v.newContact.Email" />
</div>
I'm trying to make it look like the second picture. However, for the second picture, I used the label tag which is separate from the input tag. It's never hard to make the input field and the label appear in 1 line where the input box has similar alignment with the input box below it. But using the lightning:input with the label together in it, would it be possible to align them in 1 row?
lightning-components
asked 31 mins ago
cookie
578
add a comment |Â
up vote
1
down vote
favorite
How to align lightning label and lightning input in 1 row? I can't seem to putll it off. Here's my current form. However, my goal is to make it look like this This is my lightning form code for the first image above:
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">
<lightning:input aura:id="contactField" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning:input aura:id="contactField" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
</div>
<br/>
<div class="slds-col slds-size_1-of-2">
<lightning:input aura:id="contactField" type="email" name="email" label="Email" value="!v.newContact.Email" />
</div>
I'm trying to make it look like the second picture. However, for the second picture, I used the label tag which is separate from the input tag. It's never hard to make the input field and the label appear in 1 line where the input box has similar alignment with the input box below it. But using the lightning:input with the label together in it, would it be possible to align them in 1 row?
lightning-components
asked 31 mins ago
cookie
578
add a comment |Â
up vote
1
down vote
favorite
up vote
1
down vote
favorite
How to align lightning label and lightning input in 1 row? I can't seem to putll it off. Here's my current form. However, my goal is to make it look like this This is my lightning form code for the first image above:
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">
<lightning:input aura:id="contactField" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning:input aura:id="contactField" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
</div>
<br/>
<div class="slds-col slds-size_1-of-2">
<lightning:input aura:id="contactField" type="email" name="email" label="Email" value="!v.newContact.Email" />
</div>
I'm trying to make it look like the second picture. However, for the second picture, I used the label tag which is separate from the input tag. It's never hard to make the input field and the label appear in 1 line where the input box has similar alignment with the input box below it. But using the lightning:input with the label together in it, would it be possible to align them in 1 row?
lightning-components
asked 31 mins ago
cookie
578
How to align lightning label and lightning input in 1 row? I can't seem to putll it off. Here's my current form. However, my goal is to make it look like this This is my lightning form code for the first image above:
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">
<lightning:input aura:id="contactField" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning:input aura:id="contactField" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
</div>
<br/>
<div class="slds-col slds-size_1-of-2">
<lightning:input aura:id="contactField" type="email" name="email" label="Email" value="!v.newContact.Email" />
</div>
I'm trying to make it look like the second picture. However, for the second picture, I used the label tag which is separate from the input tag. It's never hard to make the input field and the label appear in 1 line where the input box has similar alignment with the input box below it. But using the lightning:input with the label together in it, would it be possible to align them in 1 row?
lightning-components
lightning-components
asked 31 mins ago
cookie
578
asked 31 mins ago
cookie
578
asked 31 mins ago
cookie
578
asked 31 mins ago
cookie
578
asked 31 mins ago
cookie
578
578
add a comment |Â
add a comment |Â
1 Answer
1
active
oldest
votes
up vote
2
down vote
Yes, simply place your elements in a horizontal form, and give the elements the correct size. Here's a modified example of your code:
<div class="slds-form_horizontal slds-form slds-grid slds-wrap">
<lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
<lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
<lightning:input aura:id="contactField" class="slds-size_1-of-2" type="email" name="email" label="Email" value="!v.newContact.Email" />
</div>
answered 17 mins ago
sfdcfox
231k10178394
add a comment |Â
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
Yes, simply place your elements in a horizontal form, and give the elements the correct size. Here's a modified example of your code:
<div class="slds-form_horizontal slds-form slds-grid slds-wrap">
<lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
<lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
<lightning:input aura:id="contactField" class="slds-size_1-of-2" type="email" name="email" label="Email" value="!v.newContact.Email" />
</div>
answered 17 mins ago
sfdcfox
231k10178394
add a comment |Â
up vote
2
down vote
Yes, simply place your elements in a horizontal form, and give the elements the correct size. Here's a modified example of your code:
<div class="slds-form_horizontal slds-form slds-grid slds-wrap">
<lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
<lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
<lightning:input aura:id="contactField" class="slds-size_1-of-2" type="email" name="email" label="Email" value="!v.newContact.Email" />
</div>
answered 17 mins ago
sfdcfox
231k10178394
add a comment |Â
up vote
2
down vote
up vote
2
down vote
Yes, simply place your elements in a horizontal form, and give the elements the correct size. Here's a modified example of your code:
<div class="slds-form_horizontal slds-form slds-grid slds-wrap">
<lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
<lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
<lightning:input aura:id="contactField" class="slds-size_1-of-2" type="email" name="email" label="Email" value="!v.newContact.Email" />
</div>
answered 17 mins ago
sfdcfox
231k10178394
Yes, simply place your elements in a horizontal form, and give the elements the correct size. Here's a modified example of your code:
<div class="slds-form_horizontal slds-form slds-grid slds-wrap">
<lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
<lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
<lightning:input aura:id="contactField" class="slds-size_1-of-2" type="email" name="email" label="Email" value="!v.newContact.Email" />
</div>
answered 17 mins ago
sfdcfox
231k10178394
answered 17 mins ago
sfdcfox
231k10178394
answered 17 mins ago
sfdcfox
231k10178394
answered 17 mins ago
sfdcfox
231k10178394
231k10178394
add a comment |Â
add a comment |Â
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f235094%2fhow-to-align-lightning-component-label-and-fields%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
