0

Using the SLDS system, I am having issues vertically centering the components. I am trying to have the street, city lightning:inputs and the search button the same level as the never,cold,active buttons, like in the picture below. Please advise!

enter image description here

                    <table class="slds-p-around_large">
                    <tbody>
                        <tr >
                            <td>
                                <div class="slds-p-around_x-small">
                                    <lightning:input aura:id="bStreet" placeholder="Street Name"/>
                                </div>
                            </td>
                            <td>
                                <div class="slds-p-around_xxx-small">
                                    <lightning:input aura:id="bCity" placeholder="City"/>
                                </div>
                            </td>
                            <td style="margin-top:10px">
                                <button class="slds-button slds-button_brand" onclick="{!c.searchAddress}">Search</button>
                            </td>
                            <td>
                                <div class="slds-float_right slds-p-right_medium">
                                    <lightning:buttonGroup aura:id="filterBtnGroup">
                                        <lightning:button aura:id="btnNever" label="Never" variant="neutral" onclick="{! c.filterSelected }" value="never"/>
                                        <lightning:button aura:id="btnCold" label="Cold" variant="neutral" onclick="{! c.filterSelected }" value="cold"/>
                                        <lightning:button aura:id="btnActive" label="Active" variant="neutral" onclick="{! c.filterSelected }" value="active"/>
                                    </lightning:buttonGroup>
                                    <aura:if isTrue="{!v.clearBtnVisibility}">
                                        <lightning:button label="X" variant="destructive" onclick="{! c.filterSelected }" value="clear"/>
                                    </aura:if>
                                </div>
                            </td>
                        </tr>
                    </tbody>    
                </table>
0

I also faced this, it seems the box container h*w for buttons is less than the input box. I just used br tag before the buttons. See if this aligns your design.

 <td style="margin-top:10px">
                                <br/>
                                <button class="slds-button slds-button_brand" onclick="{!c.searchAddress}">Search</button>
                            </td>
                            <td>
                                <div class="slds-float_right slds-p-right_medium">
                                    <br/>
                                    <lightning:buttonGroup aura:id="filterBtnGroup">
                                        <lightning:button aura:id="btnNever" label="Never" variant="neutral" onclick="{! c.filterSelected }" value="never"/>
                                        <lightning:button aura:id="btnCold" label="Cold" variant="neutral" onclick="{! c.filterSelected }" value="cold"/>
                                        <lightning:button aura:id="btnActive" label="Active" variant="neutral" onclick="{! c.filterSelected }" value="active"/>
                                    </lightning:buttonGroup>
                                    <aura:if isTrue="{!v.clearBtnVisibility}">
                                        <lightning:button label="X" variant="destructive" onclick="{! c.filterSelected }" value="clear"/>
                                    </aura:if>
                                </div>
                            </td>

enter image description here

| improve this answer | |
  • it didn't make any difference. – sumchans Nov 26 '18 at 0:26
  • you tried placing it before td or after? – kritika Nov 26 '18 at 0:43
  • I placed it after Td. – sumchans Nov 26 '18 at 0:45
  • For me it did work. I have edited the comment with image and code please check. – kritika Nov 26 '18 at 0:54
  • Finally I got it working. Thanks for all the help. – sumchans Nov 26 '18 at 5:18
0

This was the solution. Got it from the stackexchange post below.

<lightning:input aura:id="bCity" placeholder="City" variant="label-hidden"/>

lightning:input vertical alignment in table cell

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.