Fixed display of multiple boxes in fieldset

This commit is contained in:
mmcwilliams 2024-08-19 15:08:48 -04:00
parent 641ad70732
commit 0b280ff623
5 changed files with 15 additions and 7 deletions

View File

@ -211,10 +211,15 @@ class Client {
private setDisplay (state : State) { private setDisplay (state : State) {
const widthEl : HTMLInputElement = document.getElementById('displayWidth') as HTMLInputElement; const widthEl : HTMLInputElement = document.getElementById('displayWidth') as HTMLInputElement;
const heightEl : HTMLInputElement = document.getElementById('displayHeight') as HTMLInputElement; const heightEl : HTMLInputElement = document.getElementById('displayHeight') as HTMLInputElement;
const srcWidthEl : HTMLInputElement = document.getElementById('sourceWidth') as HTMLInputElement;
const srcHeightEl : HTMLInputElement = document.getElementById('sourceHeight') as HTMLInputElement;
widthEl.value = state.display.width as any; widthEl.value = state.display.width as any;
heightEl.value = state.display.height as any; heightEl.value = state.display.height as any;
srcWidthEl.value = state.source.width as any;
srcHeightEl.value = state.source.height as any;
widthEl.readOnly = false; widthEl.readOnly = false;
heightEl.readOnly = false; heightEl.readOnly = false;
//console.dir(state); //console.dir(state);

View File

@ -45,21 +45,20 @@ html, body{
.half{ .half{
box-sizing: border-box; box-sizing: border-box;
width: 50%; flex: 0 0 50%;
} }
.third{ .third{
box-sizing: border-box; box-sizing: border-box;
width: 33.3%; flex: 0 0 33.33333%;
} }
fieldset.inline { .flex {
display: flex; display: flex;
} }
fieldset.inline .field-row { fieldset.inline .field-row {
display: inline-block; display: inline-block;
margin-left: 10px;
} }
fieldset.inline .field-row input { fieldset.inline .field-row input {

View File

@ -180,8 +180,12 @@ class Client {
setDisplay(state) { setDisplay(state) {
const widthEl = document.getElementById('displayWidth'); const widthEl = document.getElementById('displayWidth');
const heightEl = document.getElementById('displayHeight'); const heightEl = document.getElementById('displayHeight');
const srcWidthEl = document.getElementById('sourceWidth');
const srcHeightEl = document.getElementById('sourceHeight');
widthEl.value = state.display.width; widthEl.value = state.display.width;
heightEl.value = state.display.height; heightEl.value = state.display.height;
srcWidthEl.value = state.source.width;
srcHeightEl.value = state.source.height;
widthEl.readOnly = false; widthEl.readOnly = false;
heightEl.readOnly = false; heightEl.readOnly = false;
this.display.set(state); this.display.set(state);

File diff suppressed because one or more lines are too long

View File

@ -20,7 +20,7 @@
<div class="window-body"> <div class="window-body">
<div> <div>
<ul class="tree-view" id="display"><canvas></canvas></ul> <ul class="tree-view" id="display"><canvas></canvas></ul>
<div> <div class="flex">
<fieldset id="screenResolution" class="inline third"> <fieldset id="screenResolution" class="inline third">
<legend>Screen</legend> <legend>Screen</legend>
<span class="field-row"> <span class="field-row">