Trouble with displaying list bullets in jQTouch framework

I'm currently experimenting with jQTouch for a web app designed for iPhones. However, I am facing an issue where I want the content on the pages to display normal bullet lists instead of being styled as bars in the jqt theme. To achieve this, I am attempting to override the css selectors in the theme.css file:

#jqt .content ul {
color: #fff;
    border: none;
font: inherit;
padding: 0;
margin: 15px 10px 17px 10px;
}

#jqt .content ul li {
    color: #fff;
    border-top: none;
    border-bottom: none;

    list-style-type: disc;
    padding: 10px 10px 10px 10px;
    background-image: none;
    overflow: hidden;
}

Although the override is functioning properly, I am not seeing any visible list bullets. Can anyone provide insight into why this might be happening?

cssjqtouch

Answer №1

Just update the li elements (excluding the ul)

CSS:

div#jqt #textpage li
{
    list-style-type:disc;
    padding: 7px 20px 0px 10px; /* adjust these values based on your needs */
}

HTML:

<!-- PAGE 2d -->       
<div id="page-2d">
    <div class="toolbar">
        <h1>Page Heading</h1>
        <a class="back" href="#page-2">Back</a>
    </div>
    <div id="textpage" >
        <h1>My heading</h1><br />
        <p>Stuff</p> 
        <p>More Stuff</p><br />
        <h2>Sub Heading</h2>
        <!-- Note No <ul> works don't know why -->  
        <li>My Updated List Item1 </li>
        <li>My Updated List Item2 </li>

Answer №2

After conducting a quick test, it appears that the issue lies with overflow hidden.

For my project, I have found success using the following styling:

ul.text, .text ul
{
    border: 0;
    background: transparent;
}
ul.text li, .text ul li
{
    list-style-type: disc;
    -webkit-border-radius: 0;
    border-radius: 0;
    filter: 0; // hiding IE gradient
    margin-left: 19px;
    background: transparent; 
    border: none;
    font-size: 1em;
    font-weight: normal;
}

I hope this solution proves helpful to you as well.

Answer №3

Make sure to review the display type on the LI element. In my experience, I encountered a similar problem due to them being set as "block" instead of "list-item"

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

Transforming segments into divisions

I recently designed a website using sections instead of divs in order to achieve the desired alignment of the divs within the same container. However, I am facing difficulties and confusion in implementing this approach. Currently, my divs collapse on top ...

htmlcsssections

Adjusting the height of an Angular CDK virtual scroll viewport based on dynamic needs

Currently, I am developing an Angular table with the cdk Virtual Scroll feature. Is there a method to adjust the scroll viewport's height dynamically? While the standard style property works, I am encountering difficulties setting the value using ngSt ...

cssangularvirtualscrollangular-cdk-virtual-scroll

Disabled radio buttons are appearing as if they have been chosen

While working on customizing the styles of radio buttons in a form, I encountered an issue where disabled radio buttons appeared selected even though they were supposed to show as disabled. Here is the code snippet that I used: input ::-ms-clear { ...

htmlcss

What is the best way to format the JQGrid table for better

Is there a way to indent the table in this example and create white space on the side of the rows and header? I want a white margin on the left of everything below "Stackoverflow example". I'm hoping to achieve this using only CSS. Below is the code ...

cssjqgrid

I am attempting to create basic animations using css, but I'm having some trouble

Currently, I am attempting to add animation to a css div without including the top property in the original div style. I omitted it because I wanted to delay the animation, so I placed it within the @keyframes property. However, the element disappears afte ...

htmlcssreactjsanimation

Coloring the Text on Buttons

After nearly 24 hours of practicing, I still can't seem to wrap my head around it. Can someone assist me in changing the button text color to white, while keeping everything else the same? //NAVIGATION //======================== .nav ul display: ...

htmlcss

Error in CSS styling affecting image display on responsive website

My CSS seems to have a bug when it comes to responsive pages with images. Take a look at the demo: https://jsfiddle.net/xr4getom/ If you resize the window on this example, you'll notice that a dark background (#222) appears intermittently. Is there ...

htmlcss

Tips for ensuring the border matches the size of the image

I am in the process of creating a website that includes a filter option. My plan is to have the filters displayed on the left side and the items on the right side. To achieve this layout, I have implemented a scrollable div for the items. However, I notic ...

javascripthtmlcss

Using CSS to create shape gradients

I've been attempting to replicate the shape gradient found on Laracasts for hours, but unfortunately, my code isn't displaying anything. Can anyone lend a hand? a{ background: linear-gradient(118deg,#328bf2,#1644ad); border-radius: 54% ...

htmlcss

What is the best way to change CSS style for a button when clicked using JavaScript?

Is there a way to switch the background style of a CSS div when clicking the same button? function changeBg() { var divElem = document.getElementById("change-bg"); if (divElem.style.backgroundColor === "yellow") { divElem.style.backgroundColor ...

javascripthtmlcss

Finding the div associated with the element that triggered an event

I've recently launched a website that allows users to post questions and receive responses from others. Each question is housed in a div, which then contains another div with the CSS property of display: none. Within the main div, there's a butt ...

jqueryhtmlcss

CSS3 animations can sometimes result in incorrect element sizing due to the animation-fill-mode property

After experimenting with CSS3 animation, I encountered an unusual issue. Adding animation-fill-mode to the "parent" <div> caused the width of the "child" <div> to be less than 100% upon completion of the animation. Can anyone shed light on why ...

cssanimation

Reducing the size of the website does not necessarily mean the body will be at 100% width

While inspecting the site, I noticed that the body does not extend to 100% width of the screen when I reduce the size of the site. After removing the Bootstrap classes, the issue seems to be resolved. I even tried adding body{width: 100%} but it did not h ...

htmlcssbootstrap-5

Changing the color of a specific span using Angular

I am working with a dynamic mat-table where columns are added and populated on the fly. The table headers are styled using divs and spans. My goal is to change the color of a header to black when clicked, but also un-toggle any previously selected header. ...

javascripthtmlcssangulartypescript

Tips for choosing the parent's parent and applying a width of 100%

I am currently facing some challenges while creating a simple navigation bar from scratch. I am struggling with setting specific widths, especially wanting .navbarDropBtn to align its width with .navbarMain. However, it seems to only match the width of the ...

htmlcss

When the browser back button is clicked, conceal the current div and reveal the previously hidden div

I'm faced with a situation where my website consists of multiple pages which I've achieved by displaying and hiding divs within a single html file. The issue I'm encountering is that the browser's back and forward buttons aren't fu ...

javascriptjqueryhtmlcss

create a recurring design wallpaper within the TinyMCE editor

One of my functions alters the background of the tinymce editor. However, I am interested in having a wallpaper repeat in a similar fashion to background-repeat: repeat; in CSS. How can I achieve this? Here is the function: function SettinymceImage(bg_i ...

javascriptcsstinymcetinymce-4

What is the best way to use CSS to center two blocks with space in between them?

My goal is to achieve a specific design: I want two text blocks with some space in between them aligned around the midline of the page (refer to the image). I have experimented with the float property, as well as used margin and padding to create the gap ...

htmlcssalignment

The "flickering" effect of the div is like a dance, moving gracefully between fade outs and

I am encountering a similar issue as described in this thread: same problem (fiddle: original fiddle). However, I am still learning JavaScript and struggling to apply the solution provided because my HTML code is slightly different. Can someone please assi ...

javascriptjqueryhtmlcss

What could be causing a full-width image render in Firefox when a nested flex item is centered?

My design involves nested containers with the display: flex; property. While Chrome/Edge display the item div correctly, in Firefox 110.0.1 the item div expands to fill the entire horizontal space within the wrapper (100% width). Which CSS properties can ...

cssflexbox