The date picker is not displaying properly, as shown in the image below. The last column (Saturday) seems to be bleeding off the edge of the calendar. This faulty display does not change when I zoom in or out with the browser. I am not using css or any custom styling attributes. Is there a way to fix this faulty display?
Here is the code. The issue seems to stem from the fact that the date picker is inside a table. What can I do to keep the date picker inside the table without the faulty display?
<table class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th><span class="slds-truncate slds-align_absolute-center" title="Estimated Live to Site">Est LTS</span></th>
<th><span class="slds-truncate slds-align_absolute-center" title="Estimated Total Online Volume">eTOV</span></th>
<th><span class="slds-truncate slds-align_absolute-center" title="Product Take Rate">Product Take Rate</span></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.OLIList}" var="oli">
<tr>
<td scope="row">
<div class="slds-truncate">
<lightning:input type="date" value="{!oli.date__c}" placeholder="enter date..." />
</div>
</td>
<td scope="row">
<div class="slds-truncate">
<lightning:input type="number" formatter="currency" step="0.01" value="{!oli.eTOV__c}" placeholder="enter amount..." />
</div>
</td>
<td scope="row">
<div class="slds-truncate">
<lightning:input type="number" formatter="percent-fixed" step="0.01" value="{!oli.OF_Take_Rate__c}" placeholder="enter percent..." />
</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
ui:inputDate
inside the table instead oflightning:input
typedate
it shows fine,