Issue #2074 - fix jumping error message

webcompat · Feb 28, 2018 · 992223f · 992223f
1 parent 0415e85
commit 992223f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/webcompat/static/css/src/form.css b/webcompat/static/css/src/form.css
@@ -60,6 +60,10 @@
   padding-left: 7px;
 }
 
+.form-label-message .form-label {
+  display: inline-block;
+}
+
 /* form message: error */
 .form-message-error {
   color: var(--color-error);

diff --git a/webcompat/templates/home-page/form.html b/webcompat/templates/home-page/form.html
@@ -11,7 +11,7 @@ <h1 class="headline-1">Report Site Issue</h1>
 >
   <div class="grid-cell">
     <div class="form-text form-element js-Form-group">
-      <div class="js-Form-information">
+      <div class="js-Form-information form-label-message">
         {{ form.url.label(class_='form-label form-required') }}
         {% if form.url.errors %}
           {% for error in form.url.errors %}
@@ -25,7 +25,7 @@ <h1 class="headline-1">Report Site Issue</h1>
          <span class="form-input-validation check error"></span>
     </div>
     <div class="form-radio form-element js-Form-group">
-      <div class="js-Form-information">
+      <div class="js-Form-information form-label-message">
         <label class="form-label form-required" for="problem_category">Type of bug</label>
         {% if form.problem_category.errors %}
           {% for error in form.problem_category.errors %}
@@ -40,7 +40,7 @@ <h1 class="headline-1">Report Site Issue</h1>
       {% endfor %}
     </div>
     <div class="form-text form-element js-Form-group">
-      <div class="js-Form-information">
+      <div class="js-Form-information form-label-message">
         {{ form.description.label(class_='form-label form-required') }}
         {% if form.description.errors %}
           {% for error in form.description.errors %}
@@ -70,7 +70,7 @@ <h1 class="headline-1">Report Site Issue</h1>
       <span class="form-input-validation check"></span>
     </div>
     <div class="form-radio form-element js-Form-group">
-      <div class="js-Form-information">
+      <div class="js-Form-information form-label-message">
         {{ form.browser_test.label(class_='form-label') }}
         {% if form.browser_test.errors %}
           {% for error in form.browser_test.errors %}