How to Prevent the Textarea from Stretching Beyond His Parent Div Element? (Google-Chrome Issue Only)

How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

To disable resizing completely:

textarea {
    resize: none;
}

To allow only vertical resizing:

textarea {
    resize: vertical;
}

To allow only horizontal resizing:

textarea {
    resize: horizontal;
}

Or you can limit size:

textarea {
    max-width: 100px; 
    max-height: 100px;
}

To limit size to parents width and/or height:

textarea {
    max-width: 100%; 
    max-height: 100%;
}

How to prevent textarea content from overflowing into padding?

I could not find a way of doing it with padding but the same sort of effect can be achieved by setting the top border of the textarea instead of the padding:

body {
    background: grey;
}
textarea {
    width: 100%;
    margin: 0;
    border-top-width: 1em;
    border-top-color: white;
    resize: none;
}

<body>
    <textarea name="" id="" cols="30" rows="4"></textarea>
</body>

Make child element go through beyond its parent width

I make a demo for you.

.child1, .child3, .child4{  width: 100px;  float: left;  border: 1px solid red;  text-align: center;  padding: 10px;}
.child2, .child5{  width: 300px;  float: left;  border: 1px solid yellow;  text-align: center;  padding: 10px;}
.parent{  width: 1500px;}
.scroll{  max-width: 500px;  width: 100%;  overflow-x: auto;  border: 1px solid #000;  padding: 30px;}

<div class="scroll">  <div class="parent">     <div class="child1">Child Element</div>     <div class="child2">Child Element</div>     <div class="child3">Child Element</div>     <div class="child4">Child Element</div>     <div class="child5">Child Element</div>  </div></div>

avoid translateX going beyond parent width - CSS

Add overflow: hidden to the parent element (.wrapper).

Prevent textarea from clearing out when a new text is typed in

Add this to your onClick event:

if (this.value == 'No feedback provided') this.value = '';

...
Note that you only targeting click! what about keyboard navigation? use onfocus instead of onclick:

<textarea style="width: 95%;" rows="6" name="feedback[<?=$r_uid;?>]" disabled="disabled" 
onfocus="if (this.value == 'No feedback provided') this.value = '';" onblur="this.value=!this.value?'No feedback provided':this.value;" maxlength="800"></textarea>

Note that inline scripts are deprecated and hard to read and maintain.

Ionic-angular ion-textarea's height shrink

bad but works:

@ViewChild(IonTextarea, {static: false}) ionTextarea: IonTextarea;

async ngAfterViewInit(): Promise<void> {
  await this.checkTextarea();
}

async checkTextarea() {
 return this.ionTextarea.getInputElement().then((element) => {
  if (element.style.height == '0px') {
    return element.style.height = 'auto';
  } else {
    setTimeout(() => this.checkTextarea(), 100)
  }
  
 })
}