0

I have a lightning:input form inside the body of a table tag in order to let the user insert some text given certain circumstances

component code

.....

<table class="slds-table slds-table_fixed-layout slds-table--bordered slds-table_col-bordered slds-border_left slds-border_right">
    <tbody>
        <aura:iteration items="{!v.pageMonitorList}" var="item">
            <tr style="height:2rem;">
                ....
                <td data-label="Motivazione">
                    <aura:if isTrue="{!item.TempiInvio__c>5}">
                        <div class="slds-truncate slds-text-align_center">
                            <lightning:input class="field" name="inputMotivazione" variant="label-hidden" maxlength="250" value="{!item.Motivazione__c}"/>
                        </div>
                    </aura:if>
                </td>
                ....
            </tr>
        </aura:iteration>
    </tbody>
</table>

</aura:component>

The form is visibile or not depending on the value of another column of the table. This fact implies that if I wanted to set table row height e.g. to 2rem, the rows containing the form would appear vertically bigger than the others.

Clearly I could increase the global height of the table rows through the global style property, but I wonder if there is a way to reduce the height of the lightning:input form instead.

Adding the attribute style="height:2rem" to the lightning:input tag or the div containing it does not work. I thought that modifying the padding/margin of the text inside the form could work, i.e.

CSS code

.THIS .field input {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

but it seems that only the horizontal direction is affected, and not the vertical one.

Any help or suggestion would be greatly appreciated.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.