Fix disappearing label for persona email input (Closes #42)

Galaxy102 · Feb 13, 2022 · 234761d · 234761d
1 parent 4321a74
commit 234761d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/src/main/resources/static/css/toolkit.css b/src/main/resources/static/css/toolkit.css
@@ -1,3 +1,8 @@
 .nav-pills .nav-link:not(.active):hover {
     background-color: #6c757d;
 }
+
+.form-floating-group input {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+}
diff --git a/src/main/resources/static/js/toolkit.js b/src/main/resources/static/js/toolkit.js
@@ -84,7 +84,7 @@ function triggerComponentSelect(element) {
 // Inspired by https://thecoderain.blogspot.com/2020/11/generate-valid-random-email-js-jquery.html
 const emailChars = '1234567890';
 function generateEmailAddress(btnEl) {
-    const target = $(btnEl).parent().children().first();
+    const target = $(btnEl).parent().children().first().children().first();
     var mail = 'mail';
     for (let i = 0; i < 10; i++) {
         mail += emailChars[Math.floor(Math.random() * emailChars.length)];

diff --git a/src/main/resources/templates/bootstrap/datasim/persona.html b/src/main/resources/templates/bootstrap/datasim/persona.html
@@ -17,9 +17,11 @@ <h3 class="mb-3">Add new Persona</h3>
                     </div>
                 </div>
                 <div class="col-5">
-                    <div class="mb-3 mt-3 form-floating input-group">
-                        <input type="email" class="form-control" minlength="3" maxlength="255" name="mbox" id="newPersonaMbox" placeholder="pseudo" required>
-                        <label for="newPersonaMbox">Persona Mail (without prefixes)</label>
+                    <div class="mb-3 mt-3 input-group">
+                        <div class="form-floating form-floating-group flex-grow-1">
+                            <input type="email" class="form-control" minlength="3" maxlength="255" name="mbox" id="newPersonaMbox" placeholder="pseudo" required>
+                            <label for="newPersonaMbox">Persona Mail (without prefixes)</label>
+                        </div>
                         <button class="btn btn-outline-secondary no-spinner" type="button" onclick="generateEmailAddress(this);"><i class="bi-arrow-repeat"></i></button>
                     </div>
                 </div>