function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
rtriggrtrigg 

lightning:input doesn't expand to fill enclosing div

Hi,

I'm finding that the ui:inputText component expands to fill the enclosing div, whereas lightning:input doesn't.  Am I missing something obvious?  If not, is there a workaround?

I've got this sort of structure:

        <lightning:layout horizontalAlign="space" multipleRows="true">
             ...
             <lightning:layoutItem flexibility="auto"
                                  padding="horizontal-small"
                                  size="8">
                <div class="{!v.requiresComment ? '' : 'hidden'}">
                    <!-- ui:inputText expands to fill enclosing div. Why doesn't lightning:input? -->
                    <!-- <ui:inputText aura:id="Comment"
                                  class="slds-input"
                                  value="{!v.valueComment}"
                                  change="{!c.saveChange}"/> -->
                    <lightning:input type="text"
                                     class="maxwidth"
                                     aura:id="Comment"
                                     name="Comment"
                                     label="Enter a text comment"
                                     value="{!v.valueComment}"
                                     onchange="{!c.saveChange}"
                                     variant="label-hidden"
                                     />
                </div>
            </lightning:layoutItem>
        </lightning:layout>

I tried adding a maxwidth css class:

.THIS .maxwidth {
    width: 100%;
}

But it only affects the exterior div of lightning:input.  There seems to be an interior div that retains fixed width.  I can't figure out how to affect that.

Thanks!

- Randy