Topic: DropDownListFor hidden behind Save button

scottpop@bigpond.com pro asked 4 years ago


  Hidden ControlHi,   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  

Jakub Strebeyko staff answered 4 years ago


Hi there Scottpop, MDB does not officially support MVC frameworks yet. The problem you are describing seems to have to do with styling, though - z-index would be my first shot. With Best Regards, Kuba

scottpop@bigpond.com pro commented 4 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 4 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, Kuba


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>

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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