Раскрывающийся список Wijmo Form Decorator и стилизация кнопок

Question

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

Я посмотрел на Wijmo Docs , но они не помогли.

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

Сценарий инициализации выглядит следующим образом:

<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>

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

Answer 1

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

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

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

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