1

so I need to use a lightning:input type="search" searchbar, and I also need to put a button to the right of the searchbar on the same line. e.g.: searchbar image with button to the right

the issue is, the only way I could figure out to get the searchbar not to span the whole width of the screen was by setting the width of the containing 'span' in pixels:

<span id="{!GlobalId + '_search'}" onkeyup="{!c.onKeyup}" style="{!'width:'+v.width+';'}">
        <form style="{!'width:'+v.width+';'}" id="{!GlobalId + '_width'}">
            <lightning:input type="search" label="{!v.label}" name="{!v.name}" aura:id="bar" placeholder="{!v.placeHolder}"/>
        </form>
    </span>

The searchbar stays the same width when the user resizes the screen or when the scroll bar appears, and the view gets all messed up. I tried resetting the width dynamically with v.width, a window resize event listener, and a function to determine if the scrollbar is present, but it doesn't seem to be working right (and there's got to be a better way than that). My first instinct was to use percents, but those don't work either.

Anyone know how to do this right?

EDIT: some test code I'm using:

<aura:component >

<div class="slds-float_right">
    <br/>
    <ui:button label="All" class="slds-button_neutral"/>
</div>

<div class="slds-form--stacked">
    <lightning:input type="search" name="label" label="Label" placeholder="placeholder"/>
</div>

2

Assuming you're using a form, you just need to make sure you've got the right CSS styles:

<div class="slds-form--stacked">
  <lightning:input ...
</div>

If you do this, your form element should be reactive. You should be using SLDS, because the <lightning: elements are meant to be used in an SLDS context.

If you're using a grid, specify a size:

<lightning:input class="slds-size--1-of-1" ...
2
  • Thanks for the response, the good news is div class="slds-form--stacked" will let me set the width in percentages, but unless I set the width the searchbar still spans the whole width of the page and shoves the button into the searchbar's label section. It's still a lot better than what I had, but I wonder if there's any way to remove the width setting entirely? Sep 7 '17 at 17:22
  • @Bend'Straw stacked assumes that the buttons will be on their own line. Maybe you'll want to use a grid for that element instead.
    – sfdcfox
    Sep 7 '17 at 21:37
2

This is how I would go about it. This method takes advantage of the lightning components that are provided within Salesforce. The following will set the input to grow the rest of the width parent container.

<lightning:layout verticalAlign="end">
    <lightning:layoutItem flexibility="grow">
        <lightning:input type="search" label="{!v.testLabel}" name="{!v.testName}" aura:id="bar" placeholder="{!v.placeHolder}"/>
    </lightning:layoutItem>
    <lightning:layoutItem class="slds-p-left_x-small">
        <lightning:button variant="brand" label="{!v.buttonLabel}" onclick="{!c.handleClick}" />
    </lightning:layoutItem>
</lightning:layout>

Results: result To set a width you can do something like:

<lightning:layoutItem size="5">
    <lightning:input type="search" label="{!v.testLabel}" name="{!v.testName}" aura:id="bar" placeholder="{!v.placeHolder}"/>
</lightning:layoutItem>

This will make the input take up 5 of the 12 parts the container is broken into. For more information check out:

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_layout.htm

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.