Увеличить размер TextBox - PullRequest
Новая
       22

Увеличить размер TextBox

0 голосов
/ 03 сентября 2018

Я создал форму и отображаю ее с помощью таблицы. Одно поле Full Name должно быть большим, поэтому я использовал colspan=2, но размер редактора или поля ввода не увеличивается, как показано на рисунке ниже.

enter image description here

Вот мой код. Пожалуйста, помогите мне. 

<tr>
  <td>
    <div class="form-group">
      @Html.LabelFor(m => m.EmpID, htmlAttributes: new { @class = "control-label col-md-5 first" })

      <div class="col-md-7">
        @Html.EditorFor(model => model.EmpID, new { htmlAttributes = new { @class = "form-control", disabled = "disabled" } }) @Html.ValidationMessageFor(m => m.EmpID, "", new { @class = "text-danger" })
      </div>
    </div>
  </td>

  <td colspan="2">
    <div class="form-group">
      @Html.LabelFor(model => model.FullName, htmlAttributes: new { @class = "control-label col-md-2" })


      <div class="col-md-10">
        @Html.EditorFor(model => model.FullName, new { htmlAttributes = new { @class = "form-control long-textbox", disabled = "disabled" } }) @Html.ValidationMessageFor(model => model.FullName, "", new { @class = "text-danger" })
      </div>
    </div>
  </td>

</tr>

1 Ответ

0 голосов
/ 03 сентября 2018

Вы можете добавить класс к метке (полное имя) и к полю ввода и указать, какую ширину должен занимать каждый элемент.

В моем примере ниже ширина установлена ​​на 150px для метки и 100% - 150px для поля ввода. С помощью функции calc() вы можете вычислять значения в CSS. 

table {
  width: 100%;
}

td {
  border: 1px solid #ccc;
  padding: 1rem;
}

/* specify how width the text label will be. */
label.full-width{
  width: 150px;
}

/* specify the width of 100% - the width from the label */
input.full-width {
  width: calc(100% - 150px);
  float: right;
}
<table>
  <tr>
    <td>row 1 - col 1</td>
    <td>row 1 - col 2</td>
  </tr>
  <tr>
    <td colspan=2>
      <label class="full-width">Full Name</label>
      <input class="full-width">
    </td>
  </tr>

Кроме того, в вашем коде нет необходимости использовать colspan=2. В моем примере я использовал его, чтобы проиллюстрировать, как его можно использовать. В этом примере две ячейки столбца перекрываются / перекрываются одной ячейкой.

...