Inserting form inputs into tables [fixed in 2.3.3]

At the moment It can't be done so there's no way of adding say a list of checkboxes into a table, so everything would have to be done using columns which isn't always the cleanest way of getting everything lined up in a reliable manner especially if you want the table to overflow in smaller views rather than bunch up or move onto different lines.

On a related note, adding 'Radio With Label' buttons inside a column in a row, in a form (ie . <form><div class="row"><div class="col-xs-12"><div class="radio"> ) doesn't contain the radio input, only the radio class div with a 'radio' label inside of it.

I just started a new project to test this.

Drag drop "Form" on to "Body" of Overview pane.

Drag drop "Row" on to "Form" of Overview pane.

Drag drop "Radio with Label" on to "Row" of Overview pane (this automatically creates column if there isn't one).

    <div class="row">
        <div class="col-![enter image description here][1]md-12">
            <div class="radio">
                    <input type="radio" />Label</label>

It seems like this should have worked for you.


I meant to do an update to this. I figured out what was going wrong, after adding the input I clicked on the 'label' wording to replace it with the appropriate tag and pressed delete. It removed the word and the radio input as well.

Whilst I'll admit to user error It really threw me as to what the hell was going on considering I was just replacing a word (I checked if double clicking to highlight the word then typing does the same and it does. The work around was to add in my replacement label then remove the 'label' wording using backspace).

Yeah it can be a little tricky if your double clicking on the word "Label" next to the radio button in the Project pane you might end up also selecting the radio button it's self.

If you select the label in either the Overview or HTML panes, you can select the Edit button (pencil icon) in the Options pane on the top right of the app. Then you can just backspace to remove the word label.


It is generally recommended not to use tables for layout purposes - the proper way would be to use bootstrap's rows and columns to construct the layout. If you wish the table to not collapse on small devices, you can add your size classes to the "xs" grid size. This will keep your elements on the same line on every device.

We made a small fix to address the issue with checkboxes and radios being deleted. Now when you double click on the word, only the text is selected. This will make it harder to accidentally delete the checkbox/radio. The fix will be included in the next release of the app.

Another change that we will do for the next release is to allow more elements to be placed inside table cells.

Generally I wouldn't have but for the particulars of what I was trying to lay out using a table would have worked a touch better for text flow/text wrapping using a table.

I've used columns and rows in the end now anyway and got it work fine so not such an issue. I'm getting into the habit of using the pencil (I'll admit to years of using UI's that I just double click the text to edit out of habit) for text editing but otherwise, these are all little grumbles more than anything. It's me having the usual issue of getting used to a new workflow paradigm (for the buzzword bingo players).

Oddly enough, having some of the restrictions on layout aren't as bad as they might at first seem as it's at least trying to save me from myself and sticking to correct HTML5 standards for nesting (so no div's inside of spans type silliness), so it's not always such a bad thing when you understand why.

We've opened up table cells to accept lots of types of components. You can try it out in version 2.3.3 which was released today.

I see the comment this was fixed in 2.3.3. I'm running 2.5.4, and I'm unable to drop a text input into a table cell. I suppose I could try this with custom code, but I'm curious what "we've opened up table cells to accept lots of types of components" means?

Hello! Same problem here as @ericw, can’t seem to drag a text input into a table cell, I’m using 2.7.1.

Note that even when using tables strictly for the presentation of tabular data, you might still want to create UI for manipulating this data, and thus require all kinds of HTML elements inside the table cell.

Thanks for looking into this!