Фильтр поиска JQuery Mobile

Question

Я пытаюсь выяснить, как увеличить размер панели фильтров поиска для jQuery mobile. Сейчас у меня есть содержимое 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%; 
} 

но ни один из них w orked. Я уверен, что я использую правильный класс для стилизации. Когда я сделал ctrl-shift-j в Chrome на коде, он показывает сегмент кода для строки поиска, который не находится в моем исходном коде, который, как я полагаю, генерируется установкой data-filter ="true" Любая помощь будет оценена!

Answer 1

Ваша главная проблема использования height: с процентом. От MDN:

рассчитывается по отношению к высоте содержащего блока. Если высота содержащего блока не указана явно , значение вычисляется автоматически. Процентная высота на корневом элементе (например,) относительно исходного блока (размеры которого равны размерам окна просмотра ).

Таким образом, это лучше либо а) установить высоту родителя <div data-role="content"> или б) установить высоту в количестве пикселей.

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

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

jsfiddle 1

и модификации input кода Thanassis_K от выше, то лучше не использовать процентные размеры шрифта по элементам кроме тега тела.Используйте px или em вместо:

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

jsfiddle 2

Answer 2

Вам, кажется, не хватает: в вашем коде рядом с размером шрифта. Попробуйте

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

и посмотреть, если это помогает

Answer 3

Если я правильно понимаю, вы хотите, чтобы увеличить высоту и размер шрифта <input> внутри панели фильтра, правильно?

Тогда вы могли бы сделать что-то вроде:

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

JSFiddle