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

Using css to align form element by fieldset

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

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>

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>
@ -150,6 +151,7 @@ draft: false
For this select a method for absorption, fluorescence or ZPE
</p>
<form>
<fieldset class="table">
<div>
<label for="select_mol">Select a molecule</label>
<select id="select_mol" onchange="select_mol_onchange(event)">
@ -174,6 +176,7 @@ draft: false
<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;
}