Topic: DropDownListFor hidden behind Save button
Hi,
I have an MVC form which has a DropDownListFor control, which is displaying underneath my Save button. Any idea on how to fix this?
Thanks,
scottpop
This is my code:
@model SSTModel.SharePurchaseModel
@{
Layout = "~/Views/Shared/_DefaultLayout.cshtml";
}
<div class="card" style="margin-top: 50px;max-width: 500px">
<div class="card-body">
<div class="form-header blue accent-1">
<h3 class="mt-2">
Share Purchase
</h3>
</div>
@Html.ValidationSummary()
@using (Html.BeginForm())
{
@Html.HiddenFor(x => x.SharePurchase.Id)
@Html.HiddenFor(x => x.SharePurchase.PortfolioId)
<div class="form-group md-form form-sm mb-5">
@Html.TextBoxFor(x => x.SharePurchase.PurchaseDate, "{0:MM/dd/yyyy}", new {@class = "form-control form-control-sm validate", @id = "modalLRInput4" })
<label for="modalLRInput4">Purchase Date (format = MM/dd/yyyy)</label>
</div>
<div class="form-group md-form form-sm mb-5">
@Html.TextBoxFor(x => x.SharePurchase.ShareCode, new { @class = "form-control form-control-sm validate", @id = "modalLRInput1" })
<label for="modalLRInput1">Share Code</label>
</div>
<div class="form-group md-form form-sm mb-5">
@Html.TextBoxFor(x => x.SharePurchase.Quantity, new { @class = "form-control form-control-sm validate", @id = "modalLRInput2" })
<label for="modalLRInput2">Quantity</label>
</div>
<div class="form-group md-form form-sm mb-5">
@Html.TextBoxFor(x => x.SharePurchase.PurchasePrice, new { @class = "form-control form-control-sm validate", @id = "modalLRInput3" })
<label for="modalLRInput3">Purchase Price per Share</label>
</div>
<div class="form-group md-form form-sm mb-5">
@Html.TextBoxFor(x => x.SharePurchase.FinanceAmount, new {@class = "form-control form-control-sm validate", @id = "modalLRInput5"})
<label for="modalLRInput5">Amount Financed ($)</label>
</div>
<div class="form-group md-form form-sm mb-5">
@Html.TextBoxFor(x => x.SharePurchase.BrokerFees, new { @class = "form-control form-control-sm validate", @id = "modalLRInput8" })
<label for="modalLRInput8">Broker Fees on Purchase</label>
</div>
<div class="form-group md-form form-sm mb-5">
@Html.TextBoxFor(x => x.SharePurchase.SellDate, "{0:MM/dd/yyyy}", new { @class = "form-control form-control-sm validate", @id = "modalLRInput6" })
<label for="modalLRInput6">Date Sold (format = MM/dd/yyyy)</label>
</div>
<div class="form-group md-form form-sm mb-5">
@Html.TextBoxFor(x => x.SharePurchase.SellPrice, new { @class = "form-control form-control-sm validate", @id = "modalLRInput7" })
<label for="modalLRInput7">Sell Price per Share</label>
</div>
<div class="form-group md-form form-sm mb-5">
@Html.TextBoxFor(x => x.SharePurchase.SaleFees, new {@class = "form-control form-control-sm validate", @id = "modalLRInput9"})
<label for="modalLRInput9">Broker Fees on Sale</label>
</div>
<div class="form-group md-form form-sm mb-5">
@Html.DropDownListFor(x => x.SharePurchase.MarketCode, new SelectList(Model.Markets,"Code","Market"),new { @class = "mdb-select", @id = "modalLRInput10" })
<label for="modalLRInput10">Market</label>
</div>
<button type="submit" class="btn btn-primary">Save</button>
@Html.ActionLink("Cancel", "Index", "Home",null, new { @class = "btn btn-default" })
}
</div>
</div>
scottpop@bigpond.com pro commented 7 years ago
Thanks for your answer, Kuba. I suspect it's that MDB doesn't support MVC. I can't get checkboxes to work either. They all appear overlapped by other controls. ie: The Save button covers the control so that you can only see part of it. Z-order would place the control below rather than underneath.Jakub Strebeyko staff commented 7 years ago
Hi Scott, Seems like we are on the same page. If you suspect the problem is not related to current MDB incompatibility with MVC, please include a minimum jsfiddle / codepen buggy behavior example using the library, so the actual problem can be pinpointed and instantly fixed. I am not sure I get the below / underneath distinction. If controls overlap, my next suggestion would be fine-tuning margins and checking the display property. With Best Regards, KubaFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.10
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No