From cdff5c60a558dec8940afc3057c1307ffd6f4ae7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20V=C3=A9ril?= <mveril@irsamc.ups-tlse.fr>
Date: Thu, 10 Oct 2019 10:40:34 +0200
Subject: [PATCH] Using css to align form element by fieldset

---
 content/multipledataset.html |  3 +-
 content/singledataset.html   | 63 +++++++++++++++++++-----------------
 static/css/form.css          | 16 +++++++++
 3 files changed, 51 insertions(+), 31 deletions(-)
 create mode 100644 static/css/form.css

diff --git a/content/multipledataset.html b/content/multipledataset.html
index fab3818e..072796d2 100644
--- a/content/multipledataset.html
+++ b/content/multipledataset.html
@@ -4,6 +4,7 @@ date: 2019-09-27 16:41
 draft: false
 ---
 <link rel="stylesheet" type="text/css" href="/css/modal.css" />
+<link rel="stylesheet" type="text/css" href="/css/form.css" />
 <script src="/js/data.js" type="text/javascript"></script>
 <script src="/js/loadAllData.js" type="text/javascript"></script>
 <script src="/js/getFullDataPath.js" type="text/javascript"></script>
@@ -284,7 +285,7 @@ draft: false
       <input type="file" multiple onchange="reloadSelect()" id="customFiles_input" disabled=true></input>
     </div>
   </fieldset>
-  <fieldset>
+  <fieldset class="table">
     <div>
       <label for="mol_select">Molecule</label>
       <select multiple id="mol_select" name="molecule"></select>
diff --git a/content/singledataset.html b/content/singledataset.html
index 96e7989a..3d1af3d6 100644
--- a/content/singledataset.html
+++ b/content/singledataset.html
@@ -4,6 +4,7 @@ date: 2019-08-29 09:00
 draft: false
 ---
 <link rel="stylesheet" type="text/css" href="/css/modal.css" />
+<link rel="stylesheet" type="text/css" href="/css/form.css" />
 <script src="/js/processingIndicator.js" type="text/javascript"></script>
 <script src="/js/data.js" type="text/javascript"></script>
 <script src="/js/loadAllData.js" type="text/javascript"></script>
@@ -74,14 +75,14 @@ draft: false
     const LatexInline = ['\\(', '\\)']
     var md = [];
     var els = [];
-    var customRenderingProp = ["excitations", "sourceFile","DOI"]
-    const fullNames={
-      Abs:'Absorption',
-      Fluo:"Fluorescence",
-      ZPE:"ZPE"
+    var customRenderingProp = ["excitations", "sourceFile", "DOI"]
+    const fullNames = {
+      Abs: 'Absorption',
+      Fluo: "Fluorescence",
+      ZPE: "ZPE"
     }
     for (const key of Object.keys(window.data)) {
-      if (window.data[key] != null) {      
+      if (window.data[key] != null) {
         md.push(fullNames[key])
         for (const prop of Object.keys(window.data[key])) {
           if (!(customRenderingProp.includes(prop)))
@@ -150,30 +151,32 @@ draft: false
   For this select a method for absorption, fluorescence or ZPE
 </p>
 <form>
-  <div>
-    <label for="select_mol">Select a molecule</label>
-    <select id="select_mol" onchange="select_mol_onchange(event)">
-      <option value="" disabled=true selected=true>Select a molecule</option>
-    </select>
-  </div>
-  <div>
-    <label for="select_abs">Select an absorption method</label>
-    <select id="select_abs" onchange="select_abs_onchange(event)">
-      <option value="" disabled=true selected=true>Select an absorption method</option>
-    </select>
-  </div>
-  <div>
-    <label for="select_fluo">Select a fluorescence method</label>
-    <select id="select_fluo" onchange="select_fluo_onchange(event)">
-      <option value="" disabled=true selected=true>Select a fluorescence method</option>
-    </select>
-  </div>
-  <div>
-    <label for="select_ZPE">Select a ZPE method</label>
-    <select id="select_ZPE" onchange="select_ZPE_onchange(event)">
-      <option value="" disabled=true selected=true>Select a ZPE method</option>
-    </select>
-  </div>
+  <fieldset class="table">
+    <div>
+      <label for="select_mol">Select a molecule</label>
+      <select id="select_mol" onchange="select_mol_onchange(event)">
+        <option value="" disabled=true selected=true>Select a molecule</option>
+      </select>
+    </div>
+    <div>
+      <label for="select_abs">Select an absorption method</label>
+      <select id="select_abs" onchange="select_abs_onchange(event)">
+        <option value="" disabled=true selected=true>Select an absorption method</option>
+      </select>
+    </div>
+    <div>
+      <label for="select_fluo">Select a fluorescence method</label>
+      <select id="select_fluo" onchange="select_fluo_onchange(event)">
+        <option value="" disabled=true selected=true>Select a fluorescence method</option>
+      </select>
+    </div>
+    <div>
+      <label for="select_ZPE">Select a ZPE method</label>
+      <select id="select_ZPE" onchange="select_ZPE_onchange(event)">
+        <option value="" disabled=true selected=true>Select a ZPE method</option>
+      </select>
+    </div>
+  </fieldset>
 </form>
 <h1>Data</h1>
 <section id=data>
diff --git a/static/css/form.css b/static/css/form.css
new file mode 100644
index 00000000..69c5f6d5
--- /dev/null
+++ b/static/css/form.css
@@ -0,0 +1,16 @@
+form fieldset.table {
+  display: table;
+}
+
+form fieldset.table div {
+  display: table-row;
+}
+
+form fieldset.table input, form fieldset.table select, form fieldset.table label {
+  display: table-cell;
+  margin: 3px;
+}
+
+form fieldset.table label {
+  text-align: right;
+}
\ No newline at end of file