Bug Report from aschoijett #2019-10-29_17-9-34

OS info

  • Operating System : Windows 10.0.17763
  • Wappler Version : 2.4.2

Problem description

It happened a couple of times that my flex containers disappear. I don’t know if there’s a limitation on how many of them I can have at any time (alas, I’m not even sure that I understand what a flex container is!)

So maybe I should explain first what I’m trying to do. Fundamentally, it is to show or hide a group of fields based on the value of a Select.

I have a modal popup that has a data entry form inside.
There is a select widget that allows the user to select the preferred payment method. There are 3 options for this: NOT SET, CHEQUE, or EFT (electronic funds transfer)

There are 3 “Flex Containers” (fc) that I show or hide based on the value of this Select. the fc_EFT contains fields to input the banking info, required to make a deposit. The fc_CHEQUE contains fields to input the address to which the cheques should be mailed. A third flex container fc_EFFECTIVEDATE contains a field to input the date when the change of preferred payment method s/b processed. This third fc s/b visible except when the Select == “NOT SET”

To boot, I’m not even sure if a flex container is the object that I should use to do this. I tried it and it worked, logic for show/hide included. I tried before them other objects that I thought c/b used to contain the horizontal form groups that have the actual input fields and their labels but for some reason they did not allow me to move the horizontal form groups inside them.

The problem is that a couple of times already, I tried to move fields from one flex container to another and all of a sudden at least one of the flex containers disappears. The contents they had remain in the App Structure (one level up, since their parent is gone) but the container and my nice logic to show / hide them is gone.

I’m not sure this reproducible. I moved may fields several times from one container to another and it worked many times.
If it helps, some of the objects I move are Titles.

Steps to reproduce (Take what follows with a grain of salt. I don’t think this is easily reproducible)

  1. Create a Dynamic Modal
  2. In its body, put a serverconnect form
  3. Generate a BS input form
  4. Change one of the inputs to be a Select
  5. Insert a couple of Flex Containers
  6. Move some of the horizontal form groups to the Flex Containers
  7. Put the logic to show/hide
  8. Create Titles inside one of the Flex Container
  9. Duplicate the title
  10. Move the duplicate to another Flex Container

If you’re lucky, this should trigger the bug.

I truly hope this helps,

Alex

An update. This is odd:
I see the App Structure showing that the flex Containers are gone. See below:

However, the application still works as it should.
Here’s what’s shown when the user selects CHEQUE:

And here when the user selects EFT

Disclaimer: I’m really new at Wappler and I’m not a programmer, thus you can see that I had to show the value of my variables somehow to know that I’m in the right track. In addition, I have no clue of what is a form-group row vs a form row. I see in the first pic that there are a couple of form-row entries that I don’t think I entered.

If for any reason this were upseful, below is the code that Wappler generated:

START OF MY INSERTED CODE

Blockquote

<!doctype html>

Edit Case
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="../dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxValidator/dmxValidator.css">
<script src="../dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Collapse/dmxBootstrap4Collapse.js" defer=""></script>
<script src="../dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer=""></script>
<script src="../dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
<script src="../dmxAppConnect/dmxTyped/dmxTyped.js" defer=""></script>
<script src="../dmxAppConnect/dmxTyped/typed.min.js" defer=""></script>
<dmx-serverconnect id="SC_GetCaseAndPM" url="../dmxConnect/api/Cases/GetCaseAndPMember.php" dmx-param:caseid="query.caseid"></dmx-serverconnect>
<dmx-query-manager id="querymgr_GetCaseAndPM"></dmx-query-manager>








<?php include '../webSecurity/ssi-header.php'; ?>
<div class="container-fluid">
	<div class="row">
		<div class="col"></div>
	</div>
	<div class="row justify-content-center pt-5">

		<div class="col text-center">


			<h5 class="text-secondary">Plan Member</h5>

			<h2 class="text-dark">{{SC_GetCaseAndPM.data.query1[0].Firstname+' '+SC_GetCaseAndPM.data.query1[0].Lastname}}</h2>

			<img src="../assets/images/vest-gold.jpg" width="300" dmx-on:click="modal_PlanMember.show()">

		</div>
		<div class="col text-center">

			<h5 class="text-secondary">Case Status</h5>
			<h2>{{SC_GetCaseAndPM.data.query1[0].Status}}</h2><img src="../assets/images/gold-binder.jpg" width="300" dmx-on:click="modal_CaseInfo.show()">
		</div>
		<div class="col text-center">
			<h5 class="text-secondary">Payment Method</h5>

			<h2 class="text-dark">{{SC_GetCaseAndPM.data.query1[0].PaymentMethod}}</h2><img src="../assets/images/gold-plaine-coin.png" width="300" dmx-on:click="modal_PmtMethod.show()">
		</div>

	</div>
</div>
<?php include '../webSecurity/ssi-footer.php'; ?>
<div class="modal" id="modal_PlanMember" is="dmx-bs4-modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header bg-primary">
				<h5 class="modal-title text-light">Plan Member Information</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form is="dmx-serverconnect-form" id="serverconnectform_PM1" method="post" action="../dmxConnect/api/Cases/Upd_PM_BaseInfo.php" dmx-generator="bootstrap4" dmx-form-type="horizontal" dmx-populate="SC_GetCaseAndPM.data.query1">
					<input type="hidden" class="form-control" id="inp_idPMEMBER" name="idPMEMBER" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].idPMEMBER" aria-describedby="inp_Firstname_help" placeholder="Enter Firstname">
					<div class="form-group row">
						<label for="inp_Firstname" class="col-sm-3 col-form-label">Firstname</label>
						<div class="col-sm-9 ">
							<input type="text" class="form-control" id="inp_Firstname" name="Firstname" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Firstname" aria-describedby="inp_Firstname_help" placeholder="Enter Firstname" required=""
								maxlength="30">

						</div>
					</div>
					<div class="form-group row">
						<label for="inp_Lastname" class="col-sm-3 col-form-label">Lastname</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="inp_Lastname" name="Lastname" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Lastname" aria-describedby="inp_Lastname_help" placeholder="Enter Lastname" required=""
								maxlength="30">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_Email" class="col-sm-3 col-form-label">Email</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="inp_Email" name="Email" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Email" aria-describedby="inp_Email_help" placeholder="Enter Email" maxlength="45">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_DOB" class="col-sm-3 col-form-label">Date of Birth</label>
						<div class="col-sm-9">
							<input type="date" class="form-control" id="inp_DOB" name="DOB" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].DOB" aria-describedby="inp_DOB_help" placeholder="Enter Dob">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_Sex" class="col-sm-3 col-form-label">Sex</label>
						<div class="col-sm-9">
							<div class="form-group" is="dmx-radio-group" id="group1" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Sex">
								<div class="form-check">
									<input class="form-check-input" type="radio" value="M" id="input1" name="Sex">
									<label class="form-check-label" for="input1">Male</label>
								</div>
								<div class="form-check">
									<input class="form-check-input" type="radio" value="F" id="input2" name="Sex">
									<label class="form-check-label" for="input2">Female</label>
								</div>
							</div>

						</div>
					</div>


					<div class="form-group row">
						<label for="inp_PlanNum" class="col-sm-3 col-form-label">Plan#</label>
						<div class="col-sm-9">
							<div class="form-group" is="dmx-radio-group" id="group2" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].PlanNum">
								<div class="form-check">
									<input class="form-check-input" type="radio" value="793" id="input3" name="PlanNum">
									<label class="form-check-label" for="input3">Plan 793</label>
								</div>
								<div class="form-check">
									<input class="form-check-input" type="radio" value="793X" id="input3" name="PlanNum">
									<label class="form-check-label" for="input3">Plan 793X</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_CertificateNum" class="col-sm-3 col-form-label">Certificate#</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="inp_CertificateNum" name="CertificateNum" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].CertificateNum" aria-describedby="inp_CertificateNum_help"
								placeholder="Enter Certificate Number" readonly disabled>
						</div>
					</div>
					<div class="form-group row">
						<label class="col-sm-3 col-form-label">Registration#</label>

						<div class="col-sm-9">
							<input type="text" class="form-control" id="inp_UnionRegistrationNum" name="UnionRegistrationNum" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].UnionRegistrationNum" aria-describedby="inp_UnionRegistrationNum_help"
								placeholder="Enter Union Registration #" data-rule-digits="" data-msg-max="" max="" data-rule-max="999999999">
						</div>
					</div>
				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal" dmx-on:click="modal_PlanMember.serverconnectform_PM1.reset();modal_PlanMember.hide()">Discard</button>
				<button type="button" class="btn btn-primary" dmx-on:click="modal_PlanMember.serverconnectform_PM1.submit();modal_PlanMember.hide()">Save changes</button>
			</div>
		</div>
	</div>
</div>
<div class="modal" id="modal_PmtMethod" is="dmx-bs4-modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header bg-primary">
				<h5 class="modal-title">Payment Preferences</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<form is="dmx-serverconnect-form" id="serverconnectform_PM2" method="post" action="../dmxConnect/api/Cases/Upd_PM_PmtDetails.php" dmx-generator="bootstrap4" dmx-form-type="horizontal" dmx-populate="querymgr_GetCaseAndPM">
					<input type="hidden" class="form-control" id="inp_idPMEMBER" name="idPMEMBER" dmx-bind:value="querymgr_GetCaseAndPM.idPMEMBER" aria-describedby="inp_idPMEMBER_help" placeholder="Enter Id pmember">
					<div class="form-group row">
						<label for="inp_SIN" class="col-sm-3 col-form-label">SIN</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="inp_SIN" name="SIN" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].SIN" aria-describedby="inp_SIN_help" placeholder="Enter Social Insurance Number" required=""
								data-msg-pattern="" data-rule-digits="" data-msg-maxlength="" max="" data-rule-max="999999999">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_TaxExempted" class="col-sm-3 col-form-label">Tax status</label>
						<div class="col-sm-10">
							<input type="number" class="form-control" id="inp_TaxExempted" name="TaxExempted" dmx-bind:value="querymgr_GetCaseAndPM.TaxExempted" aria-describedby="inp_TaxExempted_help" placeholder="Enter Tax exempted">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_PaymentMethod" class="col-sm-2 col-form-label">Payment method</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="inp_PaymentMethod" name="PaymentMethod" dmx-bind:value="querymgr_GetCaseAndPM.PaymentMethod" aria-describedby="inp_PaymentMethod_help" placeholder="Enter Payment method">
						</div>
					</div>
					<div class="form-row"></div>
					<div class="form-row"></div>



					<div class="form-group row">
						<label for="inp_Address" class="col-sm-2 col-form-label">Address</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="inp_Address" name="Address" dmx-bind:value="querymgr_GetCaseAndPM.Address" aria-describedby="inp_Address_help" placeholder="Enter Address">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_City" class="col-sm-2 col-form-label">City</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="inp_City" name="City" dmx-bind:value="querymgr_GetCaseAndPM.City" aria-describedby="inp_City_help" placeholder="Enter City">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_PostalCode" class="col-sm-2 col-form-label">Postal code</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="inp_PostalCode" name="PostalCode" dmx-bind:value="querymgr_GetCaseAndPM.PostalCode" aria-describedby="inp_PostalCode_help" placeholder="Enter Postal code">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_Province" class="col-sm-2 col-form-label">Province</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="inp_Province" name="Province" dmx-bind:value="querymgr_GetCaseAndPM.Province" aria-describedby="inp_Province_help" placeholder="Enter Province">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_Country" class="col-sm-2 col-form-label">Country</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="inp_Country" name="Country" dmx-bind:value="querymgr_GetCaseAndPM.Country" aria-describedby="inp_Country_help" placeholder="Enter Country">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_BankInstitutionCode" class="col-sm-2 col-form-label">Bank institution code</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="inp_BankInstitutionCode" name="BankInstitutionCode" dmx-bind:value="querymgr_GetCaseAndPM.BankInstitutionCode" aria-describedby="inp_BankInstitutionCode_help"
								placeholder="Enter Bank institution code">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_BankTransitBranch" class="col-sm-2 col-form-label">Bank transit branch</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="inp_BankTransitBranch" name="BankTransitBranch" dmx-bind:value="querymgr_GetCaseAndPM.BankTransitBranch" aria-describedby="inp_BankTransitBranch_help"
								placeholder="Enter Bank transit branch">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_BankAccount" class="col-sm-2 col-form-label">Bank account</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="inp_BankAccount" name="BankAccount" dmx-bind:value="querymgr_GetCaseAndPM.BankAccount" aria-describedby="inp_BankAccount_help" placeholder="Enter Bank account">
						</div>
					</div>
					<div class="form-group row">
						<div class="col-sm-2">&nbsp;</div>
						<div class="col-sm-10">
							<button type="submit" class="btn btn-primary" dmx-bind:value="querymgr_GetCaseAndPM.Save">Save</button>
						</div>
					</div>
				</form>
				<p>Modal body text goes here.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>
<div class="modal" id="modal_CaseInfo" is="dmx-bs4-modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header bg-primary">
				<h5 class="modal-title">Case Information</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<p>Modal body text goes here.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

END OF MY INSERTED CODE

hi.
There’s something wrong with the code you have inserted. I don’t see any flex divs here.
Did you copy this from the browser or code view of Wappler?
Also, make sure the changes you are making are updating on the page you are running on browser.
If you could share a link to the page, that would be helpful.

Hi @Sid,
Thank you for looking into this. I thought I inserted the right code, but maybe I goofed, so I’m inserting it in this message (I’ll put a note in the previous one to reference this one). As said before, I’m not a programmer and I’m only in week 2 of learning Wappler, but prompted by your comments I inspected the code and noticed a couple of things:
a) Two empty flex containers appear in the code view, in lines 257 and 264, but the App Structure does not show them.
b) Line 224 looks funny to me. It has a div (whatever a div is) class=flex-column (I don’t know how that class appeared there, I don’t think I put it) and it has the conditional dmx-show statement inside it, and this is probably what makes the program still work well. but I did not do it or at least, not willingly :slight_smile: Remember, I just tried to move one Title from one flex container to another and all this mess happened.

So the questions are:

  1. Is this a bug or a user knowledge problem
  2. irrespective of the above, how do I fix this without recreating the page.

Should I cut and paste the code

PS: On a totally unrelated note, I never looked in the code view before (why should I, right?) but now that I’m doing it, I see little thin green and orange lines to the left of the page. Do they mark the lines that have been inserted or changed since the last GIT change?

Thank you for all your help!!

<!doctype html>

Edit Case
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>
<script src="../dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxValidator/dmxValidator.css">
<script src="../dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Collapse/dmxBootstrap4Collapse.js" defer=""></script>
<script src="../dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer=""></script>
<script src="../dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
<script src="../dmxAppConnect/dmxTyped/dmxTyped.js" defer=""></script>
<script src="../dmxAppConnect/dmxTyped/typed.min.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/daterangepicker.min.css">
<script src="../dmxAppConnect/dmxDatePicker/daterangepicker.min.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/dmxDatePicker.css">
<script src="../dmxAppConnect/dmxDatePicker/dmxDatePicker.js" defer=""></script>

<script src="../dmxAppConnect/dmxBootstrap4Alert/dmxBootstrap4Alert.js" defer=""></script>
<dmx-serverconnect id="SC_GetCaseAndPM" url="../dmxConnect/api/Cases/GetCaseAndPMember.php" dmx-param:caseid="query.caseid"></dmx-serverconnect>
<dmx-query-manager id="querymgr_GetCaseAndPM"></dmx-query-manager>








<?php include '../webSecurity/ssi-header.php'; ?>
<div class="container-fluid">
	<div class="row">
		<div class="col"></div>
	</div>
	<div class="row justify-content-center pt-5">

		<div class="col text-center">


			<h5 class="text-secondary">Plan Member</h5>

			<h2 class="text-dark">{{SC_GetCaseAndPM.data.query1[0].Firstname+' '+SC_GetCaseAndPM.data.query1[0].Lastname}}</h2>

			<img src="../assets/images/vest-gold.jpg" width="300" dmx-on:click="modal_PlanMember.show()">

		</div>
		<div class="col text-center">

			<h5 class="text-secondary">Case Status</h5>
			<h2>{{SC_GetCaseAndPM.data.query1[0].Status}}</h2><img src="../assets/images/gold-binder.jpg" width="300" dmx-on:click="modal_CaseInfo.show()">
		</div>
		<div class="col text-center">
			<h5 class="text-secondary">Payment Method</h5>

			<h2 class="text-dark">{{SC_GetCaseAndPM.data.query1[0].PaymentMethod}}</h2><img src="../assets/images/gold-plaine-coin.png" width="300" dmx-on:click="modal_PmtMethod.show()">
		</div>

	</div>
</div>
<?php include '../webSecurity/ssi-footer.php'; ?>
<div class="modal" id="modal_PlanMember" is="dmx-bs4-modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header bg-primary">
				<h5 class="modal-title text-light">Plan Member Information</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form is="dmx-serverconnect-form" id="serverconnectform_PM1" method="post" action="../dmxConnect/api/Cases/Upd_PM_BaseInfo.php" dmx-generator="bootstrap4" dmx-form-type="horizontal" dmx-populate="SC_GetCaseAndPM.data.query1">
					<input type="hidden" class="form-control" id="inp_idPMEMBER" name="idPMEMBER" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].idPMEMBER" aria-describedby="inp_Firstname_help" placeholder="Enter Firstname">
					<div class="form-group row">
						<label for="inp_Firstname" class="col-sm-3 col-form-label">Firstname</label>
						<div class="col-sm-9 ">
							<input type="text" class="form-control" id="inp_Firstname" name="Firstname" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Firstname" aria-describedby="inp_Firstname_help" placeholder="Enter Firstname" required=""
								maxlength="30">

						</div>
					</div>
					<div class="form-group row">
						<label for="inp_Lastname" class="col-sm-3 col-form-label">Lastname</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="inp_Lastname" name="Lastname" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Lastname" aria-describedby="inp_Lastname_help" placeholder="Enter Lastname" required=""
								maxlength="30">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_Email" class="col-sm-3 col-form-label">Email</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="inp_Email" name="Email" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Email" aria-describedby="inp_Email_help" placeholder="Enter Email" maxlength="45">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_DOB" class="col-sm-3 col-form-label">Date of Birth</label>
						<div class="col-sm-9">
							<input id="inp_DOB" name="DOB" is="dmx-date-picker" format="YYYY-MM-DD" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].DOB" dmx-bind:mindate="id_today.datetime.addYears(-90)"
								dmx-bind:maxdate="id_today.datetime.addYears(-15)">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_Sex" class="col-sm-3 col-form-label">Sex</label>
						<div class="col-sm-9">
							<div class="form-group" is="dmx-radio-group" id="group1" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Sex">
								<div class="form-check">
									<input class="form-check-input" type="radio" value="M" id="input1" name="Sex">
									<label class="form-check-label" for="input1">Male</label>
								</div>
								<div class="form-check">
									<input class="form-check-input" type="radio" value="F" id="input2" name="Sex">
									<label class="form-check-label" for="input2">Female</label>
								</div>
							</div>

						</div>
					</div>


					<div class="form-group row">
						<label for="inp_PlanNum" class="col-sm-3 col-form-label">Plan#</label>
						<div class="col-sm-9">
							<div class="form-group" is="dmx-radio-group" id="group2" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].PlanNum">
								<div class="form-check">
									<input class="form-check-input" type="radio" value="793" id="input3" name="PlanNum">
									<label class="form-check-label" for="input3">Plan 793</label>
								</div>
								<div class="form-check">
									<input class="form-check-input" type="radio" value="793X" id="input3" name="PlanNum">
									<label class="form-check-label" for="input3">Plan 793X</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_CertificateNum" class="col-sm-3 col-form-label">Certificate#</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="inp_CertificateNum" name="CertificateNum" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].CertificateNum" aria-describedby="inp_CertificateNum_help"
								placeholder="Enter Certificate Number" readonly data-rule-digits="" data-msg-maxlength="" data-msg-min="" data-msg-max="" maxlength="9">
						</div>
					</div>
					<div class="form-group row">
						<label class="col-sm-3 col-form-label">Registration#</label>

						<div class="col-sm-9">
							<input type="text" class="form-control" id="inp_UnionRegistrationNum" name="UnionRegistrationNum" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].UnionRegistrationNum" aria-describedby="inp_UnionRegistrationNum_help"
								placeholder="Enter Union Registration #" data-rule-digits="" data-msg-max="" maxlength="9" data-msg-number="" minlength="9">
						</div>
					</div>
				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal" dmx-on:click="modal_PlanMember.serverconnectform_PM1.reset();modal_PlanMember.hide()">Discard</button>
				<button type="button" class="btn btn-primary" dmx-on:click="modal_PlanMember.serverconnectform_PM1.submit();modal_PlanMember.hide()">Save changes</button>
			</div>
		</div>
	</div>
</div>
<div class="modal" id="modal_PmtMethod" is="dmx-bs4-modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header bg-primary">
				<h5 class="modal-title">Payment Preferences</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<form method="post" action="../dmxConnect/api/Cases/Upd_PM_PmtDetails.php" dmx-generator="bootstrap4" dmx-form-type="horizontal" dmx-populate="querymgr_GetCaseAndPM" is="dmx-serverconnect-form" id="serverconnectform_PM2"
					dmx-on:success="modal_PmtMethod.alert_PM2.show();modal_PmtMethod.alert_PM2.setType('success');modal_PmtMethod.alert_PM2.setTextContent('Record updated!')"
					dmx-on:error="modal_PmtMethod.alert_PM2.show();modal_PmtMethod.alert_PM2.setType('warning');modal_PmtMethod.alert_PM2.setTextContent('Error updating the record!')">




					<input type="hidden" class="form-control" id="inp_idPMEMBER" name="idPMEMBER" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].idPMEMBER" aria-describedby="inp_idPMEMBER_help" placeholder="Enter Id pmember">
					<div class="form-group row">
						<label for="inp_SIN" class="col-sm-3 col-form-label">SIN</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="inp_SIN" name="SIN" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].SIN" aria-describedby="inp_SIN_help" placeholder="Enter Social Insurance Number" required=""
								data-msg-pattern="" data-rule-digits="" data-msg-maxlength="Social Insurance Number should be 9 digits" data-msg-max="" maxlength="9">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_TaxExempted" class="col-sm-3">Tax status</label>
						<div class="col-sm-9">
							<div class="custom-control custom-switch">
								<input class="custom-control-input" type="checkbox" value="" id="id_TaxExempted" name="TaxExempted" dmx-bind:checked="SC_GetCaseAndPM.data.query1[0].TaxExempted.contains(1)">
								<label class="custom-control-label" for="id_TaxExempted">Exempted</label>
							</div>
						</div>
					</div>
					<div class="form-group row" id="id_Preference">
						<label for="inp_PaymentMethod" class="col-sm-3">Preference</label>
						<div class="col-sm-9">
							<select id="sel_PaymentMethod" class="form-control" name="PaymentMethod" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].PaymentMethod">



								<option value="NOT SET">NOT SET</option>
								<option value="CHEQUE">CHEQUE</option>
								<option value="EFT">EFT</option>
							</select>
						</div>
					</div>

					<div class="flex-column" id="fc_CHEQUE" dmx-show="(sel_PaymentMethod.value == &quot;CHEQUE&quot;)">
						<h6>Enter the mailing address of the cheques</h6>
						<div class="form-group row" id="id_Address">
							<label for="inp_Address" class="col-sm-3 col-form-label">Address</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_Address" name="Address" dmx-bind:value="querymgr_GetCaseAndPM.Address" aria-describedby="inp_Address_help" placeholder="Enter Address">
							</div>
						</div>
						<div class="form-group row" id="id_City">
							<label for="inp_City" class="col-sm-3 col-form-label">City</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_City" name="City" dmx-bind:value="querymgr_GetCaseAndPM.City" aria-describedby="inp_City_help" placeholder="Enter City">
							</div>
						</div>
						<div class="form-group row" id="id_Province">
							<label for="inp_Province" class="col-sm-3 col-form-label">Province</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_Province" name="Province" dmx-bind:value="querymgr_GetCaseAndPM.Province" aria-describedby="inp_Province_help" placeholder="Enter Province">
							</div>
						</div>
						<div class="form-group row" id="id_PostalCode">
							<label for="inp_PostalCode" class="col-sm-3 col-form-label">Postal code</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_PostalCode" name="PostalCode" dmx-bind:value="querymgr_GetCaseAndPM.PostalCode" aria-describedby="inp_PostalCode_help" placeholder="Enter Postal code">
							</div>
						</div>
						<div class="form-group row" id="id_Country">
							<label for="inp_Country" class="col-sm-3 col-form-label">Country</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_Country" name="Country" dmx-bind:value="querymgr_GetCaseAndPM.Country" aria-describedby="inp_Country_help" placeholder="Enter Country">
							</div>
						</div>
					</div>
					<div id="cont_CHEQUE" dmx-show="(sel_PaymentMethod.value == &quot;CHEQUE&quot;)">





					</div>
					<div id="cont_EFT" dmx-show="(sel_PaymentMethod.value == &quot;EFT&quot;)">





					</div>
























					<div class="flex-column" id="fc_EFT" dmx-show="(sel_PaymentMethod.value == &quot;EFT&quot;)">

						<h6>Enter your Bank's information</h6>
						<div class="form-group row" id="id_InstitutionCode">
							<label for="inp_BankInstitutionCode" class="col-sm-3 col-form-label">Bank code</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_BankInstitutionCode" name="BankInstitutionCode" dmx-bind:value="querymgr_GetCaseAndPM.BankInstitutionCode" aria-describedby="inp_BankInstitutionCode_help"
									placeholder="Enter Bank institution code">
							</div>
						</div>
						<div class="form-group row" id="id_Branch">
							<label for="inp_BankTransitBranch" class="col-sm-3 col-form-label">Transit/Branch</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_BankTransitBranch" name="BankTransitBranch" dmx-bind:value="querymgr_GetCaseAndPM.BankTransitBranch" aria-describedby="inp_BankTransitBranch_help"
									placeholder="Enter Bank transit branch">
							</div>
						</div>
						<div class="form-group row" id="id_Account">
							<label for="inp_BankAccount" class="col-sm-3 col-form-label">Account</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_BankAccount" name="BankAccount" dmx-bind:value="querymgr_GetCaseAndPM.BankAccount" aria-describedby="inp_BankAccount_help" placeholder="Enter Bank account">
							</div>
						</div>





					</div>
					<div class="form-row bg-warning mw-100" dmx-hide="(sel_PaymentMethod.value == &quot;NOT SET&quot;)">
						<h6>Date when Accounting should be notified</h6>
						<div class="form-group row">
							<label for="input4" class="col-sm-3 col-form-label">Notify on</label>
							<div class="col-sm-9 col">
								<input id="inp_EffDate" name="EffectiveDate" is="dmx-date-picker" dmx-bind:mindate="id_today.datetime" dmx-bind:maxdate="id_today.datetime.addDays(60)" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].EffectiveDate"
									format="YYYY-MM-DD"><small id="input4_help" class="form-text text-muted">The change will be effected by the next payday</small>
							</div>
						</div>
					</div>

				</form>
			</div>
			<div class="modal-footer">
				<div class="alert fade" id="alert_PM2" is="dmx-bs4-alert" role="alert">
					<p>This is a nice alert!</p>
				</div>
				<button type="button" class="btn btn-secondary" data-dismiss="modal" dmx-on:click="modal_PmtMethod.serverconnectform_PM2.reset()">Close</button>
				<button type="button" class="btn btn-primary" dmx-on:click="modal_PmtMethod.serverconnectform_PM2.submit()">Save changes</button>
			</div>
		</div>
	</div>
</div>
<div class="modal" id="modal_CaseInfo" is="dmx-bs4-modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header bg-primary">
				<h5 class="modal-title">Case Information</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<p>Modal body text goes here.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Hi,
Thank you for looking into this. I thought I inserted the right code, but maybe I goofed, so I’m inserting it in this message. (Sorry if this is an unncessary repeat. I can no longer edit the previous message to let the readers know, so I hope that if someone reads that one, he or she reads this one too.)

As said before, I’m not a programmer and I’m only in week 2 of learning Wappler, but prompted by your comments I inspected the code – gosh, I really hoped that I would never have to do something like that :slight_smile: – and noticed a couple of things:

a) There are two empty “flex containers” or what looks like them, in the code view, in lines 257 and 264, but the App Structure does not show them. This may be what @Sid was looking for.
b) Line 224 looks funny to me. It has a <div (I’ll google “div” later to learn what it is ) class=flex-column (I don’t know how that class appeared there, I don’t think I put it) and it has the conditional dmx-show statement inside it. This is probably what makes the program still work as expected, even though the App Structure area does not show any container. That said. I did not put it there, or at least, not willingly. Remember, I just tried to move one Title from one flex container to another and then all this mess happened.

So the questions are:

  1. Is this a bug or a user knowledge problem? If the latter, what did I do wrong?
  2. Irrespective of the above, how do I fix this without recreating the page. Is the “right way” to work in the Code View, cutting and pasting the code and editing where appropriate?
  3. Should I use a “Form Row” instead of a “Flex Container” to hold the fields that need to be shown or hidden? I found that a Form Row allows me to do what I wanted, much like the Flex Container. In case it’s not obvious, I don’t know the difference between them.

PS1: Possible enhancement to Wappler: When presenting the objects to select in the App Structure, provide a quick summary on what the object is used for when hovering it, or a pointer to where to learn about it.

PS2: On a totally unrelated note, I never looked in the code view before (why should I, right?) but now that I’m doing it, I see little thin green and orange lines to the left of the page. Do they mark the lines that have been inserted or changed since the last GIT change?

Thank you for all your help!!

<!doctype html>

Edit Case
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>
<script src="../dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxValidator/dmxValidator.css">
<script src="../dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Collapse/dmxBootstrap4Collapse.js" defer=""></script>
<script src="../dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer=""></script>
<script src="../dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
<script src="../dmxAppConnect/dmxTyped/dmxTyped.js" defer=""></script>
<script src="../dmxAppConnect/dmxTyped/typed.min.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/daterangepicker.min.css">
<script src="../dmxAppConnect/dmxDatePicker/daterangepicker.min.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/dmxDatePicker.css">
<script src="../dmxAppConnect/dmxDatePicker/dmxDatePicker.js" defer=""></script>

<script src="../dmxAppConnect/dmxBootstrap4Alert/dmxBootstrap4Alert.js" defer=""></script>
<dmx-serverconnect id="SC_GetCaseAndPM" url="../dmxConnect/api/Cases/GetCaseAndPMember.php" dmx-param:caseid="query.caseid"></dmx-serverconnect>
<dmx-query-manager id="querymgr_GetCaseAndPM"></dmx-query-manager>








<?php include '../webSecurity/ssi-header.php'; ?>
<div class="container-fluid">
	<div class="row">
		<div class="col"></div>
	</div>
	<div class="row justify-content-center pt-5">

		<div class="col text-center">


			<h5 class="text-secondary">Plan Member</h5>

			<h2 class="text-dark">{{SC_GetCaseAndPM.data.query1[0].Firstname+' '+SC_GetCaseAndPM.data.query1[0].Lastname}}</h2>

			<img src="../assets/images/vest-gold.jpg" width="300" dmx-on:click="modal_PlanMember.show()">

		</div>
		<div class="col text-center">

			<h5 class="text-secondary">Case Status</h5>
			<h2>{{SC_GetCaseAndPM.data.query1[0].Status}}</h2><img src="../assets/images/gold-binder.jpg" width="300" dmx-on:click="modal_CaseInfo.show()">
		</div>
		<div class="col text-center">
			<h5 class="text-secondary">Payment Method</h5>

			<h2 class="text-dark">{{SC_GetCaseAndPM.data.query1[0].PaymentMethod}}</h2><img src="../assets/images/gold-plaine-coin.png" width="300" dmx-on:click="modal_PmtMethod.show()">
		</div>

	</div>
</div>
<?php include '../webSecurity/ssi-footer.php'; ?>
<div class="modal" id="modal_PlanMember" is="dmx-bs4-modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header bg-primary">
				<h5 class="modal-title text-light">Plan Member Information</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form is="dmx-serverconnect-form" id="serverconnectform_PM1" method="post" action="../dmxConnect/api/Cases/Upd_PM_BaseInfo.php" dmx-generator="bootstrap4" dmx-form-type="horizontal" dmx-populate="SC_GetCaseAndPM.data.query1">
					<input type="hidden" class="form-control" id="inp_idPMEMBER" name="idPMEMBER" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].idPMEMBER" aria-describedby="inp_Firstname_help" placeholder="Enter Firstname">
					<div class="form-group row">
						<label for="inp_Firstname" class="col-sm-3 col-form-label">Firstname</label>
						<div class="col-sm-9 ">
							<input type="text" class="form-control" id="inp_Firstname" name="Firstname" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Firstname" aria-describedby="inp_Firstname_help" placeholder="Enter Firstname" required=""
								maxlength="30">

						</div>
					</div>
					<div class="form-group row">
						<label for="inp_Lastname" class="col-sm-3 col-form-label">Lastname</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="inp_Lastname" name="Lastname" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Lastname" aria-describedby="inp_Lastname_help" placeholder="Enter Lastname" required=""
								maxlength="30">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_Email" class="col-sm-3 col-form-label">Email</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="inp_Email" name="Email" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Email" aria-describedby="inp_Email_help" placeholder="Enter Email" maxlength="45">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_DOB" class="col-sm-3 col-form-label">Date of Birth</label>
						<div class="col-sm-9">
							<input id="inp_DOB" name="DOB" is="dmx-date-picker" format="YYYY-MM-DD" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].DOB" dmx-bind:mindate="id_today.datetime.addYears(-90)"
								dmx-bind:maxdate="id_today.datetime.addYears(-15)">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_Sex" class="col-sm-3 col-form-label">Sex</label>
						<div class="col-sm-9">
							<div class="form-group" is="dmx-radio-group" id="group1" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Sex">
								<div class="form-check">
									<input class="form-check-input" type="radio" value="M" id="input1" name="Sex">
									<label class="form-check-label" for="input1">Male</label>
								</div>
								<div class="form-check">
									<input class="form-check-input" type="radio" value="F" id="input2" name="Sex">
									<label class="form-check-label" for="input2">Female</label>
								</div>
							</div>

						</div>
					</div>


					<div class="form-group row">
						<label for="inp_PlanNum" class="col-sm-3 col-form-label">Plan#</label>
						<div class="col-sm-9">
							<div class="form-group" is="dmx-radio-group" id="group2" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].PlanNum">
								<div class="form-check">
									<input class="form-check-input" type="radio" value="793" id="input3" name="PlanNum">
									<label class="form-check-label" for="input3">Plan 793</label>
								</div>
								<div class="form-check">
									<input class="form-check-input" type="radio" value="793X" id="input3" name="PlanNum">
									<label class="form-check-label" for="input3">Plan 793X</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_CertificateNum" class="col-sm-3 col-form-label">Certificate#</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="inp_CertificateNum" name="CertificateNum" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].CertificateNum" aria-describedby="inp_CertificateNum_help"
								placeholder="Enter Certificate Number" readonly data-rule-digits="" data-msg-maxlength="" data-msg-min="" data-msg-max="" maxlength="9">
						</div>
					</div>
					<div class="form-group row">
						<label class="col-sm-3 col-form-label">Registration#</label>

						<div class="col-sm-9">
							<input type="text" class="form-control" id="inp_UnionRegistrationNum" name="UnionRegistrationNum" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].UnionRegistrationNum" aria-describedby="inp_UnionRegistrationNum_help"
								placeholder="Enter Union Registration #" data-rule-digits="" data-msg-max="" maxlength="9" data-msg-number="" minlength="9">
						</div>
					</div>
				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal" dmx-on:click="modal_PlanMember.serverconnectform_PM1.reset();modal_PlanMember.hide()">Discard</button>
				<button type="button" class="btn btn-primary" dmx-on:click="modal_PlanMember.serverconnectform_PM1.submit();modal_PlanMember.hide()">Save changes</button>
			</div>
		</div>
	</div>
</div>
<div class="modal" id="modal_PmtMethod" is="dmx-bs4-modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header bg-primary">
				<h5 class="modal-title">Payment Preferences</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<form method="post" action="../dmxConnect/api/Cases/Upd_PM_PmtDetails.php" dmx-generator="bootstrap4" dmx-form-type="horizontal" dmx-populate="querymgr_GetCaseAndPM" is="dmx-serverconnect-form" id="serverconnectform_PM2"
					dmx-on:success="modal_PmtMethod.alert_PM2.show();modal_PmtMethod.alert_PM2.setType('success');modal_PmtMethod.alert_PM2.setTextContent('Record updated!')"
					dmx-on:error="modal_PmtMethod.alert_PM2.show();modal_PmtMethod.alert_PM2.setType('warning');modal_PmtMethod.alert_PM2.setTextContent('Error updating the record!')">




					<input type="hidden" class="form-control" id="inp_idPMEMBER" name="idPMEMBER" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].idPMEMBER" aria-describedby="inp_idPMEMBER_help" placeholder="Enter Id pmember">
					<div class="form-group row">
						<label for="inp_SIN" class="col-sm-3 col-form-label">SIN</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="inp_SIN" name="SIN" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].SIN" aria-describedby="inp_SIN_help" placeholder="Enter Social Insurance Number" required=""
								data-msg-pattern="" data-rule-digits="" data-msg-maxlength="Social Insurance Number should be 9 digits" data-msg-max="" maxlength="9">
						</div>
					</div>
					<div class="form-group row">
						<label for="inp_TaxExempted" class="col-sm-3">Tax status</label>
						<div class="col-sm-9">
							<div class="custom-control custom-switch">
								<input class="custom-control-input" type="checkbox" value="" id="id_TaxExempted" name="TaxExempted" dmx-bind:checked="SC_GetCaseAndPM.data.query1[0].TaxExempted.contains(1)">
								<label class="custom-control-label" for="id_TaxExempted">Exempted</label>
							</div>
						</div>
					</div>
					<div class="form-group row" id="id_Preference">
						<label for="inp_PaymentMethod" class="col-sm-3">Preference</label>
						<div class="col-sm-9">
							<select id="sel_PaymentMethod" class="form-control" name="PaymentMethod" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].PaymentMethod">



								<option value="NOT SET">NOT SET</option>
								<option value="CHEQUE">CHEQUE</option>
								<option value="EFT">EFT</option>
							</select>
						</div>
					</div>

					<div class="flex-column" id="fc_CHEQUE" dmx-show="(sel_PaymentMethod.value == &quot;CHEQUE&quot;)">
						<h6>Enter the mailing address of the cheques</h6>
						<div class="form-group row" id="id_Address">
							<label for="inp_Address" class="col-sm-3 col-form-label">Address</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_Address" name="Address" dmx-bind:value="querymgr_GetCaseAndPM.Address" aria-describedby="inp_Address_help" placeholder="Enter Address">
							</div>
						</div>
						<div class="form-group row" id="id_City">
							<label for="inp_City" class="col-sm-3 col-form-label">City</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_City" name="City" dmx-bind:value="querymgr_GetCaseAndPM.City" aria-describedby="inp_City_help" placeholder="Enter City">
							</div>
						</div>
						<div class="form-group row" id="id_Province">
							<label for="inp_Province" class="col-sm-3 col-form-label">Province</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_Province" name="Province" dmx-bind:value="querymgr_GetCaseAndPM.Province" aria-describedby="inp_Province_help" placeholder="Enter Province">
							</div>
						</div>
						<div class="form-group row" id="id_PostalCode">
							<label for="inp_PostalCode" class="col-sm-3 col-form-label">Postal code</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_PostalCode" name="PostalCode" dmx-bind:value="querymgr_GetCaseAndPM.PostalCode" aria-describedby="inp_PostalCode_help" placeholder="Enter Postal code">
							</div>
						</div>
						<div class="form-group row" id="id_Country">
							<label for="inp_Country" class="col-sm-3 col-form-label">Country</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_Country" name="Country" dmx-bind:value="querymgr_GetCaseAndPM.Country" aria-describedby="inp_Country_help" placeholder="Enter Country">
							</div>
						</div>
					</div>
					<div id="cont_CHEQUE" dmx-show="(sel_PaymentMethod.value == &quot;CHEQUE&quot;)">





					</div>
					<div id="cont_EFT" dmx-show="(sel_PaymentMethod.value == &quot;EFT&quot;)">





					</div>
























					<div class="flex-column" id="fc_EFT" dmx-show="(sel_PaymentMethod.value == &quot;EFT&quot;)">

						<h6>Enter your Bank's information</h6>
						<div class="form-group row" id="id_InstitutionCode">
							<label for="inp_BankInstitutionCode" class="col-sm-3 col-form-label">Bank code</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_BankInstitutionCode" name="BankInstitutionCode" dmx-bind:value="querymgr_GetCaseAndPM.BankInstitutionCode" aria-describedby="inp_BankInstitutionCode_help"
									placeholder="Enter Bank institution code">
							</div>
						</div>
						<div class="form-group row" id="id_Branch">
							<label for="inp_BankTransitBranch" class="col-sm-3 col-form-label">Transit/Branch</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_BankTransitBranch" name="BankTransitBranch" dmx-bind:value="querymgr_GetCaseAndPM.BankTransitBranch" aria-describedby="inp_BankTransitBranch_help"
									placeholder="Enter Bank transit branch">
							</div>
						</div>
						<div class="form-group row" id="id_Account">
							<label for="inp_BankAccount" class="col-sm-3 col-form-label">Account</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="inp_BankAccount" name="BankAccount" dmx-bind:value="querymgr_GetCaseAndPM.BankAccount" aria-describedby="inp_BankAccount_help" placeholder="Enter Bank account">
							</div>
						</div>





					</div>
					<div class="form-row bg-warning mw-100" dmx-hide="(sel_PaymentMethod.value == &quot;NOT SET&quot;)">
						<h6>Date when Accounting should be notified</h6>
						<div class="form-group row">
							<label for="input4" class="col-sm-3 col-form-label">Notify on</label>
							<div class="col-sm-9 col">
								<input id="inp_EffDate" name="EffectiveDate" is="dmx-date-picker" dmx-bind:mindate="id_today.datetime" dmx-bind:maxdate="id_today.datetime.addDays(60)" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].EffectiveDate"
									format="YYYY-MM-DD"><small id="input4_help" class="form-text text-muted">The change will be effected by the next payday</small>
							</div>
						</div>
					</div>

				</form>
			</div>
			<div class="modal-footer">
				<div class="alert fade" id="alert_PM2" is="dmx-bs4-alert" role="alert">
					<p>This is a nice alert!</p>
				</div>
				<button type="button" class="btn btn-secondary" data-dismiss="modal" dmx-on:click="modal_PmtMethod.serverconnectform_PM2.reset()">Close</button>
				<button type="button" class="btn btn-primary" dmx-on:click="modal_PmtMethod.serverconnectform_PM2.submit()">Save changes</button>
			</div>
		</div>
	</div>
</div>
<div class="modal" id="modal_CaseInfo" is="dmx-bs4-modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header bg-primary">
				<h5 class="modal-title">Case Information</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<p>Modal body text goes here.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

The two empty divs that you are seeing, is probably something that broke when you were moving components around.

The other three divs all need to have a class d-flex for the app structure to understand what kind of div it is - Flex Container or Display Block etc.
App structure identifies HTML elements based on various classes and other attributes.

So, for now, just remove the two empty divs, add the class d-flex to the three divs as: <div class="d-flex flex-column"></div> in the code view, and saved the file & refresh the app structure. Things should look ok then.

As for your other questions…
Wappler is a visual development tool, but not without its short-comings. If you have zero programming experience, I am sorry to say but you need to first read up on what HTML, CSS & JS are and how they work. Then look into Bootstrap’s basics. Wappler is not a suitable tool for people just starting with web programming. You can start building stuff, but they will most-definitely break if you don’t actually understand how its working.

  1. The mix up in your case could be just another Wappler bug. If you can reproduce it with certain steps, create a new post and mark it as bug. It would get fixed.
  2. There is no right/wrong way. Wappler is an extremely powerful tool, built to work the way you want - provided you know how web development works. When I start with a project, I can work in the design view for sometime, but I always have to go into the code view as the project progresses.
  3. The components are all quite confusing to me too. I just use whatever looks fine for the UI. Form Row & Flex Container are just UI components. They don’t actually affect the feature set or functionality, unlike other components which do. So you need to understand that too before knowing which component to use. The documentation and help posts around the community do not cover everything. So if you don’t find what something is for, just add a new post under how-to.

PS1: Like I said, Wappler is not for beginners (yet). Once you know about basics of web development, you won’t need such summary text.

PS2: I’m not sure about the colours. Probably have something to do with Git. Have seen those too.

I really appreciate your quick response. I’ll try to do what you suggested to fix the page.
As for reproducing the bug, I’ll try to see if I can do that too. I think I was able to move some things and they worked well until one did not.
Many thanks again !!