Mixing
Is this possible to position label for lightning:select on the left?
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
1
down vote
favorite
<lightning:select name="SelectOrNot" value="!v.selectField" label="Select One" >
<aura:iteration items="!v.TheOptions" var="po">
<option value="!po">!po</option>
</aura:iteration>
</lightning:select>
When I try to use standard lightning tag <lightning:select> it displays label on the top .How to make it on the left.
lightning-components lightning salesforcedx selectlist
edited 8 hours ago
sfdcfox
235k10180396
asked 10 hours ago
One
234
add a comment |Â
up vote
1
down vote
favorite
<lightning:select name="SelectOrNot" value="!v.selectField" label="Select One" >
<aura:iteration items="!v.TheOptions" var="po">
<option value="!po">!po</option>
</aura:iteration>
</lightning:select>
When I try to use standard lightning tag <lightning:select> it displays label on the top .How to make it on the left.
lightning-components lightning salesforcedx selectlist
edited 8 hours ago
sfdcfox
235k10180396
asked 10 hours ago
One
234
I presume you meant "on the left" in both the title and question, so I have edited it as such. If this is not correct, please feel free to edit your question.
– sfdcfox
8 hours ago
add a comment |Â
up vote
1
down vote
favorite
up vote
1
down vote
favorite
<lightning:select name="SelectOrNot" value="!v.selectField" label="Select One" >
<aura:iteration items="!v.TheOptions" var="po">
<option value="!po">!po</option>
</aura:iteration>
</lightning:select>
When I try to use standard lightning tag <lightning:select> it displays label on the top .How to make it on the left.
lightning-components lightning salesforcedx selectlist
edited 8 hours ago
sfdcfox
235k10180396
asked 10 hours ago
One
234
<lightning:select name="SelectOrNot" value="!v.selectField" label="Select One" >
<aura:iteration items="!v.TheOptions" var="po">
<option value="!po">!po</option>
</aura:iteration>
</lightning:select>
When I try to use standard lightning tag <lightning:select> it displays label on the top .How to make it on the left.
lightning-components lightning salesforcedx selectlist
lightning-components lightning salesforcedx selectlist
edited 8 hours ago
sfdcfox
235k10180396
asked 10 hours ago
One
234
edited 8 hours ago
sfdcfox
235k10180396
asked 10 hours ago
One
234
edited 8 hours ago
sfdcfox
235k10180396
edited 8 hours ago
sfdcfox
235k10180396
edited 8 hours ago
sfdcfox
235k10180396
235k10180396
asked 10 hours ago
One
234
asked 10 hours ago
One
234
asked 10 hours ago
One
234
234
I presume you meant "on the left" in both the title and question, so I have edited it as such. If this is not correct, please feel free to edit your question.
– sfdcfox
8 hours ago
add a comment |Â
I presume you meant "on the left" in both the title and question, so I have edited it as such. If this is not correct, please feel free to edit your question.
– sfdcfox
8 hours ago
I presume you meant "on the left" in both the title and question, so I have edited it as such. If this is not correct, please feel free to edit your question.
– sfdcfox
8 hours ago
I presume you meant "on the left" in both the title and question, so I have edited it as such. If this is not correct, please feel free to edit your question.
– sfdcfox
8 hours ago
add a comment |Â
2 Answers
2
active
oldest
votes
up vote
5
down vote
accepted
By placing the <lightning:select> in a horizontal form, it will transform the labels to the left.
<div class="slds-form_horizontal">
<lightning:select name="SelectOrNot" value="!v.selectField" label="Select One" >
<aura:iteration items="!v.TheOptions" var="po">
<option value="!po">!po</option>
</aura:iteration>
</lightning:select>
</div>
answered 8 hours ago
sfdcfox
235k10180396
Thank you very much!
– One
7 hours ago
add a comment |Â
up vote
3
down vote
Wrap it in a div and apply the "slds-form_horizontal" class like so:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,lightning:isUrlAddressable">
<lightning:card title="Select Example" iconName="standard:default" class="slds-size_1-of-4">
<div class="slds-form slds-form_horizontal slds-p-around_medium">
<lightning:select label="Name">
<option value="test">Premium</option>
</lightning:select>
<lightning:select label="Color">
<option value="test">Space Gray</option>
</lightning:select>
<lightning:select label="Size">
<option value="test">X-Large</option>
</lightning:select>
<lightning:select label="Quantity">
<option value="test">10</option>
</lightning:select>
<lightning:select label="Weight">
<option value="test">10g</option>
</lightning:select>
<lightning:select label="Material">
<option value="test">Alumninum</option>
</lightning:select>
</div>
</lightning:card>
</aura:component>
This is how the example above renders as of Winter '19:
answered 8 hours ago
Aaron P.
1,05911118
add a comment |Â
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
5
down vote
accepted
By placing the <lightning:select> in a horizontal form, it will transform the labels to the left.
<div class="slds-form_horizontal">
<lightning:select name="SelectOrNot" value="!v.selectField" label="Select One" >
<aura:iteration items="!v.TheOptions" var="po">
<option value="!po">!po</option>
</aura:iteration>
</lightning:select>
</div>
answered 8 hours ago
sfdcfox
235k10180396
Thank you very much!
– One
7 hours ago
add a comment |Â
up vote
5
down vote
accepted
By placing the <lightning:select> in a horizontal form, it will transform the labels to the left.
<div class="slds-form_horizontal">
<lightning:select name="SelectOrNot" value="!v.selectField" label="Select One" >
<aura:iteration items="!v.TheOptions" var="po">
<option value="!po">!po</option>
</aura:iteration>
</lightning:select>
</div>
answered 8 hours ago
sfdcfox
235k10180396
Thank you very much!
– One
7 hours ago
add a comment |Â
up vote
5
down vote
accepted
up vote
5
down vote
accepted
By placing the <lightning:select> in a horizontal form, it will transform the labels to the left.
<div class="slds-form_horizontal">
<lightning:select name="SelectOrNot" value="!v.selectField" label="Select One" >
<aura:iteration items="!v.TheOptions" var="po">
<option value="!po">!po</option>
</aura:iteration>
</lightning:select>
</div>
answered 8 hours ago
sfdcfox
235k10180396
By placing the <lightning:select> in a horizontal form, it will transform the labels to the left.
<div class="slds-form_horizontal">
<lightning:select name="SelectOrNot" value="!v.selectField" label="Select One" >
<aura:iteration items="!v.TheOptions" var="po">
<option value="!po">!po</option>
</aura:iteration>
</lightning:select>
</div>
answered 8 hours ago
sfdcfox
235k10180396
answered 8 hours ago
sfdcfox
235k10180396
answered 8 hours ago
sfdcfox
235k10180396
answered 8 hours ago
sfdcfox
235k10180396
235k10180396
Thank you very much!
– One
7 hours ago
add a comment |Â
Thank you very much!
– One
7 hours ago
Thank you very much!
– One
7 hours ago
Thank you very much!
– One
7 hours ago
add a comment |Â
up vote
3
down vote
Wrap it in a div and apply the "slds-form_horizontal" class like so:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,lightning:isUrlAddressable">
<lightning:card title="Select Example" iconName="standard:default" class="slds-size_1-of-4">
<div class="slds-form slds-form_horizontal slds-p-around_medium">
<lightning:select label="Name">
<option value="test">Premium</option>
</lightning:select>
<lightning:select label="Color">
<option value="test">Space Gray</option>
</lightning:select>
<lightning:select label="Size">
<option value="test">X-Large</option>
</lightning:select>
<lightning:select label="Quantity">
<option value="test">10</option>
</lightning:select>
<lightning:select label="Weight">
<option value="test">10g</option>
</lightning:select>
<lightning:select label="Material">
<option value="test">Alumninum</option>
</lightning:select>
</div>
</lightning:card>
</aura:component>
This is how the example above renders as of Winter '19:
answered 8 hours ago
Aaron P.
1,05911118
add a comment |Â
up vote
3
down vote
Wrap it in a div and apply the "slds-form_horizontal" class like so:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,lightning:isUrlAddressable">
<lightning:card title="Select Example" iconName="standard:default" class="slds-size_1-of-4">
<div class="slds-form slds-form_horizontal slds-p-around_medium">
<lightning:select label="Name">
<option value="test">Premium</option>
</lightning:select>
<lightning:select label="Color">
<option value="test">Space Gray</option>
</lightning:select>
<lightning:select label="Size">
<option value="test">X-Large</option>
</lightning:select>
<lightning:select label="Quantity">
<option value="test">10</option>
</lightning:select>
<lightning:select label="Weight">
<option value="test">10g</option>
</lightning:select>
<lightning:select label="Material">
<option value="test">Alumninum</option>
</lightning:select>
</div>
</lightning:card>
</aura:component>
This is how the example above renders as of Winter '19:
answered 8 hours ago
Aaron P.
1,05911118
add a comment |Â
up vote
3
down vote
up vote
3
down vote
Wrap it in a div and apply the "slds-form_horizontal" class like so:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,lightning:isUrlAddressable">
<lightning:card title="Select Example" iconName="standard:default" class="slds-size_1-of-4">
<div class="slds-form slds-form_horizontal slds-p-around_medium">
<lightning:select label="Name">
<option value="test">Premium</option>
</lightning:select>
<lightning:select label="Color">
<option value="test">Space Gray</option>
</lightning:select>
<lightning:select label="Size">
<option value="test">X-Large</option>
</lightning:select>
<lightning:select label="Quantity">
<option value="test">10</option>
</lightning:select>
<lightning:select label="Weight">
<option value="test">10g</option>
</lightning:select>
<lightning:select label="Material">
<option value="test">Alumninum</option>
</lightning:select>
</div>
</lightning:card>
</aura:component>
This is how the example above renders as of Winter '19:
answered 8 hours ago
Aaron P.
1,05911118
Wrap it in a div and apply the "slds-form_horizontal" class like so:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,lightning:isUrlAddressable">
<lightning:card title="Select Example" iconName="standard:default" class="slds-size_1-of-4">
<div class="slds-form slds-form_horizontal slds-p-around_medium">
<lightning:select label="Name">
<option value="test">Premium</option>
</lightning:select>
<lightning:select label="Color">
<option value="test">Space Gray</option>
</lightning:select>
<lightning:select label="Size">
<option value="test">X-Large</option>
</lightning:select>
<lightning:select label="Quantity">
<option value="test">10</option>
</lightning:select>
<lightning:select label="Weight">
<option value="test">10g</option>
</lightning:select>
<lightning:select label="Material">
<option value="test">Alumninum</option>
</lightning:select>
</div>
</lightning:card>
</aura:component>
This is how the example above renders as of Winter '19:
answered 8 hours ago
Aaron P.
1,05911118
answered 8 hours ago
Aaron P.
1,05911118
answered 8 hours ago
Aaron P.
1,05911118
answered 8 hours ago
Aaron P.
1,05911118
1,05911118
add a comment |Â
add a comment |Â
Â
draft saved
draft discarded
Â
draft saved
draft discarded
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%2f237342%2fis-this-possible-to-position-label-for-lightningselect-on-the-left%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
I presume you meant "on the left" in both the title and question, so I have edited it as such. If this is not correct, please feel free to edit your question.
– sfdcfox
8 hours ago