Jquery Mobile dynamic thumbnail list-How to create a border?


Tags: css,listview,jquery-mobile,border,thumbnails

Problem :

I've searched and searched. I can't find an answer to what I think must be fairly easy to accomplish. I have a jquery mobile listview that is populated by a spry dataset. I load thumbnail images dynamically from the spry dataset. I'd like to create a border around each thumbnail using css/html. I've tried a number of different approaches.

The only one that works so far is to redraw every image with a border in Fireworks or a similar graphics program. A lot of extra work for something that I'm sure is simple for a more knowledgeable person.

Can anyone give me a little help with how to place a border around a thumbnail in a list that is populated by a dataset?



Solution :

JQuery Mobile has a CSS rule that sets border-width for all images inside a link to 0. To have borders on listview thumbnails, you need to override the border-width and then set the border color and style:

.ui-li-thumb {
    border-width: 2px !important;
    border-style: solid;
    border-color: #000;
}

    CSS Howto..

    How to set up css hierarchies

    How to override css img properties?

    How to arrange div structure with radius using CSS

    how to style every html posts differently in css

    A scrollbar showing within DIV. What CSS is causing this?

    how to many class share 1 css method in CSS

    CSS selector: how to make 2 spans each fill 50% of their parent's width?

    How to debug a website template which is very slow (client side)?

    How to keep the link color on CSS buttons as one color when changing default link colors?

    How to reverse direction of moving div once it reaches side of screen?

    How to make no borders in a td rowspan rows

    How to make the height REALLY 100%

    How to make a text or html tag look like a button

    how to define multiple classes' hover event in css?

    How to import packages within my Aurelia application

    How to show an image on html page using only css?

    how can I reload a “CSS background-image” each time I hover on it?

    How to make specific checkbox items bold (not all) via CSS?

    How to create multiple columns in a div

    How to embed a php/javascript photogallery in a page of an html/css website?

    How to properly link CSS files with PHP footer and header

    How to create two column in form using css

    How to use “Monotype Corsiva” font in CSS statement?

    Div doesn´t show background color after float:left

    How to get the browser border to lock to a div when resizing?

    How to add animation to a bar graph with jQuery?

    How to style HTML select option hover and selected option effects

    How to revert to original CSS?

    How to use HTML and CSS as a Java application GUI?

    How to concat css files with images and fonts form Bower in Grunt/Gulp/Webpack