improve form layout handling

This commit is contained in:
Arthur Lu 2022-12-19 17:05:04 -08:00
parent e0e3d5802e
commit ad6e330a74
3 changed files with 23 additions and 2 deletions

View File

@ -13,6 +13,10 @@
<form> <form>
<fieldset id="user-configurable"> <fieldset id="user-configurable">
<legend>Change Configuration</legend> <legend>Change Configuration</legend>
<div class="labels-inputs">
<div id="labels"></div>
<div id="inputs"></div>
</div>
<div class="btn-group" id="form-actions"> <div class="btn-group" id="form-actions">
<button id="cancel">CANCEL</button> <button id="cancel">CANCEL</button>
<button id="submit">SUBMIT</button> <button id="submit">SUBMIT</button>

View File

@ -23,3 +23,12 @@ input {
button { button {
margin-top: 10px; margin-top: 10px;
} }
.labels-inputs {
display: flex;
column-gap: 10px;
}
.labels-inputs > div {
width: min-content;
}

View File

@ -13,8 +13,16 @@
<form> <form>
<fieldset> <fieldset>
<legend>Proxmox VE Login</legend> <legend>Proxmox VE Login</legend>
<label for="username">Username: </label><input type="text" id="username" name="username"><br> <div class="labels-inputs">
<label for="username">Password: </label><input type="password" id="password" name="password"><br> <div>
<label for="username">Username:</label>
<label for="username">Password:</label>
</div>
<div>
<input type="text" id="username" name="username">
<input type="password" id="password" name="password">
</div>
</div>
<div class="btn-group"> <div class="btn-group">
<button id="submit">LOGIN</button> <button id="submit">LOGIN</button>
</div> </div>