There seems to be an issue with the placement of my buttons section in the markup. It does not appear after the DIV containing the select tag, but it does when placed before it.
I have tried moving the buttons section around to troubleshoot, and it does show up in the HTML. I suspect the problem lies with the DIV containing the select tag, but I am unable to pinpoint the exact issue with the select section.
Here is the provided markup:
<html lang="en-CA">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c7cacad1d6d1d7c4d5e5918b918b94">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="tagselectorparentPopup">
<div class="mb-0 pb-0 pl-3 pt-3 px-3 overflow-hidden">
<form id="tagselectorparent_Form">
<!-- The button section will appear if placed here ?????? -->
<!--
<div class="form-row justify-content-center">
<div class="form-group row col-12">
<div class="form-row">
<button type="button" class="btn btn-secondary" id="tagselectorparent_btnCancel">Cancel</button>
<button type="button" class="btn btn-primary" id="tagselectorparent_btnInsert">Insert</button>
</div>
</div>
</div>
-->
<!-- Select section -->
<div class="form-row">
<div class="form-group row col-12">
<label for="tagselectorparent_tagList" class="col-4 col-form-label">List of the Segment Components (Tags)</label>
<div class="col-6">
<div>
<select id="tagselectorparent_tagList" name="tagList" validationMessage="At least one tag is required" />
</div>
<span class="k-invalid-msg" data-for="tagList"></span>
</div>
</div>
</div>
<!-- Insert button section section -->
<!-- Nothing will appear after the select section ?? This selection will appear if placed above the select -->
<div class="form-row justify-content-center">
<div class="form-group row col-12">
<div class="form-row">
<button type="button" class="btn btn-secondary" id="tagselectorparent_btnCancel">Cancel</button>
<button type="button" class="btn btn-primary" id="tagselectorparent_btnInsert">Insert</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0908f90908592ce8a93a0d1ced1d6ced0">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a0805051e191e180b1a2a5e445e445b">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>