DropDownListFor hidden behind Save button

Topic: DropDownListFor hidden behind Save button

scottpop@bigpond.com pro asked 6 years ago

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

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

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 6 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 6 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

Add comment

scottpop@bigpond.com pro answered 6 years ago

0 0 Best answer

<img class="img-fluid" src="C:\Users\Scott\SkyDrive\Documents\DropDownListFor.png" alt="" />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.

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>

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

scottpop@bigpond.com

Pro User 15Support score
1Questions 1Answers 0Snippets