How to set height to "default + 10 pixels" with css?

Question

I'm using the Bootswatch Paper theme in my website and I also want to use the Floating labels as demonstrated in this fiddle: http://jsfiddle.net/wkqsqajn/

This works fine, but I now get in trouble on my own site. The css makes .form-group to be a fixed height to give space for the floating label:

.form-group {
    display: flex;
    height: 55px;
}

unfortunately this messes up my other form inputs, such as lists of checkboxes and textareas. I made another fiddle to show the trouble I'm having (try typing in the textarea): http://jsfiddle.net/ee64ef5o/2/

The problem is that the form-group gets a fixed height. Isn't it somehow possible to set the height an X-number of pixels higher than what the element normally uses, to provide space for the floating label? Or are there any other ways to solve this?

All tips are welcome!

If you're more concerned using your form UI than its much better to wrap your form inside a `
` having some class and then write `form-group` class related to that container accordingly. — vivekkupadhyay, Sep 01 '15 at 09:59
Using `rows="1"` instead of `rows="2"` does solves ur issue... but resizing the textarea then entails other issues... — Ahs N, Sep 01 '15 at 10:06

thetailor.de · Answer 1 · 2015-09-01T10:09:05.930

2

You could also try using a transparant border.

border-top: 10px solid transparent;

EDIT: It sort of works by giving the element height: 50%;

http://jsfiddle.net/ee64ef5o/6/

edited Sep 01 '15 at 10:09

answered Sep 01 '15 at 09:57

thetailor.de

185
2
13

But then the textarea cannot have more rows than 1: http://jsfiddle.net/ee64ef5o/9/ – kramer65 Sep 01 '15 at 10:27
You are right, but it wasn´t resizeable anyway right? – thetailor.de Sep 01 '15 at 10:39
Not resizable, but it did show two rows at once. Now it can only show one row at a time. – kramer65 Sep 01 '15 at 10:44
So You want the label to be more far away from the textarea? – thetailor.de Sep 01 '15 at 10:54
I tried with position absolut. Here is another result: http://jsfiddle.net/ee64ef5o/10/ – thetailor.de Sep 01 '15 at 11:03
You could give the label with the textarea a different class and add top: -15px or something like that. – thetailor.de Sep 01 '15 at 11:04
Unfortunately in your latest fiddle, it also moves the floating labels of the text inputs up. I now thought of making a separate floating label for the inputs and just make a custom floating label implementation for the form inputs. Any tip on how I could do this? – kramer65 Sep 01 '15 at 12:32

How to set height to "default + 10 pixels" with css?

1 Answers1