JQuery UI модальный с правым полем при вводе текста

Question

Я пытаюсь избавиться от этих полей, но я изо всех сил пытаюсь найти, как и где это изменить. Я пытался переопределить jquery и bootstrap css, но безуспешно (играл с 0 полем). Класс, который применяет это поле, является «текстовым» классом - если я его удаляю, полей нет, но и остальное форматирование пропадает, что мне не подходит. Любые советы приветствуются

Это мое определение:

 <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4">    

                Street</label>
            <input type="text" name="CompanyStreet" id="CompanyStreet" value="" class="text ui-widget-content ui-corner-all"/>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3">


            <input type="text" name="PostCode" id="PostCode" value="" class="text ui-widget-content ui-corner-all"/>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3">
            <label for="CompanyCity">

            <input type="text" name="CompanyCity" id="CompanyCity" value="" class="text ui-widget-content ui-corner-all"/>  
            </div>

            <div class="col-lg-2 col-md-2 col-sm-2">
            <label for="CompanyCountry">

            <input type="text" name="CompanyCountry" id="CompanyCountry" value="" class="text ui-widget-content ui-corner-all"/> 
            </div> 
        </div>

Answer 1

Для v4 все, что вам нужно сделать, это применить no-gutters класс к вашему .row элементу. И несколько незначительных деталей стиля, таких как <input> border-radius или перенос сфокусированного ввода на передний план:

@media (min-width: 576px) {
  .my-row input {
    border-radius: 0;
    width: calc(100% + 1px);
  }
  .my-row input:focus {
    position: relative;
    z-index: 1;
  }
  .my-row .form-group:first-child input {
    border-radius: .25rem 0 0 .25rem;
  }
  .my-row .form-group:last-child input {
    border-radius: 0 .25rem .25rem 0;
    width: 100%;
  }
  .my-row label {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
    <div class="row no-gutters my-row">
        <div class="col-sm-4 form-group">
            <label for="CompanyStreet">Street</label>
            <input type="text" name="CompanyStreet" id="CompanyStreet"
            value="" class="form-control">
        </div>
        <div class="col-sm-3 form-group">
            <label for="PostCode">Post Code</label>
            <input type="text" name="PostCode" id="PostCode" value=""
            class="form-control">
        </div>
        <div class="col-sm-3 form-group">
            <label for="CompanyCity">Company City</label>
            <input type="text" name="CompanyCity" id="CompanyCity"
            value="" class="form-control">
        </div>
        <div class="col-sm-2 form-group">
            <label for="CompanyCountry">Company Country</label>
            <input type="text" name="CompanyCountry" id="CompanyCountry"
            value="" class="form-control">
        </div>
    </div>
</div>

То же самое, для v3:

@media (min-width: 768px) {
  .my-row > .form-group {
    padding: 0;
  }
  .my-row > .form-group label {
    cursor: pointer;
  }
  .my-row > .form-group input {
    border-radius: 0;
    width: calc(100% + 1px);
  }
  .my-row > .form-group input:focus {
    position: relative;
    z-index:1;
  }
  .my-row > .form-group:first-child {
    padding-left: 15px;
  }
  .my-row > .form-group:first-child input {
    border-radius: 4px 0 0 4px;
  }
  .my-row > .form-group:last-child {
    padding-right: 15px;
  }
  .my-row > .form-group:last-child input {
    border-radius: 0 4px 4px 0;
    width: 100%;
  }
  .form-group label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row my-row">
    <div class="col-sm-4 form-group">
      <label for="CompanyStreet">Street</label>
      <input type="text" name="CompanyStreet" id="CompanyStreet" value="" class="form-control">
    </div>
    <div class="col-sm-3 form-group">
      <label for="PostCode">Post Code</label>
      <input type="text" name="PostCode" id="PostCode" value="" class="form-control">
    </div>
    <div class="col-sm-3 form-group">
      <label for="CompanyCity">Company City</label>
      <input type="text" name="CompanyCity" id="CompanyCity" value="" class="form-control">
    </div>
    <div class="col-sm-2 form-group">
      <label for="CompanyCountry">Company Country</label>
      <input type="text" name="CompanyCountry" id="CompanyCountry" value="" class="form-control">
    </div>
  </div>
</div>

Примечание: ваша разметка недействительна, у нее довольно много незакрытых тегов. Возможно, вы захотите запустить его через валидатор .

Answer 2

извините, ребята, я понял это - это поля для начальной загрузки, а не элементы.я использовал ряд без водосточного желоба

Answer 3

Niether Bootstrap 3 или 4 имеет класс .text, так что это либо класс, который вы создали сами, либо он на самом деле ничего не делает.

Мне кажется, что пространство, которое вы видите, является, вероятно, "желобами" каждой колонны. Столбцы начальной загрузки имеют отступ по умолчанию 15 пикселей слева и справа, поэтому между двумя столбцами создается пространство размером 30 пикселей.

С учетом сказанного у вас есть три варианта:

1. Переопределите заполнение для столбцов и посмотрите, исправит ли это вашу проблему.

    [class^="col"] {
        padding: 0
    }

Вы можете более конкретно выбрать только эти столбцы, если это решение работает, чтобы применять его только к этим полям.

2. Поместите эти поля в один столбец и расположите их самостоятельно

Поскольку эти поля не обязательно должны быть в своих собственных столбцах, вы можете поставить попробовать col - * - 12 и поставить их пробелами самостоятельно. Это устранит заполнение по умолчанию между столбцами.

3. Примените класс no-gutter к строке и посмотрите, решит ли он вашу проблему.