[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Проьба посмотреть вид vue-instant-а
mstdmstd
Всех с наступающим !

Для поиска по введенной строке я добавил компонет vue-instant на страницу с кастомным дизайном :
                                    <div class="form-group">
<div
class="form-box">
<div
class="form-box__label"><span>Имя и фамилия</span></div>
<div
class="form-box__content">
<input
type="text" class="form-control" placeholder="Ваше имя" id="name"
v-model="form.name">
</div>
</div>
</div>

<div
class="form-group">
<div
class="form-box">
<div
class="form-box__label"><span>Город проживания</span></div>
<div
class="form-box__content" style="border: 0px dotted red !important; padding-right: 40px !important;">
<vue-instant
:suggestOnAllWords="true"
:suggestion-attribute="'title'"
v-model="form.city_title"
:disabled="false"
@selected="selected"
:show-autocomplete="true"
:autofocus="false" :suggestions="citiesSelectionArray"
style=" padding-right: -90px !important;"
class="form-control"
name="customName" placeholder="Выберите город" type="google">

</vue-instant>

</div>
</div>
</div>


И у этого компонет нужно сделать как у остальных инпутов и у меня не получилось это https://prnt.sc/24y1fgu
я пытался переопределить стили:
.sbx-google {
display: inline-block !important;
position: relative !important;
//width: 500px !important;
//width: 100% !important;
height: 41px !important;
white-space: nowrap !important;
//box-sizing: border-box !important;
box-sizing: unset !important; // THAT DOES NOT WORK
font-size: 14px !important;
border:none !important; // THAT DOES NOT WORK
//border:2px dotted green !important;
}

.sbx-google__input {
display: inline-block;
position: absolute !important;
left: 0 !important;
top: 0 !important;
transition: box-shadow .4s ease, background .4s ease;
border: none !important;
border-radius: 8px;
//box-shadow: inset 0 0 0 1px #cccccc;
background: rgba(255, 255, 255, 0);
padding: 0;
padding-right: 77px;
padding-left: 11px;
width: 100%;
height: 100%;
vertical-align: middle;
white-space: normal;
font-size: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

.sbx-google__submit { // Сделал кнопку справа невидимой
display: none !important;
}


Вживую :
http://photographers.my-demo-apps.tk/
Кнопка Войти - справа вверху
john_doe@site.com
11111111

и далее на http://photographers.my-demo-apps.tk/profile/edit/personal

Спасибо!
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.