Выпадающее меню Wijmo Form Decorator и проблема со стилем кнопок

Мы начали использовать Wijmo (на основе пользовательского интерфейса jQuery и JQuery UI Theme Roller) в одном из наших приложений, но возникла проблема с раскрывающимся списком и кнопкой в ​​стиле декоратора формы Wijmo.

Я просмотрел Документы Wijmo, но они не помогли.

Мы инициировали сценарий, и стиль применяется, однако во всех формах я не могу заставить раскрывающийся список правильно совпадать с другими элементами.

Сценарий запуска следующий:

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
        $("select").wijdropdown();
        $(":input[type='radio']").wijradio();
        $(":input[type='radio']").wijcheckbox();
        $("button").button();
    });
</script>

Как вы заметили, функции .button() и .wijdropdown() применяются к каждому экземпляру тега, а не к классу или идентификатору — у нас есть одна и та же проблема со всеми тремя методами, и мы пошли этим путем, поскольку это то, что требуется для всего приложения.

Вы можете увидеть скриншот проблемы здесь:

Скриншот выравнивания элементов

Я использовал Firebug, чтобы попытаться выяснить, в чем проблема, и я подозреваю, что часть ее заключается в том, что Wijmo преобразует элемент select в div и применяет JS для включения функциональности select.

Я использовал инструменты разработчика Firebug и Chrome для отладки этого, я заметил, что ни над, ни под любым элементом не применяется поле.

Я удалил все остальные таблицы стилей, кроме Wijmo или ThemeRoller, но без изменений. Мы используем тему «ракета», которая поставляется с Wijmo.

Каждый раз, когда я пытаюсь манипулировать свойством margin-top, он перестраивает все элементы, встроенные в поле поиска input непосредственно выше.

HTML-код формы:

<FORM id="serialSearch" name="serial_search" method="POST" action="index.php">
    <label>Serial number: </label><input type="text" name="query" id="query" size="30" autocomplete="off" value="<? echo $serial_query; ?>" />
    <br />
    <select name="searchType">
        <option value="standard">Standard</option>
        <option value="fuzzy">Fuzzy</option>
    </select>
    <button>Search serial numbers</button>
    <input type="hidden" name="serial_submit" id="serial_submit" value="search_serials" />
</FORM>

Для нас очень важно правильно выполнить это выравнивание и оценить любые предложения, заранее спасибо.


html alignment wijmo jquery-ui themeroller
person Ryan    schedule 10.02.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

вам нужно обернуть все элементы формы внутри div, скажем, с классом «ввод» и применить этот стиль к элементам div:

div.input {
    display: inline-block;
    vertical-align: top;
}

здесь вы можете увидеть jsfiddle, который показывает, как это выглядит.

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

person gigi    schedule 11.02.2012
comment
Спасибо за совет по скрипке, как вы увидите из моего профиля, я не задаю много вопросов - я склонен больше отвечать, чем спрашивать, поэтому я не думаю много возиться ... ваше решение, кажется, работает хорошо, просто жаль, что каждый элемент должен быть обернут, при первом чтении я этого не понял, но потом перепроверил вашу скрипку - какая боль! Ну что ж... спасибо за помощь, приятель - я ценю это! - person Ryan; 13.02.2012
comment
Я знаю, что обернуть их вокруг div сложно, но это также хороший выбор дизайна, если вам нужно изменить дизайн, вам просто нужно изменить css, а не html. - person gigi; 13.02.2012