Ionic TextAreas getting too big

Question

I have text boxes in an ion-skeleton project that are nested on a list. The text box is not displayed completely. Part of it is off screen.

<div class="list" style="width:100%;"> <label class="item item-input" style="max-width:100%"> <span class=input-label>Description</span> <textarea required></textarea> </label> </div> 

what happens is that the width of the text field becomes too large, span.width + textarea.width> 100%.

If I manually changed the width of the textarea a little, it will be shown at 100%.

I set the max-width of this parent to 100%, so it should not increase, but it does.

How can I prevent this behavior and let the text box not grow across the screen.

Answer 1

 <div class="list" style="width:100%;"> <label class="item item-input" style="max-width:100%"> <span class=input-label>Description</span> <textarea rows="4" col="12" required></textarea> </label> </div> 

Try it. Limit the text field to the col attribute.