Vue - Bootstrap: увеличить ширину поля ввода + скорость реакции - PullRequest
Новая
       10

Vue - Bootstrap: увеличить ширину поля ввода + скорость реакции

0 голосов
/ 08 мая 2020

Я пытаюсь создать встроенную форму, которая содержит небольшой значок погоды, меню выбора и поле ввода для приложения погоды для страны, которое я создаю. Я застрял, когда дело доходит до увеличения ширины моего поля ввода, чтобы оно также было отзывчивым.

Прямо сейчас заполнитель полей ввода не полностью виден, и я бы хотел, чтобы он был + имел еще большую ширину жалеть.

Любая помощь приветствуется, спасибо!

Как это сейчас выглядит: What it currently looks like

Как я хочу, чтобы это выглядело:

What I want it to look like

Шаблон: 

<template>
  <div class="searchbar-container container">
    <b-form
      @submit.prevent="onSubmit(countrySelected, city)"
      class="form-content"
    >
      <div class="form-row">
        <div class="form-group weather-icon col-md-auto">
          <font-awesome-icon icon="cloud-sun" size="2x" />
        </div>
        <div class="form-group col-md-auto">
          <b-form-select v-model="countrySelected">
            <b-form-select-option value="AF">AF</b-form-select-option>
            <b-form-select-option
              v-for="country in countries"
              :key="country.code"
              :value="country.code"
              required
            >
              {{ country.code }}</b-form-select-option
            >
          </b-form-select>
        </div>
        <div class="form-group col-md-7">
          <b-input-group class="">
            <b-input
              class="country-input"
              placeholder="Please enter your location here..."
              v-model="city"
              required
            />
            <b-input-group-append @click="onSubmit(countrySelected, city)">
              <span class="input-group-text">
                <font-awesome-icon icon="search" />
              </span>
            </b-input-group-append>
          </b-input-group>
        </div>
      </div>
    </b-form>
  </div>
</template>

CSS: 

.searchbar-container {
  border-radius: 25px;
  -moz-box-shadow: 0 0 3px #ccc;
  -webkit-box-shadow: 0 0 3px #ccc;
  box-shadow: 0 0 3px #ccc;
  background-color: white;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 30px;
}

.form-content {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow : hidden;
}

.weather-icon {
  color: lightblue;
}

.form-group {
  margin-bottom: 0;
}

.form-inline .form-group {
  display: inline-block;
}

.country-input {
  border-right: none;
}

.input-group-text {
  background-color: white;
  cursor: pointer;
}
...