0

I have a lightning:layout with a lightning:layoutItem, containing a lightning:select.

I want the row in the layout to be only the height of the select box but I can't figure out how to remove the space above it.

Here is my component:

    <div class="slds-is-relative">
    <lightning:layout verticalAlign="start">
        <lightning:layoutItem padding="horizontal-small" size="1">
            <lightning:select
                aura:id="select"
                name="regionFilter"
                value="{!v.filterSelectedValueRegion}"
                onchange="{!c.applyRegionFilter}"
                class="slds-m-bottom_medium"
                >
                <option value="Default">-- Region --</option>
                <option value="All">All</option>
                <aura:iteration var="filterRegionOption" items="{!v.filterOptionsRegion}">
                    <option
                        value="{!filterRegionOption}"
                        text="{!filterRegionOption}"
                        selected="{!filterRegionOption.selected}"
                        />
                </aura:iteration>
            </lightning:select>
        </lightning:layoutItem>
    </lightning:layout>

This is how it renders:

screenshot 1

I want to reduce the vertical space between 'Home' and region selector.

This is what the inspector shows:

screenshot 2

screenshot 3

How do I get rid of that space above and below the region select box?

1

Further to comment from @sfdcfox above I tested some variations. This is the component:

<aura:component>
<aura:attribute name="Option1" type="String" default="Option 1"/>

<div class="slds-is-relative">
<lightning:layout>
    <lightning:layoutItem padding="horizontal-small">
            <lightning:button variant="brand" label="My Button 1"/>
    </lightning:layoutItem>
    <lightning:layoutItem padding="horizontal-small">
            <lightning:button variant="brand" label="My Button 2"/>
    </lightning:layoutItem>
    <lightning:layoutItem padding="horizontal-small">
        <lightning:select
            aura:id="select1"
            name="regionFilter1"
            label="A"
            variant="label-hidden"
        >
            <option value="Option 1">Option 1</option>
            <option value="Option 2">Option 2</option>
        </lightning:select>
    </lightning:layoutItem>
    <lightning:layoutItem padding="horizontal-small">
        <lightning:select
            aura:id="select2"
            name="regionFilter2"
            label="A"
            variant="label-inline"
        >
            <option value="Option 1">Option 1</option>
            <option value="Option 2">Option 2</option>
        </lightning:select>
    </lightning:layoutItem>
    <lightning:layoutItem padding="horizontal-small">
        <select id="sel">
            <option value="{!v.Option1}">{!v.Option1}</option>
            <option value="Option 2">Option 2</option>
        </select>
    </lightning:layoutItem>
</lightning:layout>
</div>

and this is the result:

screenshot

Interestingly, the variant="label-inline" on 'select2' seems to have no effect, but the lightning:select docs state 'Use label-inline to horizontally align the label and input field.'

| improve this answer | |
0

Some padding is inevitable, because of the nature of form elements in SLDS, but you can reduce the space by hiding the label:

<lightning:select variant="label-hidden" ...
| improve this answer | |
  • Thank you, unfortunately it didn't change the display, with or without also adding a label="..." attribute :-( – MikeA Feb 21 at 13:17
  • @MikeA The only other option would be to use a normal <select> element instead of the lightning:select. – sfdcfox Feb 21 at 13:25
  • That is the answer @sfdcfox, "use a normal <select> element instead of the lightning:select" – MikeA Feb 29 at 23:33

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.