Я пытаюсь создать встроенную форму, которая содержит небольшой значок погоды, меню выбора и поле ввода для приложения погоды для страны, которое я создаю. Я застрял, когда дело доходит до увеличения ширины моего поля ввода, чтобы оно также было отзывчивым.
Прямо сейчас заполнитель полей ввода не полностью виден, и я бы хотел, чтобы он был + имел еще большую ширину жалеть.
Любая помощь приветствуется, спасибо!
Как это сейчас выглядит:
Как я хочу, чтобы это выглядело:
Шаблон:
<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;
}