ASP.NET Form Input - непредвиденное поведение ширины (не увеличивается на 100%) - PullRequest
0 голосов
/ 06 декабря 2018

Просто простая форма:

  • Проблема : <input> ширина не увеличивается до 100%
  • Я считаю, что ширина элемента установленадо 100%, если для него установлен класс form-control

Снимок экрана: Вывод из Visual Studio

  • Использование Visual Studio 2017 (MVC5ASP.NET C #) - тот же код, который используется ниже
  • И <input>, и <textarea> зафиксированы на некоторой ширине.Я не знаю почему !!Даже пытался явно указать style="width:100%", но не работает
  • Прекрасно работает , когда я пытаюсь запустить тот же код в (https://jsfiddle.net/Dhinesh_Ram/0yh4Lx7w/) или "Редакторе Tryit W3 школы")но не это Visual Studio
  • Браузеры, которые я пытался отлаживать: Chrome, IE, Edge

<link rel="stylesheet" href="https://bootswatch.com/3/lumen/bootstrap.min.css" />

<div class="well bs-component">
  <form class="form-horizontal">
    <fieldset>
      <legend>Feedback</legend>

      <div class="form-group">
        <label for="inputName" class="col-lg-2 control-label">Name</label>
        <div class="col-lg-10">
          <input type="text" class="form-control" id="inputName" placeholder="Enter your name" />
        </div>
      </div>

      <div class="form-group">
        <label for="textArea" class="col-lg-2 control-label">Message</label>
        <div class="col-lg-10">
          <textarea class="form-control" rows="3" id="textArea" placeholder="Your message"></textarea>
          <span class="help-block">Try to eloborate if its a Bug report, a screenshot would be helpful</span>
        </div>
      </div>

    </fieldset>
  </form>
</div>

1 Ответ

0 голосов
/ 02 августа 2019

Я нашел решение!

Перейдите на карту проекта и откройте папку: «Содержимое»

Затем вы ищете «site.css»

, затем выесть что-то вроде этого:

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

теперь измените максимальную ширину на 100%

max-width: 100%;
...