1

I added a new Lightning component.

All is good (controller, helper, apex controller...), but the position of Lightning:select doesn't change. I don't know why. I want to center the lightning:select in my page and also modify the width of the option.

There's my script:

The component:

<lightning:select name="Famille" label="{!$Label.c.RD_Categorie}" value="
        {!v.famille}" class="modifTailleListe">
    <aura:iteration items="{!v.items}" var="item">
        <option value="{!item.key}" text="{!item.value}"></option>
    </aura:iteration>
</lightning:select>

There's my CSS:

.THIS .modifTailleListe {
    margin:auto;
    width:50%;
}

I tried also:

.THIS .slds-form-element .modifTailleListe {
    margin:auto;
    width:50%;
}

And it didn't work.

In fact the problem (it's very stange), in the browser, the css of .modifTailleListe isn't display.

I'm seeing only

.slds-form-element {
    position: relative;
}

And I want to replace it by my css script.

I find this behavior strange.

How can I solve this?

0

Thank you for your answer. Unfortunately, it didn't worked. This is the result (see the image). When I added your script, it modified the position of the 2 first label and input, it didn't modify the position of the lightning:select.

There's all my script:

`

<div class="slds-form-element__group">
<div class="slds-form-element__row">
<div class="slds-form-element slds-size_1-of-2 pavePourcentage">
<label class="slds-form-element__label" for="form-element-01">{!$Label.c.RD_Pourcentage}</label>
<input type="Double" id="form-element-01" class="slds-input valPourcentage" value="{!v.remisePourcentage}"/>
</div>
<div class="slds-form-element slds-size_1-of-2 paveMontant">
<label class="slds-form-element__label" for="form-element-01">{!$Label.c.RD_Montant}</label>
<input type="Double" id="form-element-01" class="slds-input valMontant" value="{!v.remiseMontantDevise}"/>
</div>
</div>
</div>

</fieldset>
</div>
</div>

<lightning:select name="Famille" label="{!$Label.c.RD_Categorie}" value="{!v.famille}" class="modifTailleListe">
    <aura:iteration items="{!v.items}" var="item">
        <option value="{!item.key}" text="{!item.value}"></option>
    </aura:iteration>
</lightning:select>

`

The css:

`.THIS .pavePourcentage{ float:left; }

.THIS .paveMontant { float:right; }

.THIS .valPourcentage { width:30%; display:inherit; }

.THIS .valMontant { width:30%; display:inherit; }

.THIS .slds-form-element{ margin:auto; width:50%; }`

enter image description here

  • This is not an answer, please edit your original post. – glls Jul 17 '18 at 13:19
0

I found the answer in this query : Ligtning Component: Css class for uiOutputText (our website :D)

In fact, I must leave the space between .THIS and the class name:

So, it's: .THIS.modifTailleListe { margin:auto; width:50%; }

And it works.

Thank you a lot.

Have a good afternoon.

-1

try to put your CSS inside .THIS .slds-form-element{

    .THIS .slds-form-element{
margin:auto;
    width:50%;
 }

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.