This is an odd one. I'm working on some interface elements and things aren't sizing as expected.
I am creating a table programmatically and it is displaying as expected. Below the table is an input that shows up when you click on one of the elements in the table. It looks like this:
That part works great. In this case you can see the input spans about 1 1/2 columns of the table. I'm not worried about the actual width - just the fact that it spans more than one column. The code behind it:
if (thisRoom != "null" && settings["lg1"] != null) {
paragraph displayTable()
location.modes.sort{it.name}.each {
for(int i = 1; i < (state.lightGroups + 1); i++) {
if (state.showControl == "${it.id}${"lightGroup$i"}") {
input name: "${it.id}${"lightGroup$i"}", type: "enum", options: presets, defaultValue: "---", title: "<span style='display: inline-block; width: 100%;'>${settings.("lg${i}")} (${it.name})</font></span>", submitOnChange: true, width: 3
state.showControl = ""
}
}
if (state.showControl == "${it.id}cooldown") {
input name: "${it.id}cooldown", type: "enum", options: presets, defaultValue: "---", title: "<span style='display: inline-block; width: 100%;'>Cooldown (${it.name})</font></span>", submitOnChange: true, width: 3
state.showControl = ""
}
}
}
Basically what happening is it does the paragraph with the table and then displays an input if required. The paragraph element does not have a width parameter so it should fill the screen if needed. The inputs have a width of 3. So far so good.
Now if I add a width parameter to the paragraph for some reason the input is being confined to the width of the first column of the table. For example, I set the width of the paragraph to 6 (50%) and the element now looks like this:
Looking at the source of the rendered page the input is outside of the table and as far as I see the table is properly closed.
Any ideas what might be happening here? I would like to put something next to the table but it just isn't working.
Thanks
