Custom search filter for JQuery Mobile

I'm currently working on adjusting the size of the search filter bar in jQuery Mobile. Within my content div, I have the following ul tag:

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

The complete header setup is as follows:

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

Within my CSS, I've attempted both of these methods for styling:

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

and:

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

Unfortunately, neither approach has achieved the desired result. I believe I am using the correct class for styling purposes. Upon inspecting the code in Chrome with ctrl-shift-j, I noticed a segment of code related to the search bar that isn't present in my source code, likely generated by setting data-filter ="true". Any assistance in resolving this issue would be greatly appreciated!

jqueryhtmlcssjquery-mobile

Answer №1

Your primary concern lies in the usage of height: with a percentage value. As stated on MDN:

The height property is calculated relative to the height of the containing block. When the height of the containing block is not explicitly defined, the value defaults to auto. A percentage height specified on the root element (e.g., ) is relative to the initial containing block (which has dimensions matching the viewport).

It's advisable to either a) set the parent element's height <div data-role="content">, or b) specify the height using pixels.

To adjust the spacing around the input area, you can use your original code snippet:

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

Referencing jsfiddle 1.

Furthermore, when modifying Thanassis_K's input code mentioned above, it's recommended to avoid percentage-based font sizes for elements other than the body tag. Instead, opt for px or em:

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

Check out jsfiddle 2.

Answer №2

It appears that a colon is missing in your code next to the font-size property. You can try:

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

and check if that resolves the issue.

Answer №3

If my understanding is correct, you are looking to adjust both the height and font size of the <input> element within the filter bar. Is that accurate?

To achieve this, you can try the following CSS code:

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

Check out the demo on JSFiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue Template ref Error: Unable to access scrollHeight property of null object

I'm currently working on creating a responsive sidebar in Vue, and I encountered an issue after refactoring my project to remove the state.js file. The problem is related to the dropdown/collapse elements, and it's throwing a TypeError: Cannot re ...

javascriptcssvue.jstypeerror

Is it possible to include a hidden default option that provides a description for my `select` tag?

Can someone help me create a description for the select tag that won't show up in the drop-down options? I remember seeing this done somewhere, but I can't recall where. Any suggestions? This is what I am trying to achieve: <fieldset> ...

jqueryhtmlcss

Dealing with session timeout in Yii CGridView by capturing Ajax response and addressing the issue

Currently, I am working with Yii MVC; The user has successfully logged in; My browser has 2 tabs open; From the second tab, I decide to log out the user, which also logs them out from the first tab; Next, I attempt to query the database using an AJAX c ...

phpjqueryajaxsessionyii

Developing a jsp page with interconnected drop down menus

I am looking to dynamically populate the options in a second drop-down based on the selection made in the first drop-down. For instance, if I have a first drop-down with options {India, South Africa, USA}, and I choose India, then the second drop-down shou ...

javascriptjqueryhtmlajax

My media queries refuse to cooperate until I add the magical "!important" declaration

Utilizing Bootstrap 4 along with a custom CSS file on my website. Within the CSS file, I have included some media queries at the bottom: @media (max-width: 575px) { .address .contact { text-align: center; } } /* Small devices (tablets, 768px and ...

cssbootstrap-4media-queries

In Firefox, the width of a CSS grid cell is larger than the actual content it contains

My dilemma involves a div with a height of 15vw and the desire to insert four images into this div (each image's size is 1920*1080 px). When using the code below, everything appears correctly in Chrome. However, in Firefox, each image size is 195*110 ...

cssfirefoxcss-grid

Interactive JQuery plugin for scrolling through thumbnails with customizable buttons

I am attempting to create a jQuery thumbnail scroller with buttons that respond to mousedown and mouseup events. I have successfully implemented the scrolling functionality, but I am facing issues when trying to refactor it into a reusable function. Below ...

javascriptjqueryhtmlcss

Update a dataset in asp.net

My webpage includes a form structured like this: @using (Html.BeginForm("AddRecipeLine", "Kitchen", FormMethod.Get, new { id = "addRecipeLine" })) { <div class="medium-4 columns"> @Html.DropDownList("ingredients", ...

jqueryasp.netajaxrazor

When using .each() within xmlhttp.send(), only the final record is sent

Currently, I am diving into the world of PHP and Ajax in order to work on a pet project without having the budget to hire a professional tech expert. :-) Here's the situation - I have selected data in an HTML table that is later sent to an update func ...

jqueryajaxeachxmlhttprequest

Creating an Array of dynamically generated elements using jQuery

A dynamic table is being generated using jQuery's .append() function: $el.append('<tr data-id=' + data[i].id + ' data-token=' + data[i].token + '><td>' + data[i].order + '</td>\n\<td&g ...

javascriptjqueryhtmlajax

What is the reason behind the blue appearance of this arrow on tablets?

I have written the following HTML code: <!DOCTYPE html> <html lang="en"> <head> <link href="style.css" rel="stylesheet"> </head> <body> <div>I have included this arrow symbol here: < ...

htmlcssresponsive-design

Generating dynamic data to be used in jQuery/ajax calls

I have a web method that I need to call using jQuery ajax. [System.Web.Services.WebMethod] public static int saveDataToServer(string cntName, string cntEmail, string cntMsg) { // Implementation } Here is my jQuery ajax calling method... functio ...

c#asp.netajaxjquery

Which should you choose: AngularJS directive or jQuery to toggle visibility of multiple items in an application?

Within this software application, there are multiple columns displayed in a table along with corresponding 'EDIT' and 'DELETE' buttons. In certain views, these columns may appear 6 or 7 times. While it is recommended to avoid jQuery man ...

jqueryperformanceangularjsdomangularjs-directive

When a text is wrapped by an HTML div using absolute positioning, is there a way to prevent it from wrapping without relying on white space

I have a group of div elements positioned absolutely on the screen. If any div contains content that is too big for the screen, the browser wraps it into multiple lines to fit. However, I do not want this behavior. Instead, I want the overflowing content ...

javascriptjquerycsshtml

What is the best way to display only li elements that possess a specific class utilizing javascript / jquery?

I have a bunch of li's: <ul> <li class="one"></li> <li class="one"></li> <li class="two"></li> </ul> and I want to display only the ones with the class "one" I attempted something like thi ...

javascriptjqueryfilterswitch-statementeach

"Utilizing a Font Awesome icon within the dropdown list of a combobox in Ext JS

I have attempted multiple methods to add an icon in the displayfield when a combo box item is selected without success. Here is the fiddle link for anyone who would like to help me with this issue. Your assistance is greatly appreciated. View the example ...

cssextjscomboboxiconsfont-awesome

What is the best method for ensuring that a hover dropdown remains active when clicked on?

Trying to create a drop-down menu with overflow options that extend into the next section upon hover. The goal is for users to be able to click on "Join Now" or "Learn More," but currently, the buttons disappear when moving down. HTML Code: <div class ...

htmlcss

Centering text within a dynamic div can help create a visually appealing design

While browsing through various forums, I noticed several questions on stackoverflow that touch upon a similar issue to mine. However, my particular problem is a bit unique, and despite my best efforts, I have not been able to find a solution yet. It's ...

csshtmlalignmentcentertext-alignment

What is the best way to pinpoint the initial and final elements in a row of variable entries within a grid?

These are the tools currently in use: Vuejs Jquery Packery with masonry layout The project involves creating a page that pulls content from JSON and fills the homepage with posts, products, and pages in a single loop. Each object in the loop is arranged ...

javascriptjqueryhtmlcssvue.js

Set Blueprint container with a full-width background that fills the entire browser window

I'm currently utilizing the Compass framework in conjunction with the Blueprint framework. Within my setup, I've configured a 24 column layout with a total width of 1000px declared in my base.scss file. The HTML structure appears as follows: & ...

csscompass-sassblueprint-css