How to increase skeleton css textarea height

Question

Skeleton css has a fixed textarea height. This is the code for it.

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }

I've tried my normal solution but it doesn't work.

textarea.u-full-height {
    height: 100%;
}

Any ideas?

Answer 1

The percentage height won't work. However, there's a way around it, and you don't have to use a fixed height!

CSS

textarea.u-full-height {
    height: 100vh;
} 

100vh sets the height to 100% of the viewport height. This property can be very useful and is a widely supported CSS property among browsers.

See it in action: https://jsfiddle.net/6fhLhcs9/

Let me know if you have further questions!

Answer 2

Just remove the % and .u-full-height and add a value to it in pixels.

Answer 3

If Skeleton is declared after your code - the code may have been overwritten.

or

In order for a percentage value to work for height, the parent's height must be determined.

This should works:

<div style="height:500px">
 <textarea class="u-full-height"><textarea/>
</div>

Now the textarea have a height of 500px due of the parent element.