<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
</head>
<body>
<div>
<meta content="text/html; charset=us-ascii">
</div>
<div class="BodyFragment"><font size="2"><span style="font-size:11pt">
<div class="PlainText" dir="auto" style="text-align: left;"><span style="font-size: 11pt;">This may or may not be helpful to you, but my framework Nyx has relative, fixed, and proportional layouts built in. Basic elements like text, buttons, checkbox, and multi
 line input are done (for the browser). The relative layout would let you specify an anchor to use (other element) and specify how far from this anchor and what what alignment (left, center, right).</span><br>
</div>
<div class="PlainText" dir="auto" style="text-align: left;">Still a lot to do since it's a work in progress but maybe you'll find some use since all UI is meant to be defined in code.</div>
<div class="PlainText" dir="auto" style="text-align: left;"><br>
</div>
<div class="PlainText" dir="auto" style="text-align: left;">I would much rather point you to actual documentation or more complete examples but I don't have them at this point. Instead here are a few independant examples showing how to </div>
<div class="PlainText" dir="auto" style="text-align: left;">1. Create a ui </div>
<div class="PlainText" dir="auto" style="text-align: left;">2. Create a container to hold elements </div>
<div class="PlainText" dir="auto" style="text-align: left;">3. Add the container and elements to ui with optional handlers for observable events</div>
<div class="PlainText" dir="auto" style="text-align: left;">4. Render to the screen </div>
<div class="PlainText" dir="auto" style="text-align: left;"><br>
</div>
<div class="PlainText" dir="auto" style="text-align: left;">* how to add a click handler to button - <a href="https://github.com/mr-highball/nyx/blob/340265a03bcefa5dbaf19fdbd8f342d607424aa7/test/nyx_browser_test.lpr#L377">https://github.com/mr-highball/nyx/blob/340265a03bcefa5dbaf19fdbd8f342d607424aa7/test/nyx_browser_test.lpr#L377</a></div>
<div class="PlainText" dir="auto" style="text-align: left;"><br>
</div>
<div class="PlainText" dir="auto" style="text-align: left;">* how to display an inout element - <a href="https://github.com/mr-highball/nyx/blob/340265a03bcefa5dbaf19fdbd8f342d607424aa7/test/nyx_browser_test.lpr#L396">https://github.com/mr-highball/nyx/blob/340265a03bcefa5dbaf19fdbd8f342d607424aa7/test/nyx_browser_test.lpr#L396</a></div>
<div class="PlainText" dir="auto" style="text-align: left;"><br>
</div>
<div class="PlainText" dir="auto" style="text-align: left;">* how to add a checkbox - <a href="https://github.com/mr-highball/nyx/blob/340265a03bcefa5dbaf19fdbd8f342d607424aa7/test/nyx_browser_test.lpr#L416">https://github.com/mr-highball/nyx/blob/340265a03bcefa5dbaf19fdbd8f342d607424aa7/test/nyx_browser_test.lpr#L416</a></div>
<div class="PlainText" dir="auto" style="text-align: left;"><br>
</div>
<div class="PlainText" dir="auto" style="text-align: left;">* how to multi line input with handler for text change - <a href="https://github.com/mr-highball/nyx/blob/340265a03bcefa5dbaf19fdbd8f342d607424aa7/test/nyx_browser_test.lpr#L434">https://github.com/mr-highball/nyx/blob/340265a03bcefa5dbaf19fdbd8f342d607424aa7/test/nyx_browser_test.lpr#L434</a></div>
<div class="PlainText" dir="auto" style="text-align: left;"><br>
</div>
<div class="PlainText" dir="auto" style="text-align: left;">* fairly complete to-do list (once a listbox element is added to nyx then a to-do list will be a lot simpler but this shows how to add a bunch or elements together for something) - <a href="https://github.com/mr-highball/nyx/blob/master/demos/browser/todo-list/todo_list.lpr">https://github.com/mr-highball/nyx/blob/master/demos/browser/todo-list/todo_list.lpr</a></div>
<div class="PlainText" dir="auto" style="text-align: left;"><br>
</div>
<div class="PlainText" dir="auto" style="text-align: left;">Hopefully someone else may also be able to provide some more insight into accomplishing this the standard way too using just htmlwidgets unit.</div>
<div class="PlainText" dir="auto" style="text-align: left;"><br>
</div>
</span></font></div>
</body>
</html>