Hello Diego,
If you are still listening, or anyone,
Is your grid still working?
I am trying to layout some items in a grid with HTMLDlg but the divs take up full width.
The page displays as expected with Firefox
dlg_optns = {
:dialog_title => 'Polyhedron Options',
:width => 800,
:height => 650,
:resizable => false,
:style => UI::HtmlDialog::STYLE_DIALOG
}
dlg_html = <<-HTML
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background-color:Gainsboro;
font-family: Verdana, sans-serif;
font-size: 100%;
overflow: hidden;
}
input[type=button] {
width: 150px;
height: 25px;
float: none;
}
.grid-container {
display: grid;
/* grid-template-columns: 30px 80px 30px 80px 30px 80px;*/
grid-template-columns: auto auto auto auto;
}
.grid-item-label {
color: darkblue;
font-size: 0.875em;
text-align: center;
}
.grid-item-input {
color: red;
font-size: 0.875em;
}
</style>
</head>
<script>
function cancel_dlg() {sketchup.cancel_dlg() }
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 13) {
send_dlg_optns();
}
if (evt.keyCode == 27) {
cancel_dlg();
}
}
</script>
<body>
<div class="grid-container">
<div class="grid-item-label">1:</div>
<div class="grid-item-input">test 1</div>
<div class="grid-item-label">2:</div>
<div class="grid-item-input">test 2</div>
<div class="grid-item-label">3:</div>
<div class="grid-item-input">test 3</div>
<div class="grid-item-label">4:</div>
<div class="grid-item-input">test 4</div>
<div class="grid-item-label">5:</div>
<div class="grid-item-input">test 5</div>
<div class="grid-item-label">6:</div>
<div class="grid-item-input">test 6</div>
<div class="grid-item-label">7:</div>
<div class="grid-item-input">test 7</div>
<div class="grid-item-label">8:</div>
<div class="grid-item-input">test 8</div>
<div class="grid-item-label">9:</div>
<div class="grid-item-input">test 9</div>
<div class="grid-item-label">10:</div>
</div>
<p>
<div style="text-align: center">
<input type="button" value="Create Model" onclick="send_dlg_optns()">
<input type="button" value="Cancel" onclick="cancel_dlg()">
</div>
</p>
</body>
</html>
HTML
dlg_model_optns2 = UI::HtmlDialog.new(dlg_optns)
dlg_model_optns2.set_html(dlg_html)
dlg_model_optns2.center
dlg_model_optns2
end # html_dlg_model_options2(model_optns)
No errors shown in DevTools…