--- a/client/src/components/admin/usermanagement/Userdetail.vue	Fri Dec 07 12:21:55 2018 +0100
+++ b/client/src/components/admin/usermanagement/Userdetail.vue	Fri Dec 07 12:26:26 2018 +0100
@@ -1,163 +1,172 @@
 <template>
-  <div class="userdetails h-100 mt-3 mr-auto shadow fadeIn animated">
-    <div class="card">
-      <h6
-        class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
-      >
-        {{ this.cardHeader }}
-        <span @click="closeDetailview" class="closebutton">
-          <font-awesome-icon icon="times"></font-awesome-icon>
-        </span>
-      </h6>
-      <div class="card-body">
-        <form @submit.prevent="save" class="ml-3">
-          <div class="formfields">
-            <div v-if="currentUser.isNew" class="form-group row">
-              <label for="user"> <translate>Username</translate> </label>
-              <input
-                type="user"
-                :placeholder="userNamePlaceholder"
-                class="form-control form-control-sm"
-                id="user"
-                aria-describedby="userHelp"
-                v-model="currentUser.user"
-              />
-              <div v-show="errors.user" class="text-danger">
-                <small>
-                  <font-awesome-icon
-                    icon="exclamation-triangle"
-                  ></font-awesome-icon>
-                  {{ errors.user }}
-                </small>
-              </div>
-            </div>
-            <div class="form-group row">
-              <label for="country"> <translate>Country</translate> </label>
-              <select
-                class="form-control form-control-sm"
-                v-on:change="validateCountry"
-                v-model="currentUser.country"
-              >
-                <option disabled value>
-                  <translate>Please select one</translate>
-                </option>
-                <option
-                  v-for="country in countries"
-                  v-bind:value="country"
-                  v-bind:key="country"
-                  >{{ country }}</option
-                >
-              </select>
-              <div v-show="errors.country" class="text-danger">
-                <small>
-                  <font-awesome-icon
-                    icon="exclamation-triangle"
-                  ></font-awesome-icon>
-                  {{ errors.country }}
-                </small>
-              </div>
+  <div class="userdetails mt-3 shadow fadeIn animated card">
+    <h6
+      class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
+    >
+      {{ this.cardHeader }}
+      <span @click="closeDetailview" class="closebutton">
+        <font-awesome-icon icon="times"></font-awesome-icon>
+      </span>
+    </h6>
+    <div class="card-body">
+      <form @submit.prevent="save" class="ml-3">
+        <div class="formfields">
+          <div v-if="currentUser.isNew" class="form-group row">
+            <label for="user"> <translate>Username</translate> </label>
+            <input
+              type="user"
+              :placeholder="userNamePlaceholder"
+              class="form-control form-control-sm"
+              id="user"
+              aria-describedby="userHelp"
+              v-model="currentUser.user"
+            />
+            <div v-show="errors.user" class="text-danger">
+              <small>
+                <font-awesome-icon
+                  icon="exclamation-triangle"
+                ></font-awesome-icon>
+                {{ errors.user }}
+              </small>
             </div>
-            <div class="form-group row">
-              <label for="email"> <translate>Email address</translate> </label>
-              <input
-                type="email"
-                v-on:change="validateEmailaddress"
-                class="form-control form-control-sm"
-                id="email"
-                aria-describedby="emailHelp"
-                v-model="currentUser.email"
-              />
-              <div v-show="errors.email" class="text-danger">
-                <small>
-                  <font-awesome-icon
-                    icon="exclamation-triangle"
-                  ></font-awesome-icon>
-                  {{ errors.email }}
-                </small>
-              </div>
-            </div>
-            <div class="form-group row">
-              <label for="role"> <translate>Role</translate> </label>
-              <select
-                class="form-control form-control-sm"
-                v-on:change="validateRole"
-                v-model="currentUser.role"
+          </div>
+          <div class="form-group row">
+            <label for="country"> <translate>Country</translate> </label>
+            <select
+              class="form-control form-control-sm"
+              v-on:change="validateCountry"
+              v-model="currentUser.country"
+            >
+              <option disabled value>
+                <translate>Please select one</translate>
+              </option>
+              <option
+                v-for="country in countries"
+                v-bind:value="country"
+                v-bind:key="country"
+                >{{ country }}</option
               >
-                <option disabled value>
-                  <translate>Please select one</translate>
-                </option>
-                <option value="sys_admin">
-                  <translate>Sysadmin</translate>
-                </option>
-                <option value="waterway_admin">
-                  <translate>Waterway Admin</translate>
-                </option>
-                <option value="waterway_user">
-                  <translate>Waterway User</translate>
-                </option>
-              </select>
-              <div v-show="errors.role" class="text-danger">
-                <small>
-                  <font-awesome-icon
-                    icon="exclamation-triangle"
-                  ></font-awesome-icon>
-                  {{ errors.role }}
-                </small>
-              </div>
-            </div>
-            <div class="form-group row">
-              <PasswordField
-                @fieldchange="passwordChanged"
-                :placeholder="passwordPlaceholder"
-                :label="passwordLabel"
-                :passworderrors="errors.password"
-              ></PasswordField>
-            </div>
-            <div class="form-group row">
-              <PasswordField
-                @fieldchange="passwordReChanged"
-                :placeholder="passwordRePlaceholder"
-                :label="passwordReLabel"
-                :passworderrors="errors.passwordre"
-              ></PasswordField>
+            </select>
+            <div v-show="errors.country" class="text-danger">
+              <small>
+                <font-awesome-icon
+                  icon="exclamation-triangle"
+                ></font-awesome-icon>
+                {{ errors.country }}
+              </small>
             </div>
           </div>
-          <div>
-            <button
-              type="submit"
-              :disabled="submitted"
-              class="shadow-sm btn btn-info pull-right"
-            >
-              <translate>Submit</translate>
-            </button>
+          <div class="form-group row">
+            <label for="email"> <translate>Email address</translate> </label>
+            <input
+              type="email"
+              v-on:change="validateEmailaddress"
+              class="form-control form-control-sm"
+              id="email"
+              aria-describedby="emailHelp"
+              v-model="currentUser.email"
+            />
+            <div v-show="errors.email" class="text-danger">
+              <small>
+                <font-awesome-icon
+                  icon="exclamation-triangle"
+                ></font-awesome-icon>
+                {{ errors.email }}
+              </small>
+            </div>
           </div>
-          <div
-            v-if="currentUser.role != 'waterway_user'"
-            class="form-group row d-flex flex-row justify-content-start mailbutton"
+          <div class="form-group row">
+            <label for="role"> <translate>Role</translate> </label>
+            <select
+              class="form-control form-control-sm"
+              v-on:change="validateRole"
+              v-model="currentUser.role"
+            >
+              <option disabled value>
+                <translate>Please select one</translate>
+              </option>
+              <option value="sys_admin">
+                <translate>Sysadmin</translate>
+              </option>
+              <option value="waterway_admin">
+                <translate>Waterway Admin</translate>
+              </option>
+              <option value="waterway_user">
+                <translate>Waterway User</translate>
+              </option>
+            </select>
+            <div v-show="errors.role" class="text-danger">
+              <small>
+                <font-awesome-icon
+                  icon="exclamation-triangle"
+                ></font-awesome-icon>
+                {{ errors.role }}
+              </small>
+            </div>
+          </div>
+          <div class="form-group row">
+            <PasswordField
+              @fieldchange="passwordChanged"
+              :placeholder="passwordPlaceholder"
+              :label="passwordLabel"
+              :passworderrors="errors.password"
+            ></PasswordField>
+          </div>
+          <div class="form-group row">
+            <PasswordField
+              @fieldchange="passwordReChanged"
+              :placeholder="passwordRePlaceholder"
+              :label="passwordReLabel"
+              :passworderrors="errors.passwordre"
+            ></PasswordField>
+          </div>
+        </div>
+        <div>
+          <button
+            type="submit"
+            :disabled="submitted"
+            class="shadow-sm btn btn-info submit-button"
           >
-            <a @click="sendTestMail" class="btn btn-light">
-              <font-awesome-icon icon="paper-plane"></font-awesome-icon>
-              <translate>Send testmail</translate>
-            </a>
-            <div v-if="mailsent"><translate>Mail was sent</translate></div>
-          </div>
-        </form>
-      </div>
+            <translate>Submit</translate>
+          </button>
+        </div>
+        <div
+          v-if="currentUser.role != 'waterway_user'"
+          class="form-group row d-flex flex-row justify-content-start mailbutton"
+        >
+          <a @click="sendTestMail" class="btn btn-light">
+            <font-awesome-icon icon="paper-plane"></font-awesome-icon>
+            <translate>Send testmail</translate>
+          </a>
+          <div v-if="mailsent"><translate>Mail was sent</translate></div>
+        </div>
+      </form>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.submit-button {
+  position: absolute;
+  right: $offset;
+  bottom: $offset;
+}
 .mailbutton {
   width: 12vw;
+  position: absolute;
+  left: $large-offset;
+  bottom: 0;
 }
 
 .formfields {
-  width: 10vw;
+  width: 60%;
 }
 
 .userdetails {
-  min-width: 40vw;
+  height: 600px;
+  margin-top: $offset;
+  margin-left: $offset;
+  margin-right: $offset;
 }
 
 form {