0

我们已经开始在我们的一个应用程序上使用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()and.wijdropdown()函数应用于标签的每个实例而不是类或 ID - 我们对所有 3 种方法都有相同的问题，并且采用这种方式，因为这是整个应用程序所需要的。

您可以在此处查看问题的屏幕截图：

元素对齐截图

我一直在使用 Firebug 来尝试找出问题所在，我怀疑部分原因是 Wijmo 将select元素转换为 adiv并应用 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>

正确对齐并感谢任何建议对我们来说非常重要，在此先感谢。

4

1 回答 1

0

您需要使用类“输入”将所有表单元素包装在 div 中，并将此样式应用于 div 元素：

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

在这里你可以看到一个 jsfiddle，它显示了它的样子。

作为建议，下次创建一个 jsfiddle 而不是屏幕截图，以便人们和您测试代码更容易。

于 2012-02-11T22:23:41.003 回答