Set common y-origin for validation bubbles

I believe this will keep the misalignment from happening across browsers. Sets the top left corner to the top left corner of the input block.

Resolves #770
This commit is contained in:
Ray Schamp 2016-07-27 20:15:53 -04:00
parent 27a7b98ab9
commit ecbbeb5612
2 changed files with 7 additions and 18 deletions

View file

@ -25,8 +25,9 @@
$arrow-border-width: 1rem;
display: block;
position: absolute;
top: 0;
left: 0;
transform: translate(20rem, -4rem);
transform: translate(16rem, 0);
margin-left: $arrow-border-width;
border: 1px solid $active-gray;
border-radius: 5px;
@ -58,15 +59,7 @@
}
}
.checkbox-row,
.textarea-row {
.validation-message {
transform: translate(20rem, 0);
}
}
.form {
position: relative;
padding: 3rem 4rem;
.card-button {
@ -81,6 +74,10 @@
border: 1px solid $ui-orange;
}
}
.col-sm-9 {
position: relative;
}
}
}
}

View file

@ -80,7 +80,7 @@
&.organization-step {
.checkbox-group {
.validation-message {
transform: translate(20rem, -16rem);
transform: translate(16rem, -16rem);
}
}
@ -95,14 +95,6 @@
}
}
&.address-step {
.select {
.validation-message {
transform: translate(20rem, .5rem);
}
}
}
&.usescratch-step {
.form {
.form-group {