Question

我正在试图弄清楚如何增加jquery mobile的搜索过滤器栏的大小。现在我有一个带有以下ul标签的内容div：

<ul data-role="listview" id="alistview" data-inset="false" data-filter="true"></ul>

我的完整工作标题是：

<div data-role="page" id="aPage" data-hash="false">
    <div data-role="content">   
            <h3>Header</h3>     
        <ul data-role="listview" id="alistview" data-inset="false" data-filter="true"></ul>
    </div>
</div>

在我的CSS中我尝试了两种方法：

.ui-listview-filter{
    height: 10%;
    font-size 120%;
}

和

#alistview .ui-listview-filter{
    height: 10%;
    font-size 120%;
}

但他们都没有奏效。我很确定我正在使用正确的类来进行样式设计。当我在Chrome上的代码中执行ctrl-shift-j时，它会显示搜索栏的一段代码，这段代码不在我的源代码中，我假设是通过设置data-filter ="true"生成的。任何帮助都将不胜感激！

Answer 1

您的主要问题是使用height:百分比。来自MDN：

是根据高度来计算的包含块。如果包含块的高度不是明确指定，该值计算为auto。百分比高度根元素（例如）相对于初始元素包含块（其尺寸等于的尺寸）视口）。

因此，最好是 a）设置父<div data-role="content">的高度，或 b）将高度设置为像素数量。

使用原始代码编辑输入周围区域的间距：

.ui-listview-filter {
    height: 100px;
}

jsfiddle 1

并从上面修改Thanassis_K的input代码，最好不要在body标签以外的元素上使用百分比字体大小。请改用px或em：

.ui-listview-filter input {
    height: 100px;
    font-size: 2em;
}

jsfiddle 2

Answer 2

您似乎在font-size旁边的代码中缺少：尝试

.ui-listview-filter{
    height: 10%;
    font-size: 120%;
}

并查看是否有帮助

Answer 3

如果我理解正确，你想增加过滤条内<input>的高度和字体大小，对吗？

然后你可以这样做：

.ui-listview-filter input{
    height: 10%;
    font-size 120%;
}

JSFiddle

JQuery Mobile搜索过滤器

3 个答案: