一部の html 要素のレイアウトに問題があります。分割して使いやすくするために、タブ付きの表示に変更しているフォームがあります。既存のフォームは次のようになります。
ただし、タブ内で同じコードを使用すると、結果は次のようになります。
私が述べたように、そのコードは以下とまったく同じです:
<div class="col-md-12" style="display:block;">
<div class="form-group">
@Html.LabelFor(model => model.CommunicationModel.Communication.Receiver, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.CommunicationModel.Communication.Receiver, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Receiver, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.CommunicationModel.Communication.Department.Name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DisplayFor(model => model.CommunicationModel.Communication.Department.Name)
@Html.ValidationMessageFor(model => model.CommunicationModel.Communication.DepartmentId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.CommunicationModel.Communication.DateOpened, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<span id="custSpan" style="font-size:14px;">
@Html.DisplayFor(model => model.CommunicationModel.Communication.DateOpened)
@Html.HiddenFor(model => model.CommunicationModel.Communication.DateOpened)
</span>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.CommunicationModel.Communication.Method, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EnumDropDownListFor(model => model.CommunicationModel.Communication.Method, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Method, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.CommunicationModel.Communication.Product, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.CommunicationModel.Communication.Product, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Product, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.CommunicationModel.Communication.PartNo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.CommunicationModel.Communication.PartNo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.CommunicationModel.Communication.PartNo, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.CommunicationModel.Communication.Description, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.CommunicationModel.Communication.Description, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Description, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.CommunicationModel.Communication.Severity.Description, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.CommunicationModel.Communication.SeverityId, new SelectList(Model.AllSeverities, "Id", "DisplayName"), new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
</div>
レイアウトに影響を与える特定の要素のようです。これまでのところ、Html.DisplayFor() と Html.EnumDropDownListFor() (標準の DropDownListFor() の拡張) の両方で気付きました。何らかの理由で次の行の要素がインデントされているようです。
誰でもこれを手伝ってもらえますか?
どうもありがとう :)