[TextaArea] Labeled textarea hides text behind icon label

[perezdev]

If you setup a left corner labeled input, the text is automatically padded to prevent overlap with the icon:

<div class="ui small left corner labeled input">
    <input type="text" />

    <div class="ui left corner label">
        <i class="asterisk icon"></i>
    </div>
</div>

Result:

But if you do the same with a TextArea, the icon label overlaps the text:

<div class="ui left corner labeled input">
    <div class="ui left corner label">
        <i class="asterisk icon"></i>
    </div>
    <textarea rows="2" asp-for="RequestInput.Description"></textarea>
</div>

I looked and saw that the input has a 2.5em left padding. Adding that to the textarea fixes the issue.

<div class="ui left corner labeled input">
    <div class="ui left corner label">
        <i class="asterisk icon"></i>
    </div>
    <textarea rows="2" style="padding-left: 2.5em !important;"></textarea>
</div>

[lubber-de]

I labeled this an enhancement instead of a bug, because basically input was not designed to support textarea that way. But it is a nice addition and was not complex to add, so thanks for the idea, it is supposed to be in the next release 😉

[perezdev]

@lubber-de

Ah. That makes sense. That explains why I didn't find references to textarea. Haha. Thanks a lot for adding it.