Solution 1 :

this issue not show on all browsers. in my browsers chrome(window) is obvious.

the line is under textarea.

enter image description here

======================================================

I think is baseline is different.

Baseline inconsistency

The HTML specification doesn’t define where the baseline of a is, so different browsers set it to different positions. For Gecko, the baseline is set on the baseline of the first line of the textarea’s first line, on another browser it may be set on the bottom of the box. Don’t use vertical-align: baseline on it; the behavior is unpredictable.

reference:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

    * {
      box-sizing: border-box;
    }

    .container {
      position: relative;
    }

    textarea,
    input {
      border: none;
      border-bottom: 3px solid #e6e6e6;
      width: 100%;
      height: 50px;
      resize: vertical;
      /* see this */
      vertical-align: middle;
    }

    .anim-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      width: 0%;
      background-color: blue;
      -webkit-transition: width .3s;
      transition: width .3s;
    }

    textarea:focus+.anim-bar,
    input:focus+.anim-bar {
      width: 100%;
    }
  <h1>Works fine on input :)</h1>
  <div class="container">
    <input type="text">
    <span class="anim-bar"></span>
  </div>

  <h1>Error on textarea :( </h1>
  <div class="container">
    <textarea></textarea>
    <span class="anim-bar"></span>
  </div>

==================================================

Solution 2 :

Adding CSS styling to the textarea resize: none; will stop the textarea from being adjustable.

I added the styling to the CSS area and inline the HTML to show both ways it can be done.

* {
  box-sizing: border-box;
}

.container {
  position: relative;
}
textarea {
  resize:none; //adding styling in css file
}
textarea,
input {
  border: none;
  border-bottom: 3px solid #e6e6e6;
  width: 100%;
  height: 50px;
  resize: vertical;
}

.anim-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background-color: blue;
  -webkit-transition: width .3s;
  transition: width .3s;
}

textarea:focus+.anim-bar,
input:focus+.anim-bar {
  width: 100%;
}
<h1>Works fine on input :)</h1>
<div class="container">
  <input type="text">
  <span class="anim-bar"></span>
</div>

<h1>Error on textarea :( </h1>
<div class="container">
  <textarea style="resize:none;"></textarea> <!--Adding CSS styling inline-->
  <span class="anim-bar"></span>
</div>

Problem :

I have a simple border bottom animation with another element and it works fine on simple input element but it’s not work properly on a textarea. (If I should use javaScript then please advise a solution)

How can I fix the height of textarea?

*{
    box-sizing: border-box; 
}

.container {
  position: relative;
}

textarea,
input {
  border: none;
  border-bottom: 3px solid #e6e6e6;
  width: 100%;
  height: 50px;
  resize: none;
}

.anim-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background-color: blue;
  -webkit-transition: width .3s;
  transition: width .3s;
}

textarea:focus + .anim-bar,
input:focus + .anim-bar {
  width: 100%;
}
<h1>Works fine on input :)</h1>
<div class="container">
    <input type="text">
    <span class="anim-bar"></span>
</div>

<h1>Cross the container box- textarea :( </h1>
<div class="container">
    <textarea></textarea>
    <span class="anim-bar"></span>
</div>

Comments

Comment posted by darkhouse

Are you trying to stop the textarea from being adjustable?

Comment posted by Md Alex

@darkhouse Yes.

Comment posted by darkhouse

you can add a style to the textarea

Comment posted by Md Alex

Sorry, It does not make any sense

Comment posted by see sharper

I don’t see an error…

Comment posted by Always Helping

The OP is already using

Comment posted by darkhouse

@AlwaysHelping The OP has

Comment posted by Always Helping

You answer is doing the same thing what the OP is doing. Its not considered an answer. The results are the EXACT same.

By

Leave a Reply

Your email address will not be published. Required fields are marked *