The modal close icon and the text of the modal are incorrect

user_17788032 0
Viewed 53

enter image description here

<div class="modal-title-area">
  <div class="modal-name">
    @{ ViewBag.Title = "Kişisel Bilgiler"; } @EmployeeCardRes.PersonalInfo
  </div>
  <div class="modal-root-page tag-label">
    <i class="close icon"></i>
  </div>
</div>
<div class="modal-divider"></div>
<div class="modal-content-area">
  <div class="two-fields">
    <div class="field ">
      <div class="label">
        @EmployeeCardRes.FirstName @EmployeeCardRes.LastName
        <div class="text">@Model.FirstName @Model.LastName</div>
      </div>
    </div>
    <div class="field">
      <div class="label">@EmployeeCardRes.PositionCode
        <div class="text">@ViewBag.Position</div>
      </div>
    </div>
  </div>
</div>

Labels inside div need to correspond to posts. but the label is going down the text above how can I fix it.

enter image description here I want to do like that

css html javascript
1 Answers

You will want to split out your div elements for label and text for each row, so where you have

<div class="field">
  <div class="label">@EmployeeCardRes.PositionCode
    <div class="text">@ViewBag.Position</div>
  </div>
</div>

You should replace it with something more like this:

<div class="field">
  <div class="label">
    @EmployeeCardRes.PositionCode
  </div>
  <div class="text">
    @ViewBag.Position
  </div>
</div>

You can then use CSS to modify the way the DOM positions and displays them, something like the following will give you bold text and a little separation:

.label,
.text {
  display: inline-block;
  font-weight: bold;
  margin: 5px;
  min-width: 200px;
}
user_160350780
Related