1

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?

enter image description here

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>
2
  • work around if i use ui:inputDate inside the table instead of lightning:input type date it shows fine,
    – sdandamud1
    Commented Jul 5, 2019 at 12:56
  • Not ideal, but I'll take it. Thanks
    – Jay
    Commented Jul 17, 2019 at 17:49

1 Answer 1

2

Two options here.

I discovered that using css with the following will work:

.THIS table {
    table-layout: fixed;
}

Another option suggested by sdandamud1 is to use ui:inputDate instead of lightning:input type date.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .