When adding second column to the form - all elements disappears in App Structure

OS info

  • Operating System : Windows 10.0.19044
  • Wappler Version : 5.1.0

Problem description

When adding second column to the form - all elements disappears in App Structure.

Steps to reproduce


report1663229981447.zip (285.0 KB)

Is this only happening when you drag the columns in the row or also when you click and add a new comic inside?
Please paste the html code which you see after you drag the two columns inside the row.

Generated code bellow:

<form id="form1">
<div class="row"><div class="col">
                    <input id="user_id" name="user_id" type="hidden" class="form-control" dmx-bind:value="sc_get_user_info.data.identity">
                    <div class="row">
                        <div class="row">
                            <div class="col-2">
                                <input id="adults" name="adults" type="number" class="form-control mb-2" placeholder="Adults">
                                <input id="teens" name="teens" type="number" class="form-control mt-2 mb-2" placeholder="Teens">
                                <input id="children" name="children" type="number" class="form-control mt-2 mb-2" placeholder="Children">
                                <input id="infants" name="infants" type="number" class="form-control mt-2 mb-2" placeholder="Infants">
                            </div>
                            <div class="col-4">
                                <input id="dates" name="dates" type="text" class="form-control dates" is="dmx-date-range-picker" format="YYYY-MM-DD" autoapply="true">
                            </div>
                        </div>



                        <div class="col-3">
                            <p>{{sc_get_ryanair_availability_dates.data.api_get_availability_dates.data}}</p>
                        </div>
                    </div>
                </div><div class="col-3"><select id="select_ryanair_destination" class="form-select" name="select_ryanair_destination" dmx-bind:options="sc_get_ryanair_destinations.data.query" optiontext="ryanair_destinations_city+', '+ryanair_destinations_country" optionvalue="ryanair_destinations_code">
                    </select></div></div>
</form>

When I’m creating new columns under form - everything is good, but after I move second column under forms rows - it’s disappears right away.

This is code before inserting second column under form:

        <div class="tab-pane fade" id="navTabs1_2" role="tabpanel">
            <div class="row">
                <form id="form1">
                    <div class="row">
                        <div class="col-3"><select id="select_ryanair_destination" class="form-select" name="select_ryanair_destination" dmx-bind:options="sc_get_ryanair_destinations.data.query" optiontext="ryanair_destinations_city+', '+ryanair_destinations_country" optionvalue="ryanair_destinations_code">
                            </select></div>
                    </div>
                </form>

                <div class="col">
                    <input id="user_id" name="user_id" type="hidden" class="form-control" dmx-bind:value="sc_get_user_info.data.identity">
                    <div class="row">
                        <div class="row">
                            <div class="col-2">
                                <input id="adults" name="adults" type="number" class="form-control mb-2" placeholder="Adults">
                                <input id="teens" name="teens" type="number" class="form-control mt-2 mb-2" placeholder="Teens">
                                <input id="children" name="children" type="number" class="form-control mt-2 mb-2" placeholder="Children">
                                <input id="infants" name="infants" type="number" class="form-control mt-2 mb-2" placeholder="Infants">
                            </div>
                            <div class="col-4">
                                <input id="dates" name="dates" type="text" class="form-control dates" is="dmx-date-range-picker" format="YYYY-MM-DD" autoapply="true">
                            </div>
                        </div>



                        <div class="col-3">
                            <p>{{sc_get_ryanair_availability_dates.data.api_get_availability_dates.data}}</p>
                        </div>
                    </div>
                </div>
            </div>

Here is generated code after second column is inserted under form:

        <div class="tab-pane fade" id="navTabs1_2" role="tabpanel">
            <div class="row">
                <form id="form1">
                    <div class="row">
                        <div class="col">
                    <input id="user_id" name="user_id" type="hidden" class="form-control" dmx-bind:value="sc_get_user_info.data.identity">
                    <div class="row">
                        <div class="row">
                            <div class="col-2">
                                <input id="adults" name="adults" type="number" class="form-control mb-2" placeholder="Adults">
                                <input id="teens" name="teens" type="number" class="form-control mt-2 mb-2" placeholder="Teens">
                                <input id="children" name="children" type="number" class="form-control mt-2 mb-2" placeholder="Children">
                                <input id="infants" name="infants" type="number" class="form-control mt-2 mb-2" placeholder="Infants">
                            </div>
                            <div class="col-4">
                                <input id="dates" name="dates" type="text" class="form-control dates" is="dmx-date-range-picker" format="YYYY-MM-DD" autoapply="true">
                            </div>
                        </div>



                        <div class="col-3">
                            <p>{{sc_get_ryanair_availability_dates.data.api_get_availability_dates.data}}</p>
                        </div>
                    </div>
                </div><div class="col-3"><select id="select_ryanair_destination" class="form-select" name="select_ryanair_destination" dmx-bind:options="sc_get_ryanair_destinations.data.query" optiontext="ryanair_destinations_city+', '+ryanair_destinations_country" optionvalue="ryanair_destinations_code">
                            </select></div>
                    </div>
                </form>

                
            </div>

But why do you have two rows nested in each other? You only need one row.

I’ve removed nested rows, but getting same behavior.

Here is code:

        <div class="tab-pane fade" id="navTabs1_2" role="tabpanel">
            <div class="row">
                <div class="col-4"><select id="select_ryanair_destination" class="form-select" name="select_ryanair_destination" dmx-bind:options="sc_get_ryanair_destinations.data.query" optiontext="ryanair_destinations_city+', '+ryanair_destinations_country" optionvalue="ryanair_destinations_code">
                    </select></div>
                <div class="col">
                    <form id="form1"><input id="user_id" name="user_id" type="hidden" class="form-control" dmx-bind:value="sc_get_user_info.data.identity"></form>

                    <div class="row">
                        <div class="col-2">
                            <input id="adults" name="adults" type="number" class="form-control mb-2" placeholder="Adults">
                            <input id="teens" name="teens" type="number" class="form-control mt-2 mb-2" placeholder="Teens">
                            <input id="children" name="children" type="number" class="form-control mt-2 mb-2" placeholder="Children">
                            <input id="infants" name="infants" type="number" class="form-control mt-2 mb-2" placeholder="Infants">
                        </div>
                        <div class="col-4">
                            <input id="dates" name="dates" type="text" class="form-control dates" is="dmx-date-range-picker" format="YYYY-MM-DD" autoapply="true">
                        </div>
                    </div>
                </div>
            </div>


        </div>

Here is what I’m doing:

Here is code after:

        <div class="tab-pane fade" id="navTabs1_2" role="tabpanel">
            <div class="row">
                <div class="col-4"><select id="select_ryanair_destination" class="form-select" name="select_ryanair_destination" dmx-bind:options="sc_get_ryanair_destinations.data.query" optiontext="ryanair_destinations_city+', '+ryanair_destinations_country" optionvalue="ryanair_destinations_code">
                    </select></div>
                <div class="col">
                    <form id="form1"><div class="row">
                        <div class="col-2">
                            <input id="adults" name="adults" type="number" class="form-control mb-2" placeholder="Adults">
                            <input id="teens" name="teens" type="number" class="form-control mt-2 mb-2" placeholder="Teens">
                            <input id="children" name="children" type="number" class="form-control mt-2 mb-2" placeholder="Children">
                            <input id="infants" name="infants" type="number" class="form-control mt-2 mb-2" placeholder="Infants">
                        </div>
                        <div class="col-4">
                            <input id="dates" name="dates" type="text" class="form-control dates" is="dmx-date-range-picker" format="YYYY-MM-DD" autoapply="true">
                        </div>
                    </div><input id="user_id" name="user_id" type="hidden" class="form-control" dmx-bind:value="sc_get_user_info.data.identity"></form>

                    
                </div>
            </div>


Now it’s getting even weird: I’ve completly re-created this left column with form, started to fill in with fields and this what happend:

        <div class="tab-pane fade" id="navTabs1_2" role="tabpanel">
            <div class="row">
                <div class="col-4"><input id="dates" name="dates" type="text" class="form-control dates" is="dmx-date-range-picker" format="YYYY-MM-DD" autoapply="true"></div>
                <div class="col">
                    <form id="form_ryanair_create_entry">
                        <div class="row">
                            <div class="col-4"><select id="select_ryanair_destination" class="form-select" name="select_ryanair_destination" dmx-bind:options="sc_get_ryanair_destinations.data.query" optiontext="ryanair_destinations_city+', '+ryanair_destinations_country" optionvalue="ryanair_destinations_code">
                                </select></div>
                            <div class="col">
                                <input id="adults" name="adults" type="text" class="form-control" placeholder="Adults">
                                <input id="children" name="children" type="text" class="form-control" placeholder="Children">
                                <input id="teens" name="teens" type="text" class="form-control" placeholder="Teens">
                                <input id="text4" name="text4" type="text" class="form-control">
                            </div>
                        </div>
                    </form>

                </div>
            </div>


        </div>

Sorry for spamming but this behavior can be re-created on a new page as well.
As soon as I enter some custom ID, Name, Placeholder - form brakes.

<div class="container">
    <div class="row">
        <div class="col">
            <form id="form1">
                <div class="row">
                    <div class="col">
                        <input id="text1" name="text1" type="text" class="form-control">
                        <input id="text3" name="text3" type="text" class="form-control">
                        <input id="text4" name="text4" type="text" class="form-control">
                        <input id="text2" name="text2" type="text" class="form-control">
                    </div>
                </div>
            </form>
        </div>


    </div>
</div>

So while trying to replicate this issue I found that when you enter ID or name with “children” value - form brakes 100%
If you set ID or name “childrenasdkjaskdj” - form still works
I know it might sound weird but it is what it is

@George @Teodor Can you please confirm that you were able to replicate this issue?

Yes, we are able to reproduce this. Using words like children or data for names/ids is not a good idea, so better avoid using them.