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)
When adding second column to the form - all elements disappears in App Structure.
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
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.