How to create a listview with stylish rounded corners in jQuery mobile using CSS?

I'm attempting to customize the appearance of a jQuery mobile listview using CSS by adding a border radius to each item.

Although things seem to be working mostly as expected, I've encountered a problem where only the first and last <li></li> items have rounded corners!

You can see this issue by checking out this JSFIDDLE

This is the basic CSS code I'm using:

.dotted-list li a {
    border-radius: 5px;
    margin: 5px !important;
}
.dotted-list {
    background-color: #CCC !important;
    /*margin-left:-8px !important;
    margin-right:16px !important;
    padding-left:5px !important;
    padding-right:15px !important;*/
    margin: 0 !important;
    width: 100%;
}

If anyone has any suggestions on how to fix this issue, I would greatly appreciate it!

jquerycss

Answer №1

There appears to be a conflict with the CSS styling in the jquery.min.css file, specifically with the selector 

.ui-listview > li > a.ui-btn
. To resolve this, simply add the !important declaration to the border-radius: 5px property.

For an illustration, check out this example.

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

Having trouble with the JQuery scrollTop animation? Getting the error message "Cannot read property 'top' of undefined"?

I am having trouble with my jquery animation scrollTop function. Whenever I click on <a>, it takes me to the anchor without any animation. Can someone please provide a solution for this issue? Upon running the webpage, I encountered an error message ...

javascriptjqueryhtml

Is there a more efficient method to achieve the desired effect without making multiple calls to jQuery ajaxSuccess?

Currently, I am working on creating an effect that involves a quick fade-out followed by a fade-in of the element once the request is successful. Since jQuery processes elements in a routine manner (top to bottom), I have managed to achieve my desired eff ...

javascriptjqueryajaxjquery-ui

HTML element DIV positioned above the iframe

I am looking for a way to automatically place a "PLAY" div above each iframe instead of doing it manually. I have successfully done it manually but I'm not sure how to achieve the same result with a script or using CSS. Below is my HTML markup: < ...

javascripthtmlcss

Disregard the popstate triggered by Safari's Initial Page Load

Utilizing pushState, I am able to generate the page view on popstate events based on the history.state of the current page. In cases where there is no history.state present, my intention is to reload the document (hopefully). window.onpopstate = function ...

javascriptjquerysafari

Obtain attribute values as an array from a group of elements by utilizing jQuery

Using jQuery, I have the following code: var x = $('.boxes > input:checked'); However, I am struggling to figure out how to retrieve an array of id values from x. I am looking for something like this: var y = x[id]; // y should be an array ...

jquery

Creating a line of functions pool in Javascript with a delay feature

Recently, I created a code snippet that simulates a function line. It involves calling functions such as fn1, delay, fn2, delay, and so on. The idea is to call a function, remove it from the line, have a short sleep, and repeat. However, I've encount ...

javascriptjqueryfunctionlinepool

Struggling to get the fluid image feature to work properly on Bootstrap 4

I seem to be facing an issue with creating responsive images using Bootstrap 4. Whenever I view the code below on a browser, I see three images in the navbar at the top left corner. Unfortunately, these images do not scale down in size when viewed on mobil ...

htmlcssbootstrap-4

Validate all JavaScript buttons by binding a click event

I've implemented the JS validation plugin from this source and it's functioning properly. However, it captures all button clicks on the page, including when I click on Back to Home, triggering form validation unnecessarily. I only want the form ...

javascriptjqueryhtmltwitter-bootstrapvalidation

Retrieve the outcome of an AJAX request in JavaScript within a separate function

My uploadFunction allows me to upload files to my server using a Rest web service called with JQuery ajax. I also use this method for another function and need to determine the result of the web service call in order to add a row with the name of the uploa ...

javascriptjqueryajaxasynchronous

The owl carousel is able to smoothly transition even when there is only one slide present in the carousel

Seeking assistance here. I am currently utilizing a carousel within a CMS and would like to provide the option for customers to display only one slide if they choose. However, when only one slide is present, the fade transition still occurs, resulting in ...

jquerycarouseltransitionowl-carousel

How can jQuery determine the amount of line breaks within a div element?

My div wrap size is a percentage of the screen width, containing multiple .item divs that break into new lines as the window size decreases. I attempted to calculate the total number of boxes that could fit based on their widths compared to the container ...

javascriptjqueryhtmlcssweb

"Safari browser may hide placeholder text, making it invisible to viewers

When adding color to the placeholder, I utilize this CSS property: .pro_heading input::-webkit-input-placeholder { color: #777; } However, it appears that in Safari, the color is not visible. ...

htmlcssmobile-safariplaceholder

Looking to fill a text field with email addresses by selecting checkboxes for various towers

I have 4 towers and I need checkboxes for each of them. Upon checking any combination of them, the 'txtNotifTo' textbox should be populated with the respective group of email IDs for each tower selected. Could you please assist me in identifying ...

javascriptc#jqueryasp.net

jquery did not load properly in the Google Chrome extension

Why am I unable to use a jQuery script inside my "myscript.js" file in the following Google Chrome extension? Is jQuery not loaded within the "myscript.js" file? What changes need to be made in the manifest file to enable the usage of jQuery inside "myscri ...

javascriptjquerygoogle-chrome-extension

What is the best way to create a new column that wraps content from existing columns?

While working on some homework, I encountered an issue with flex-wrap. I have columns that I want to wrap into at least two columns, but instead, they are overflowing my container. Note: I am aware that this can be achieved with grid as well, but I wanted ...

htmlcssflexbox

Showcasing text behind an element with reduced opacity when the element directly above it is selected using rails, CSS, and jQuery

I have a password field on my page where the password is hidden, but I want users to be able to copy and paste the clear text version of the password on another website. In order to achieve this, I followed the instructions in an article titled Mask text, ...

javascriptjqueryhtmlruby-on-rails-3css

Verify whether a group of div elements overlaps a fixed div while scrolling

I have a layout with a list of posts and a logo positioned at the bottom of the page. The issue I am facing is that sometimes the title of the posts and the logo overlap, and I want to set the logo's opacity to 0.25 only when the text from .cat-date i ...

javascriptjquerycss

The children elements inside a parent div with Flexbox are now taking on the height of their container

I am facing an issue with my flexbox grid layout where one column contains a tall image while another column has two shorter images stacked on top of each other. The problem arises when viewing the layout in Internet Explorer, as the height of the smaller ...

htmlcssinternet-explorerflexbox

Exploring the Depths of the DOM: Enhancing User Experience with Jquery

I am facing an issue with my AJAX request in my page. After retrieving data from the database and trying to append it to a div, I am attempting to create an accordion interface without success. Below is a snippet of my source code after the AJAX call: ...

javascriptdomjquery-uijquery

Adjust the primary scrolling section of a webpage to halt once it reaches a specific distance from the bottom of the viewport

I am facing a situation where I need to ensure that when scrolling down, a fixed pink menu bar at the bottom of the page does not overlap with the main blue content. This can be achieved by treating the blue content as an iframe positioned 60px from the bo ...

javascriptjqueryhtmlcss