How to Customize a Jquery Mobile Panel

As I work on my first Jquery Mobile application, I have successfully implemented a panel for navigation. Inside the panel, I am using an unordered list (

<ul><li>home</li><li>search</li><li>... etc</li></ul>
) to create a series of links. However, I am facing issues when trying to style the attributes of the #header_panel such as adjusting the width or height of the <li> elements. Despite setting values for these properties in the CSS (#header_panel li), the changes do not reflect on the page. I would appreciate any assistance in achieving the desired layout where each <li> appears stacked underneath one another with custom font size, borders, and occupying 100% of the panel's width and height.

<div data-role="panel" data-display="overlay" id="header_panel">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Music</a></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

<div data-role="panel" data-display="overlay" id="header_panel">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Music</a></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

#header_panel li{
width: 200px;
height: 100px;
padding: 10px;
}

jquerycsshtmljquery-mobile

Answer №1

I find the question a bit puzzling, but it seems like you're trying to prevent your LI elements from occupying the entire panel and instead align them to the left.

Let's try the following solution.

#nav_bar li{
    width: 180px;
    height: 90px;
    padding: 8px;
    display:inline-block;
    float:left;
}

Don't forget to clear your float after the closing UL tag.

Answer №2

If you're looking for a solution with 2 panels, I've put together a demo that showcases just that. Simply use the top left and top right buttons to toggle between them.

The panel triggered by the top right button utilizes the data-role="listview" attribute on the UL element to create a standard jQM vertical list. Additional styling such as font, height, and borders are achieved through CSS:

<div data-role="panel" data-display="overlay" data-theme="c" id="header_panel2">
<ul data-role="listview">
    <li><a href="#">Home</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="#">Music</a></li>
    <li></li>
    <li></li>
</ul>
</div>  

/* PANEL 2 STYLES */
#header_panel2 li{
  height: 100px;
  border: 2px solid black;
}
#header_panel2 a{
  font-size: 2em;
}

On the other hand, the panel triggered by the top left button is styled purely through CSS:

<div data-role="panel" data-display="overlay" data-theme="c" id="header_panel">
<ul >
    <li><a href="#">Home</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="#">Music</a></li>
    <li></li>
    <li></li>
</ul>
</div>

/* PANEL 1 STYLES */
#header_panel ul{
  list-style-type: none;
}
#header_panel li{
  width: 150px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
}
#header_panel a{
  font-size: 2em;
}

If you find that the CSS isn't taking effect, it might be worth checking if there are conflicting styles elsewhere in your project. Let me know if you need further assistance!

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

What is the process for setting an AMP-video as a full-page background?

My homepage features a captivating hero video in the background, but I've encountered an issue where the AMP video does not scale properly to fit the screen on mobile devices. Here's the code snippet causing the problem: <amp-v ...

htmlcssvideobackgroundamp-html

The function is being called repeatedly when invoking the ng-src attribute for an image

Here is something similar to this <img width="100" height="177" ng-show="{{fileName}}" ng-src="{{getPath(fileName) || '' }}" class="img-thumbnail" alt="test" onerror="this.src = $(this).attr('altSrc')"> Within the Controller, ...

angularjshtml

The <form> element is giving me headaches in my JavaScript code

Trying to troubleshoot why my HTML pages render twice when I add a form with JavaScript. It seems like the page displays once with the script and again without it. Below is the basic HTML code: <form action="test.php" method="post"> <div class=" ...

javascripthtmlforms

Using jQuery to assign the value of a selected list item to an input field

I'm struggling with implementing a jQuery function to achieve the following: When a list item is clicked, it should add a 'select' class and remove any other selected list items The selected list item's data value should be set as ...

javascriptjquery

Utilizing jQuery to dynamically resize textareas on dynamically loaded divs through AJAX

Recently, I have implemented a module that allows auto-scaling on my textareas. Initially, it worked perfectly fine. However, when I started loading new textareas via ajax, I faced an issue. Usually, switching from .click to .live('click', fn) r ...

jquery

Combining jsTree with Treemodel for Enhanced Functionality

As someone new to Javascript, I'm looking for guidance on integrating jsTree on the front end with backend services in node.js. The backend utilizes the Treemodel library (http://jnuno.com/tree-model-js/) and includes additional functions like: funct ...

jqueryangularjsnode.jsjstreetreemodel

Utilizing jQuery, AJAX, PHP, and MySQL for a dynamic auto-suggest feature in form inputs

Looking for ways to suggest city and state as a user types in the form input field on your website? Check out this resource that provides a solution using jQuery, PHP, and MYSQL: Solution ...

phpjquerymysqlajaxforms

Top methods for integrating custom divs into your WordPress site using PHP

As someone who is new to wordpress, I have a solid understanding of php, html, css and javascript. I am interested in integrating a custom font resizer into my wordpress site similar to the example shown below: https://i.stack.imgur.com/FwoIJ.jpg What w ...

phphtmlcsswordpress

What is the method for importing jQuery from a local source?

My experience with CDNs has been seamless, but I've run into some issues when trying to use jquery/jquery mobile locally. It seems that certain classes work intermittently, while others don't work at all. The versions I am using are: jQuery - ...

javascriptjqueryjquery-mobile

What is the best way to display the logged-in user's username in the Bootstrap navbar once they

I currently have a login button on my navbar that opens up a login modal. I would like to replace the login button with the username of the logged-in user in that modal. I'm relatively new to PHP and MySQLi, only been here for about a week. I would ...

phphtmlcss

"Put Phonegap on hold for a bit and disable landscape mode

I am currently using Phonegap to develop an Android game. My project includes a lobby feature where players can search for opponents and engage in chat with other players. Once a player has found their opponent, they can commence playing the game together ...

javascriptandroidjquerycordova

What is the best method to retrieve the value of a DIV id and submit it to a form using PHP and jQuery

Greetings! I am looking to extract the value of a div and pass it into a PHP form using POST method. Below is the code snippet for the dynamic change in the div id = "caption": <div id="caption">Alumina Jade Metallic</div> UPDATE This code ...

phpjquery

Tips for triggering animation only when the element is in the viewport

I'm currently developing in React and facing a challenge where I need to trigger a fade animation for an element only when it becomes visible on the screen. The issue is that right now, the animation plays as soon as the page loads, which defeats the ...

javascriptcssreactjsanimationcss-animations

Retrieve image details and display them in the console when the page is resized

Query: How can I retrieve and monitor the src, width, and height of all images on a webpage and display this information in the console whenever the page's size changes? Sample Code Snippet: var images = document.getElementsByTagName('img' ...

javascriptcssimage

Issues encountered when attempting to send Jquery Ajax due to UTF-8 conflicts

I created a JavaScript script to send form data to my PHP backend. However, the text field was receiving it with incorrect encoding. Here is the meta tag on my website: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Here&apo ...

javascriptphpjqueryajaxutf-8

Design a unique CSS box using Bootstrap

Hey there! I'm currently working on creating a CSS box with Bootstrap. If you'd like to take a look, feel free to check it out here. I noticed that the padding box isn't affecting the margin-top - any ideas why? Also, I'm trying to ge ...

jqueryhtmlcsstwitter-bootstrap

Tips for resizing images to fit within a TD cell in an HTML table

Currently, I have an issue with the image display within a TD element. Despite setting a specific width for the TD, the image appears to be wider than intended. Could you offer a solution to this problem? ...

htmlcss

"Hovering over the navigation tab does not trigger the dropdown menu

Can't seem to get my dropdown menu on the right to work when hovered. I feel like I must be missing something really simple, but I can't figure it out! When I use .vanish:hover .dropdown, it's not quite hitting the mark. What am I doing wron ...

htmlcss

Border with curved edges

Having an issue with content boundaries while using CSS rounded corners in Firefox. Here is the code snippet: Code <html> <head> <style> #outter { width: 200px; margin: auto; text-align: cent ...

htmlcssfirefoxrounded-corners

The jQuery Timepicker dropdown is not showing up correctly

I've used this particular package without any issues in the past. However, I am currently facing a problem with the dropdown display. I am utilizing this package with the cocoon gem to add new time fields as required. https://i.sstatic.net/nkG2Y.png ...

jqueryruby-on-railstimepicker