I wanted to do an app with an interface that splits the left and right hands of the page. Controls would go on the left and the results of those choices would be displayed on the right. I'm no expert but I thought a table would be a good way of achieving this. I've have it working vertically but requires more scrolling than I would like.
In the picture on the right it shows how a table would be displayed without any controls and then again with a color control (width=2) embedded. As you can see the technique is unusable as is.
Given that I only have a modest knowledge of CSS and HTML I thought I'd ask to see if there was another method where I could constrain the controls into being better neighbors.
Any help much appreciated. Code to follow.
section {
//Establish the table style
HTML = "<style>table.tb {width:50%;height:10%} .tb th, .tb td {border:solid 2px #000000;padding:3px } .tb th {background:#90c226;color:#000000;text-align:Center;font-size:10px}.tb tr{background:#bfe373;color:#000000;text-align:Center}</style>"
paragraph HTML
//Add a table
paragraph "<body><table class='tb'><tr><td>R1C1</td><td>R2C2</td></tr></table></body>"
//Start a table
paragraph "<body><table class='tb'><tr><td>R1C1"
//add a control
input "myTextColor", "color", title: "<b>Text Color ${myTextColor}</b>", required: false, submitOnChange: true, width: 2, defaultValue: "#000000"
//input "isVerbose2", "bool", title: "Verbose Debug2", required: false, multiple: false, defaultValue: false, submitOnChange: true, width: 1
//close the table
paragraph "</td><td>R2C2</td></tr></tbody></table></body></html>"
}
