HTML elements are not going where I expect in ASP.NET MVC on .NET 4.8

Question

I've got an ASP.NET MVC project running on .NET Framework 4.8 - not ASP.NET Core MVC.

I have a support ticket to fix an upload issue with the page below. The upload issue is fixed, but I would like to clean up the form before submitting changes for review.

The elements of the web page above are added in "top-to-bottom" fashion using <p> blocks.

I've tried rewriting the HTML using <div> and <table> elements, but nothing I do will get the bottom part to line up. I was able to get the top half looking better.

I can't seem to figure out the size to use, but what is particularly disturbing me is that the <div class"row"> items are displaying as columns.

I have looked at Bootstrap examples, but they do not seem to work with the way this page is set up using the outer_grid with side-menu instructions.

I am trying to get the bottom boxes to be the same width as the top boxes, but I have not discovered the magic combination.

What have I done wrong? And how do I fix it?

@model Website1.Models.AssetManagerUploadModel @{ ViewBag.Title = "AddResource"; Layout = "~/Views/Shared/_Layout.cshtml"; } <style> #outer_grid { display: grid; grid-template-columns: 1fr 1fr; } #inner_grid { display: grid; grid-template-columns: 150px 200px; grid-gap: 15px; grid-column: 1/3; } #form_head { grid-column: 1/3; } .instructions ul li { list-style-type: circle !important; } .instructions ol li { list-style-type: decimal; } ul { padding-left: 20px !important; } </style> <script> function showMe(box, name) { const chboxs = document.getElementsByName(name); let vis1 = "none"; let vis2 = "none"; for (let i = 0; i < chboxs.length; i++) { if (chboxs[i].checked) { vis1 = "block"; vis2 = "none"; break; } else { vis1 = "none"; vis2 = "block"; break; } } document.getElementById(box).style.display = vis1; document.getElementById("FileToUploadDsp").style.display = vis2; } function GenerateTwo() { const cat1 = $("#CatOne").val(); const cat2 = $("#CatTwo"); $(cat2).find('option') .remove() .end(); $.get("@Url.Action("GenerateTwo")?CatOne=" + cat1, (res,status) => { if (res.length > 0 && res[0]!= null) { $(cat2).show(); $('#CatTwoBtn').show() $('#CatTwoLBL').show() } for (var i = 0; i < res.length && res[0] != null; i++) { $(cat2).append('<option value=\'' + res[i].trim() + '\'>' + res[i] + '</option>'); } }); }; function GenerateThree() { const cat1 = $("#CatOne").val(); const cat2 = $("#CatTwo").val(); const cat3 = $('#CatThree') $(cat3).find('option') .remove() .end(); $.get("@Url.Action("GenerateThree")?CatOne=" + cat1+"&CatTwo="+cat2, (res,status) => { if (res.length > 0 && res[0]!= null) { $(cat3).show(); $('#CatThreeBtn').show() $('#CatThreeLBL').show() } for(var i = 0; i < res.length && res[0]!= null; i++) { $(cat3).append('<option value=\'' + res[i].trim() + '\'>' + res[i] + '</option>'); } }); }; function GenerateFour() { const cat1 = $("#CatOne").val(); const cat2 = $("#CatTwo").val(); const cat3 = $("#CatThree").val(); const cat4 = $('#CatFour'); $(cat4).find('option') .remove() .end(); $.get("@Url.Action("GenerateFour")?CatOne=" + cat1+"&CatTwo="+cat2+"&CatThree="+cat3, (res,status) => { if (res.length > 0 && res[0]!= null) { $(cat4).show(); $('#CatFourBtn').show() $('#CatFourLBL').show() } for(var i = 0; i < res.length && res[0]!= null; i++) { $(cat4).append('<option value=\'' + res[i].trim() + '\'>' + res[i] + '</option>'); } }); } function FileNameFocus() { $('#txtFileNameToDisplay').focus(); } function TriggerTwo() { const val = $('#AddSectionTwo').val(); console.log(val); $('#CatTwo').append('<option value ="' + val + '">' + val + '</option>'); $("#CatTwo option:last").attr("selected", "selected"); } function TriggerThree() { const val = $('#AddSectionThree').val(); console.log(val); $('#CatThree').append('<option value ="' + val + '">' + val + '</option>'); $("#CatThree option:last").attr("selected", "selected"); } function TriggerFour() { const val = $('#AddSectionFour').val(); console.log(val); $('#CatFour').append('<option value ="' + val + '">' + val + '</option>'); $("#CatFour option:last").attr("selected", "selected"); } $(document).ready(function() { $('#CatTwo').hide(); $('#CatThree').hide(); $('#CatFour').hide(); $('#CatTwoBtn').hide(); $('#CatThreeBtn').hide(); $('#CatFourBtn').hide(); $('#CatTwoLBL').hide(); $('#CatThreeLBL').hide(); $('#CatFourLBL').hide(); var table = $('#DataTable').DataTable( { scrollY: 700, paging: false }); GenerateTwo(); showMe('ExternalYes', 'External'); }); </script> <div id="outer_grid"> @using (Html.BeginForm("AddPDFResource", "AssetManager", FormMethod.Post, new { enctype = "multipart/form-data" })) { <h3 id="form_head">Add New Digital Resource</h3> @Html.AntiForgeryToken(); <table class="table table-striped"> <thead> <tr> <th scope="col">Category</th> <th scope="col">Selection</th> <th scope="col"></th> </tr> </thead> <tbody> <tr> <th scope="row">One</th> <td>@Html.DropDownListFor(m => m.CategoryOne, new SelectList(Model.CategoryOneSelect), new { @onchange = "GenerateTwo()", @id = "CatOne" })</td> <td></td> </tr> <tr id="CatTwoLBL"> <th scope="row">Two</th> <td>@Html.DropDownListFor(m => m.CategoryTwo, new SelectList(new List<string>()), new { @onchange = "GenerateThree()", @id = "CatTwo" })</td> <td><a id="CatTwoBtn" data-toggle="modal" data-target="#TriggerTwo">Add New Section</a></td> </tr> <tr id="CatThreeLBL"> <th scope="row">Three</th> <td>@Html.DropDownListFor(m => m.CategoryThree, new SelectList(new List<string>()), new { @onchange = "GenerateFour()", @id = "CatThree" })</td> <td><a id="CatThreeBtn" data-toggle="modal" data-target="#TriggerThree">Add New Section</a></td> </tr> <tr id="CatFourLBL"> <th scope="row">Four</th> <td>@Html.DropDownListFor(m => m.CategoryFour, new SelectList(new List<string>()), new { @onchange = "FileNameFocus()", @id = "CatFour" })</td> <td><a id="CatFourBtn" data-toggle="modal" data-target="#TriggerFour">Add New Section</a></td> </tr> </tbody> </table> <div id="inner_grid" class="container table"> <div class="row" style="border:ridge;"> <div class="col-w-100">Filename to Display</div> <div class="col-w-100">@Html.TextBoxFor(model => model.DisplayName, "", new { @placeholder = "Enter Name", required = "required", @id = "txtFileNameToDisplay" })</div> </div> <div class="row" style="border:groove;"> <div class="col-w-50"> Image to Upload<br /> External? @Html.CheckBoxFor(model => model.External, new { onclick = "showMe('ExternalYes', 'External')" }) </div> <div class="col-w-50"> <p id="FileToUploadDsp">@Html.TextBoxFor(model => model.FileToUpload, "", new { @type = "file" })</p> <p id="ExternalYes">@Html.TextBoxFor(model => model.LinkToUpload, "", new { @placeholder = "Enter External Link" })</p> </div> </div> <div class="row" style="border:double;"> <div class="col-w-50"><input type="submit" value="Upload" /></div> <div class="col-w-50">@ViewBag.Message</div> </div> </div> } <div style="padding:10px;"> <h3>How To Upload A New Resource</h3><br /> <h5><strong>Required Files:</strong></h5> <ul class="instructions"> <li>A Page</li> <li>A File Name to Display</li> <li>Image to Upload OR External Link (Depending On the Page Selected</li> </ul> <h5>Steps:</h5> <ol class="instructions"> <li>Select a Page</li> <li>Select a Year (For Pricing Order Forms Only)</li> <li>Enter File Name to Display</li> <li>Click External Checkbox for Pricing Order Forms Only</li> <li>Enter External Link for Pricing Order Forms Only</li> <li>Select Choose File to Navigate to the Image to Upload</li> </ol> </div> </div> <div class="modal" tabindex="-1" role="dialog" id="TriggerTwo"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Add New Category For Section Two</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <label>Section Name:</label><input type="text" id="AddSectionTwo" value="" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="TriggerTwo()">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal" tabindex="-1" role="dialog" id="TriggerThree"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Add New Category For Section Three</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <label>Section Name:</label><input type="text" id="AddSectionThree" value="" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="TriggerThree()">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal" tabindex="-1" role="dialog" id="TriggerFour"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Add New Category For Section Four</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <label>Section Name:</label> <input type="text" id="AddSectionFour" value="" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="TriggerFour()">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>