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.:
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>
Best Answer
Assuming you're using a form, you just need to make sure you've got the right CSS styles:
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: