PTEROSOR/QUESTDB_website
10
0
Fork 0
mirror of https://github.com/LCPQ/QUESTDB_website.git synced 2024-12-25 13:53:48 +01:00
Code Releases Activity

Using css to align form element by fieldset

Browse Source
This commit is contained in:
Mickaël Véril 2019-10-10 10:40:34 +02:00
parent 0a08a52d15
commit cdff5c60a5
3 changed files with 51 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
content/multipledataset.html
View File

@ -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>

61
content/singledataset.html
View File

@ -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,11 +75,11 @@ 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) {
@ -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>

16
static/css/form.css Normal file
View File

@ -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;
}