Разрыв строки на входе меньше 100 пикселей, дисплей гибкий - PullRequest
Новая
       8

Разрыв строки на входе меньше 100 пикселей, дисплей гибкий

0 голосов
/ 29 ноября 2018

Я делаю поле поиска с тегами, но при добавлении более тегов X нет разрыва строки.

Вводим 100% - «элементы тега» (width: -webkit-fill-available;) но я хочу, чтобы разрыв строки был, например, если ввод со значением меньше 100px, потому что теперь поле ввода выходит из поля «inputholder».

Здесь у вас есть пример кода (Если вы нажмете ввод в поле ввода, элемент тега будет добавлен в поле ввода):

Это мой HTML: 

$(".search-input").keypress(function(e) {
  if (e.which == 13) {
    $('#inputtext').before('<span class="tag">test-tag</span>');
    $('.search-input').val('');
  }
});
.inputholder {
  /*border:1px solid black;*/
  display: flex;
  align-items: baseline;
  padding-left: 5px;
  float: left;
  background: #FAFAFA;
  border: 1px solid #ccc;
  color: #8D9BAF;
  width: 70%;
  /*padding:10px;*/
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.location-tag {
  cursor: pointer;
  padding: 0px;
  width: 20%;
}

.tag {
  padding: 7px;
  background-color: #AAA;
  border-radius: 20px;
  font-size: 15px;
  margin-right: 2px;
  color: white;
  text-align: center;
  white-space: nowrap;
  /*display: table-cell;*/
}

.tag-selected {
  background: #424242;
}

.inputholder input {
  border: 0 !important;
  padding: 12px !important;
  width: -webkit-fill-available;
  float: right;
  padding: 10px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background: transparent !important;
  color: #8D9BAF;
}

.inputholder input:focus {
  outline-width: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inputholder">
  <span class="tag location-tag">
        <i class="fas fa-map-marker-alt"></i> Ubicación
    </span>
  <input type="text" class="search-input" id="inputtext" />
</div>

1 Ответ

0 голосов
/ 29 ноября 2018 

$(".search-input").keypress(function(e) {
  if (e.which == 13) {
    $('#inputtext').before('<span class="tag">test-tag</span>');
    $('.search-input').val('');
  }
});
.inputholder {
  /*border:1px solid black;*/
  /*display: flex;*/
  align-items: baseline;
  padding-left: 5px;
  float: left;
  background: #FAFAFA;
  border: 1px solid #ccc;
  color: #8D9BAF;
  width: 70%;
  /*padding:10px;*/
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.location-tag {
  cursor: pointer;
  padding: 0px;
  width: 20%;
}

.tag {
display:inline-flex;
  padding: 7px;
  background-color: #AAA;
  border-radius: 20px;
  font-size: 15px;
  margin-right: 2px;
  color: white;
  text-align: center;
  white-space: nowrap;
  /*display: table-cell;*/
}

.tag-selected {
  background: #424242;
}

.inputholder input {
  border: 0 !important;
  padding: 12px !important;
  width: -webkit-fill-available;
  float: right;
  padding: 10px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background: transparent !important;
  color: #8D9BAF;
}

.inputholder input:focus {
  outline-width: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inputholder">
  <span class="tag location-tag">
        <i class="fas fa-map-marker-alt"></i> Ubicación
    </span>
  <input type="text" class="search-input" id="inputtext" />
</div>
...