htmlcssskeleton-css-boilerplate

How to increase skeleton css textarea height

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?

Solution

  • 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!