Aligning thumbnail images in a jQuery Mobile listview

Hey, I recently added a list view that includes thumbnails.

I used the following code:

<ul data-role="listview" data-inset="false" data-theme="a" data-dividertheme="d>
<li><a href="image.php?imgid=2">  
    <img src="../images/comma.png" class="ui-li-thumb" />  
    <h3 class="ui-li-heading>Colleeeeeeeeeeeeege</h3>  
    <p class="ui-li-desc>by Scott Hill</p></a></li> 
</ul>

However, the image is not centered within the thumbnail area. Any tips on how to make it fit properly?

You can see the issue in the image above.

Your help would be greatly appreciated!

jquerycssjquery-mobile

Answer №1

Encountered a similar problem and found a solution. Below is the code snippet I used to set the necessary top padding:

$("img[class='ui-li-thumb']").load(function() {
    $(this).css('padding-top',((80-this.height)/2));
});

Answer №2

If you've specified a fixed height for each list in your list-view, you can adjust the margin-top of the img tag to center it within the list.

<style>
.list-example{
height:60px;
}
 .item-thumb{
   margin-top:20px;
 }
</style>
<ul data-role="listview" data-inset="false" data-theme="b" data-dividertheme="c">
   <li class="list-example"><a href="image.php?imgid=3">  
       <img src="../images/comma.png" class="item-thumb" />  
       <h3 class="item-heading">University Life</h3>  
       <p class="item-description">by Sarah Smith</p></a>
   </li> 
</ul>

Make sure to adjust the height and margin-top values accordingly for proper alignment.

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

Element that hovers and floats

Just last week, I was working on coding a custom menu bar for my blog located at . However, when it came to adding social buttons, things went awry. It seemed like a float element issue! Despite my attempts to resolve it by adjusting widths and properties, ...

htmlcss

What is the best way to make a DIV box span the entire webpage without overflowing to the left?

I am currently working on a client's website and running into some issues with the layout of the booking page. The address is supposed to be on the left side, the contact form on the right, and both should be contained within a white box that fills th ...

htmlcss

What is the best way to vertically align items within a <div> using CSS in a React application?

The layout of the page looks like this: https://i.sstatic.net/NGCNP.png I am trying to center the Redbox (containing '1') within the "PlayerOneDiv". Similarly, I want to center the yellow box within "PlayerTwoDiv". return ( ...

htmlcssreactjsangularflexbox

Leverage JavaScript to run a snippet of PHP code directly (without utilizing a separate PHP file)

I am looking for a way to integrate PHP into my web page using JavaScript and AJAX. I want the PHP file to be included and executed as if it is part of the native page, allowing me to utilize features like GET requests. <div id="firstAjaxDiv">Defaul ...

phpjavascriptjqueryajax

Alignment issues with CSS3 navigation bar

After conducting thorough research on this topic, I realized that I am not alone in facing this issue. Unfortunately, the solutions provided by others with the same question did not resolve my problem. I have carefully configured my links for navigation wi ...

css

Iterating through styles in a selector's attribute

I am creating a site map layout. Looking for a solution similar to this: ul.site-map li[data-level="1"] { margin-left: 50px; } ul.site-map li[data-level="2"] { margin-left: 100px; } ul.site-map li[data-level="3"] { margin-left: 150px; } This code ...

cssstylus

The .hide method is failing to execute within a click event handler

In my current code snippet, I have the following: $(document).ready(function() { $('.search a').click(function() { $('.search2').show(); }); $('.search-close').click(function() { $('.search2').hide() ...

jquery

Wait for the jQuery when function to finish processing AJAX requests

When utilizing this code inside an asynchronous function, the expected outcome is not achieved: Incorporating both the requests below: var result = await $.when( $.get('/api/1'), $.get('/api/2') ); Upon making just a single req ...

jqueryajaxpromiseasync-await.when

In JavaScript, the JSON Object only stored the final result from a loop

I am currently working on an HTML Site that features 4 inputRange sliders. My goal is to store all values from these sliders in a nested JSON Object when a user clicks on a button. However, I have encountered an issue where my JavaScript code only saves th ...

javascriptjquery

Issues arise with the functionality of custom jQuery sliders

I'm attempting to create a bootstrap panel slider using my own jQuery code, but it's not functioning as anticipated. My Objective: I have two links for "previous" and "next", and three panels with distinct headings. When the "previous" link is ...

javascriptjqueryhtmlcsstwitter-bootstrap

Designing a unique CSS border for custom list item bullets

I'm currently exploring the possibility of implementing a CSS border around an image that I have imported as a custom bullet for my list items: ul { list-style: none; margin-right: 0; padding-left: 0; list-style-position: inside; } ul > ...

htmlcsshtml-listsborder

Get a polished look using HTML and CSS exclusively

Allow me to illustrate what I am intending to accomplish with an example. div{ width:100px;height:100px; border:3px solid #900; border-radius:0px 0px 140px 0px; } <div></div> I am seeking a method to ...

htmlcss

Create a dynamic calendar by integrating dates with Javascript and an HTML table

Recently, I decided to delve into web design again and embark on a challenging project for my father's baseball business. The main task at hand is creating a detailed calendar using HTML tables. After spending a considerable amount of time perfecting ...

javascriptjqueryhtmlcsscalendar

the attempt to send an array of data to the $.ajax function was unsuccessful

let myArray = []; myArray.push(someValue); let requestData = { action: myAction, array: myArray }; $.ajax({ type: "POST", data: requestData, url: requestUrl, success: handleSuccess, error: handleError }); When ...

javascriptjqueryajax

Angular2 poses a strange problem with ngClass

It seems like Angular is expecting me to use single quotes for the class names even if there are no hyphens in my CSS class name. I've tried everything but Angular keeps insisting on using hyphens for this specific CSS class... it's strange, or m ...

cssangularangular2-template

Extracting information from jQuery UI AutoComplete using a variable

Struggling to implement the jQuery UI Autocomplete feature, I'm faced with the challenge of integrating it with my PHP page that handles all JSON data requests. Using a switch statement in my PHP code, I determine the appropriate function to call base ...

jqueryjquery-uiautocomplete

What could be causing the TailWind CSS Toggle to malfunction on my local server?

While working on designing a sidebar for a ToDo page using Tailwind CSS, I encountered an issue with implementing a toggle button for switching between dark mode and light mode. In order to achieve this functionality, I borrowed the toggling code snippet f ...

htmlcsstailwind-css

AngularJS: The dynamic setting for the stylesheet link tag initiates the request prematurely

I'm encountering a problem that is somewhat similar (although not exactly the same, so please be patient) to the one discussed in Conditionally-rendering css in html head I am dynamically loading a stylesheet using a scope variable defined at the sta ...

javascriptcssangularjs

Unable to dispatch the form on a connected page using jQuery Mobile

I have encountered an issue while trying to submit a form using jQuery Mobile. The problem arises when the form is placed on a linked page, as it fails to submit properly. To illustrate, if my home page is mysite.com/page.html, placing the form code on tha ...

jqueryhtmlformsjquery-mobile

jQuery ajax doesn't function properly on the server, it only works locally

When I send a jQuery Ajax request from my front-end to the back-end to retrieve values for calculations, it works perfectly on my local web server. However, when I try it online, all I get is a result of 0 in my calculations, indicating that the Ajax respo ...

javascriptphpjqueryajax