You need to sign in to do that
Don't have an account?
rtrigg
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
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