Dealing with textarea height crossbrowser - html

Question

I'm trying to absolute position a button underneath a textarea, I have some content next to the button I'd like to have it not push down.
html {
background: #1f252e;
color: white;
font-family: sans-serif;
}
.commentForm {
position: relative;
}
.textInput {
padding: 10px;
background: rgba(0, 0, 0, 0.08);
border: solid 1px rgba(255, 255, 255, 0.05);
position: relative;
border-radius: 2px;
height: 55px;
overflow: hidden;
z-index: 1;
}
.textInput__input {
color: white;
width: 100%;
resize: none;
font-size: 14px;
font-family: 'Roboto', sans-serif;
background: transparent;
margin: 0px;
outline: none;
border: none;
display: block;
}
.textInput:hover {
cursor: text;
background: rgba(255, 255, 255, 0.05);
}
.formField.hasErrors .wd-input {
border-color: #e43e22;
}
.wd-form__footer {
margin-top: 15px;
display: flex;
}
.formField__error {
margin-top: 15px;
font-size: 13px;
color: #e43e22;
}
.wd-button--primary {
background: rgba(0, 0, 0, 0.25);
height: 35px;
min-width: 50px;
padding: 10px;
position: relative;
border-radius: 2px;
overflow: hidden;
z-index: 1;
font-size: 14px;
}
.wd-button {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
box-sizing: border-box;
}
.wd-form__status {
flex-grow: 1;
}
.commentForm__actions {
position: absolute;
top: 90px;
right: 0px;
}
<div class="commentForm wd-form">
<div class="form">
<div class="formField hasErrors" style="max-width: 100%;">
<div class="textInput wd-input ">
<textarea rows="3" class="textInput__input" placeholder="Type a comment..."></textarea>
</div>
<div class="formField__error">15 more characters to go...</div>
</div>
<div class="wd-form__footer">
<div class="wd-form__status">
<div class="formStatus"></div>
</div>
<div class="commentForm__actions wd-form__actions">
<a role="button" class="wd-button wd-button--primary">
<div class="wd-button__label">Post comment</div>
</a>
</div>
</div>
</div>
</div>
Now, in Firefox and Chrome I get very different results.
In Chrome the button is aligned properly:
But in firefox, the button is clipping with the textarea:
This is because the text area height is different in Firefox than it is in Chrome. How do I fix this?

Answer 1

I tend to stay away from position: absolute if I can. You can instead use float: right and a negative margin.
html {
background: #1f252e;
color: white;
font-family: sans-serif;
}
.commentForm {
position: relative;
}
.textInput {
padding: 10px;
background: rgba(0, 0, 0, 0.08);
border: solid 1px rgba(255, 255, 255, 0.05);
position: relative;
border-radius: 2px;
height: 55px;
overflow: hidden;
z-index: 1;
}
.textInput__input {
color: white;
width: 100%;
resize: none;
font-size: 14px;
font-family: 'Roboto', sans-serif;
background: transparent;
margin: 0px;
outline: none;
border: none;
display: block;
}
.textInput:hover {
cursor: text;
background: rgba(255, 255, 255, 0.05);
}
.formField.hasErrors .wd-input {
border-color: #e43e22;
}
.wd-form__footer {
margin-top: -15px;
}
.formField__error {
margin-top: 15px;
font-size: 13px;
color: #e43e22;
}
.wd-button--primary {
background: rgba(0, 0, 0, 0.25);
height: 35px;
min-width: 50px;
padding: 10px;
position: relative;
border-radius: 2px;
overflow: hidden;
z-index: 1;
font-size: 14px;
}
.wd-button {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
box-sizing: border-box;
}
.wd-form__status {
flex-grow: 1;
}
.commentForm__actions {
position: absolute;
top: 90px;
right: 0px;
}
<div class="commentForm wd-form">
<div class="form">
<div class="formField hasErrors" style="max-width: 100%;">
<div class="textInput wd-input ">
<textarea rows="3" class="textInput__input" placeholder="Type a comment..."></textarea>
</div>
<div class="formField__error">15 more characters to go...</div>
</div>
<div class="wd-form__footer">
<div class="wd-form__status">
<div class="formStatus"></div>
</div>
<div class="commentForm__actions wd-form__actions">
<a role="button" class="wd-button wd-button--primary">
<div class="wd-button__label">Post comment</div>
</a>
</div>
</div>
</div>
</div>