0

一部の 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() の拡張) の両方で気付きました。何らかの理由で次の行の要素がインデントされているようです。

誰でもこれを手伝ってもらえますか?

どうもありがとう :)

4

1 に答える 1