индикатор загрузки автозаполнения

Question

индикатор загрузки автозаполнения

0

Я реализовал функцию автозаполнения для текстового поля в своем веб-приложении. Проблема здесь в том, что мое текстовое поле имеет ширину 100 пикселей. Индикатор загрузки - это фон css, добавленный в текстовое поле, когда пользователь начинает вводить в него текст.

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

Но так как указанный прилагается к текстовому полю (width = 100px), индикатор загрузки остается в нем.

Пожалуйста, дайте мне знать, как поместить индикатор загрузки в крайнее правое положение.

user2783853 03 март 2014, в 16:54

Источник

0

что ты уже испробовал? Можете ли вы привести нам пример разметки, которую вы используете, и CSS, который вы используете для позиционирования?
Jason M. Batchelor 03 март 2014, в 15:41
0

Покажите некоторый код.
cube 03 март 2014, в 15:42
2

Индикатор загрузки должен быть отдельным элементом с position:absolute набор.
athms 03 март 2014, в 15:42

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

что ты уже испробовал? Можете ли вы привести нам пример разметки, которую вы используете, и CSS, который вы используете для позиционирования?
Индикатор загрузки должен быть отдельным элементом с position:absolute набор.

SW4 · Answer 1 · 2014-03-03T14-14-00.000Z

Демо-версия Jsfiddle

Один из вариантов заключается в том, чтобы обернуть элементы в div обертку, а затем использовать :after псевдоселектора, чтобы добавить в ваш индикатор загрузки (просто текстовое image в демо, замените это на '' и используйте background-image вместе с height и width), Эти два примера показывают обоснование внутри входа справа или полностью через страницу вправо.

HTML

<div class='wrapper'><input type='text' /></div>
<br>
<div class='wrapper'><input type='text' /></div>

CSS

html, body{
    position:relative;
    width:100%;
    padding:0;
    margin:0;
}
input{
    width:100px;
}
.wrapper{
    display:inline-block;
}
.wrapper:first-child{
   position:relative;
}
.wrapper:after{
   position:absolute;
   content:'Image';
    right:0;
}