Формы CSS ... это становится смешным - PullRequest
Новая
       14

Формы CSS ... это становится смешным

0 голосов
/ 19 июля 2009

Нижняя линия фронта вверх

Есть ли способ CSS решить эту проблему? Или мне придется взломать этот плагин jquery, который я использую, чтобы переместить динамический выпадающий элемент div за пределы формы, сделать абсолютную позицию и переместить ее обратно в форму?

(хммм, это поле 'tags' в stackoverflow выглядит как раз то, что мне нужно: -)

РЕДАКТИРОВАТЬ Исправлен пример страницы для проверки. Извините, мне следовало сделать это перед отправкой вопроса.

РЕДАКТИРОВАТЬ 20 июля: удаление CSS набора полей для z-index: 0 решает его для FireFox. Я протестировал http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ - который добавляет DIV к концу HTML-тела, который работает в кросс-браузерном режиме.

Фон

Простая форма с парой наборов полей с легендами. CSS ничего особенного: 

label { float:left; width: 150px; }
input { float: left; width: 132px; }
fieldset { position:relative; }

Примечание , что означает, что в HTML я делаю BR-тег с очисткой: слева от каждого входного тега.

-> Форма выглядит хорошо, все хорошо.

Цель вождения

Но, одно поле посередине содержит Слишком много данных (т. Е. Все основные коды патентных классификаций США). Следовательно, это должно быть ОЧЕНЬ более полезным. Я думаю ... автозаполнение ... сохранить совпадения, поэтому текстовое поле, которое "маркирует" совпадения ... и т. Д.

Отлично, это достаточно распространенная потребность. Итак, я использую плагин jquery для плагинов с текстовыми полями и множественным выделением. Есть только несколько, которые делают множественный выбор с автозаполнением. Выберите любой из них. Я перепробовал их все: -)

Все, как правило, используют $ (input) .insertAfter () некоторого фрагмента HTML-кода, который обычно заполняется через Javascript, чтобы содержать список UI / LI.

-> Всё ещё хорошо, пока нет дураков.

Проблема

Боже мой - легенды, наборы полей, чекбоксы, ВСЕ вплетается в содержимое выпадающего списка div / ul. Это НЕ проблема IE z-index.

  • позиция: абсолютное сглаживает это и не будет падать так хорошо, как навигационное меню, всплывающая подсказка, всплывающее окно css или что обычно делает
  • позиция: родственник перестает мешать, но ... ну ... теперь его родственник. Итак, набор полей контейнера растягивается вниз и т. Д.
  • firebug, макинг с использованием z-index / position и т. Д. В CSS просто не решит эту проблему.

Нужно ли взламывать плагин, чтобы вставить выпадающий фрагмент DIV вне формы? (затем позиция: абсолютная; z-индекс: 999; вверх / влево вернитесь обратно в форму) Или ... есть ли решение CSS?

Ссылка:

Ответы [ 6 ]

5 голосов
/ 19 июля 2009

Вы на самом деле не упоминали об этом в своем вопросе, но вы испытываете проблему только в IE, верно? Потому что я не могу воспроизвести его в любом другом браузере.

Ответ довольно прост:

Исправьте ваш тип документа!

Ваш текущий тип доктрины вызывает режим причуд , потому что отсутствует системный идентификатор. Следовательно, все ставки выключены. Измените его на строгий HTML4: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

Даже исправление вашего текущего типа документа должно сделать: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

Или, что еще лучше, используйте тип документа HTML5 (поскольку единственное, для чего подходят типы документов - это запуск режима стандартов, а это самый короткий тип документа, который вам необходим): 

<!DOCTYPE html>
1 голос
/ 19 июля 2009

Какую версию IE вы используете? Это известная проблема в IE6.

В IE6 селектами являются оконные объекты , что означает, что они существуют на плоскости над всеми другими элементами без окон на странице. Элемент Select в IE6 не поддерживает z-index и другие свойства .

Единственный способ, которым я надежно справился с этой проблемой, - скрыть выбор с помощью 'display: none', когда выбор покрывается другим элементом.

редактировать после комментария

Удаление z-index: 0 из form#newsearch div.fs, form#newsearch fieldset в base_new.css (строка 251) исправит это в FF

0 голосов
/ 21 июля 2009

ОК - я нашел ответ.

Существует нет чистого CSS-решения (которое я смог найти), которое позволяет раскрывающемуся списку существующего плагина jquery правильно перемещаться над всеми элементами формы.

Извлеченный урок : если они не обработали разметку должным образом ... вы ничего не можете сделать.

Вот что я сделал, чтобы исправить плагин Tokenizing Autocomplet Text Entry (jquery) от http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/

Измените файл jquery.tokeninput.js на:

  1. Измените, как он изначально вставляет DIV
    • Найдите место, где создается выпадающий список (var dropdown = ...)
    • Заменить его .insertAfter (список токенов) на .appendTo (document.body)
    • Это гарантирует, что разметка не в нормальной форме / HTML-поток
    • Сделайте это, когда код инициализирует и вставляет динамический "", который он собирается использовать
  2. Изменить его местоположение, когда он показывает DIV
    • Необходимо убедиться, что div расположен не внизу, а под полем ввода
    • Итак, в функции show_dropdown_searching () прикрепите их к строке вызовов, привязанных к выпадающему списку var (см. Ниже). Сделайте это как раз перед вызовом .show ().

. 

.css("position", "absolute")
.css("top", $(token_list).offset().top + $(token_list).height()) 
.css("left", $(token_list).offset().left)
0 голосов
/ 19 июля 2009

Просто ради интереса пытались ли вы использовать тэг clear: both CSS после плавающих чисел, чтобы увидеть, имеет ли это какой-либо эффект? Например. <br style="clear:both" />.

0 голосов
/ 19 июля 2009

Это очень много для подражания, но интересно, если вы попытались поместить элемент внутри тега

, тогда вы можете назначить информацию о стиле для div (например, высота и переполнение)?

При дальнейшей проверке вашего снимка экрана - это div, который появляется с возможными элементами - в этом ли проблема? Это не появляется над другими элементами формы? Я не уверен, что точно понимаю, но, основываясь на снимке экрана, похоже, что вы можете либо настроить zindex, либо прозрачность этого div сделает его полностью непрозрачным).

0 голосов
/ 19 июля 2009

Похоже на z-index проблему. Попробуйте увеличить z-index div, показанного для автозаполнения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...