[SalesForce] Table row using slds is not displayed in full width

I created a table with several lightning:select and an input that act as filters for another data table displaying rows from a custom object. I'm using SLDS to make it responsive but after I added the styles for the sizes the lightning:select and inputs are not displayed in the full with available.

enter image description here

So for several selects there are varying sizes and it looks messy.

Here's a sample code:

<table class="searchTable">
    <tr>
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-3">
                <th>
                    <lightning:select aura:id="productLine" name="productLine" label="Product Line">
                        <option value="">- Select a Product Line -</option>
                        <option value="">Option A</option>
                        <option value="">Option B</option>
                    </lightning:select>
                </th>
            </div>
        </div>
    </tr>
</table>

Best Answer

Since I'm not familiar with 

<lightning:select />

tag, I would go with the native select tag in HTML and styled with SLDS. However, you will need to use the grid otherwise, the select bar will extend the width of the screen.

You can easily put this code into your row tag (and then, you may not need to use slds-grid to align). You will probably need to play around with it a little bit.

<div class="slds-grid">
    <div class="slds-form-element">
      <label class="slds-form-element__label" for="select-01">Product Line</label>
      <div class="slds-form-element__control">
        <div class="slds-select_container">
          <select id="select-01" class="slds-select">
            <option>Option One</option>
            <option>Option Two</option>
            <option>Option Three</option>
          </select>
        </div>
      </div>
      <label class="slds-form-element__label" for="select-01">Instrument Type</label>
      <div class="slds-form-element__control">
        <div class="slds-select_container">
          <select id="select-01" class="slds-select">
            <option>Option One</option>
            <option>Option Two</option>
            <option>Option Three</option>
          </select>
        </div>
      </div>
    </div>
</div>

You can also set the margin widths of the slds-form-element.

I took this example from lightning's design documentation: Lightning Design System - Select

Hope you find this helpful!

Related Topic