I have been working on a simple form for testing and learning purposes. Initially, I used Scaffold New Razor Page in VS to create the form.
Afterward, I attempted to modify it in order to have two columns on the create page. Despite trying various methods, including CSS and Flexbox, I have been unsuccessful in achieving this. The form still displays everything in a single column.
I'm at a loss as to what I might be missing. The form does function correctly in terms of submitting and updating the database, but the layout remains a single column.
style>
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create two equal columns that sit next to each other */
.column {
flex: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
</style>
<h2>Create</h2>
<div class="row">
<form method="post">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="RebateDetail.RebateProgramId" class="control-label"></label>
<select asp-for="RebateDetail.RebateProgramId" class="form-control" asp-items="ViewBag.RebateProgramId"></select>
</div>
<div class="form-group">
<label asp-for="RebateDetail.RetailerId" class="control-label"></label>
<select asp-for="RebateDetail.RetailerId" class="form-control" asp-items="ViewBag.RetailerId"></select>
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
<div class="form-group">
<label asp-for="RebateDetail.FirstName" class="control-label"></label>
<input asp-for="RebateDetail.FirstName" class="form-control" />
<span asp-validation-for="RebateDetail.FirstName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="RebateDetail.LastName" class="control-label"></label>
<input asp-for="RebateDetail.LastName" class="form-control" />
<span asp-validation-for="RebateDetail.LastName" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create Simple" class="btn btn-default" />
</div>
</div>
</form>
</div>
UPDATE: I've moved the Form up and also realized that I wasn't using BS4. The current version works, and I am now going through tutorials to upgrade to BS4.
/* Create two equal columns that sit next to each other */
.inputColumns {
flex: 50%;
padding: 70px;
background-color:bisque;
}
</style>
<h2>Create</h2>
<form method="post">
<div class="row">
<div class="inputColumns" style="background-color:darkgray;">
<h2>Rebate Details</h2>
<p>This section is for the rebate amounts and info</p>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="RebateDetail.RebateProgramId"> Rebate Program ID</label>
<select asp-for="RebateDetail.RebateProgramId" class="form-control" asp-items="ViewBag.RebateProgramId"></select>
</div>
<div class="form-group">
<label asp-for="RebateDetail.RetailerId" class="control-label"></label>
<select asp-for="RebateDetail.RetailerId" class="form-control" asp-items="ViewBag.RetailerId"></select>
</div>