Within jQuery Mobile, text appears obscured by a listview containing a count bubble

After creating a listview with count bubbles and item descriptions, I noticed that the description text is falling behind the count bubble. Is this a glitch in the code or something that can be fixed with CSS?

echo '<li><a value="' . $row['product_id'] . '" data-icon="arrow-r" data-iconpos="right"><img src="images/' . $row['product_picture_name'] . '.png">' . '<h3>' . $row['product_name'] . '</h3><p style="white-space:normal">' . $row['product_description'] . '</p><span class="ui-li-count">Price: $' . $row['product_price'] . '</span></a></li>';

Hello Adam,

cssjquery-mobile

Answer №1

By adjusting the width property of the p tag to 90%, I was able to ensure that the text wraps neatly before reaching the count bubble position. This allows for smooth scaling on various screen sizes.

echo '<li><a value="' . $row['product_id'] . '" data-icon="arrow-r" data-iconpos="right"><img src="images/' . $row['product_picture_name'] . '.png">' . '<h3>' . $row['product_name'] . '</h3><p style="white-space:normal; **width:90%;**">' . $row['product_description'] . '</p><span class="ui-li-count">Price: $' . $row['product_price'] . '</span></a></li>';

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

A collapsible select list with checkboxes for children items

I am currently developing a website using Vue.js, HTML, and SCSS. I am looking to implement a drop-down functionality similar to the animated example provided in the gif below: https://i.stack.imgur.com/Mia2D.gif The gif demonstrates how the drop-down me ...

javascripthtmlcssvue.jshtml-select

Dropdown selection menu reverts to default styling following ajax response

My form allows users to select their country, which then dynamically changes the dropdown menu to display states or provinces based on the selected country. The issue arises when the dropdown menu loses its CSS styling after an ajax script is called to upd ...

phpjquerycssajax

Having difficulty retrieving the InnerHtml from the editor div of the Bootstrap WYSIWYG rich text editor using c#

I have been utilizing the Bootstrap WYSIWYG rich text editor to create HTML email templates. The editor functions perfectly when checked in the browser. To fetch the HTML contents of the editor div using JQuery, I used $("#editor").html(); In an attempt ...

c#jquerycsshtmltwitter-bootstrap-3

How to center a container in HTML using Bootstrap techniques

Here is the code I have been working on: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="span4 offset4 centered"> <div class="container overflow-hidden"> < ...

htmlcsstwitter-bootstrapbootstrap-4

Guidelines for using a video as a background on half of the page

Is it possible to have a video background take up half of the screen on a homepage? Currently, I am using Bootstrap 4's grid system to divide the page and using html5 to implement the video. <div class="container-fluid"> <div class="row ...

htmlcssbootstrap-4

How can we begin to create this dynamic animation?

Can someone help me figure out how to create an animation effect similar to the one seen in this link? I have some basic knowledge of css and html5, but I'm not sure where to start. Is this done with css, html5, plugins, or something else? I am looki ...

csshtmlweb-animations

Exploring the process of passing parameters in Material-UI React styled components

Recently, I developed a new component const CategoryDialog = (props) => { const classes = useStyles(); console.log(props); return ( <div> <Dialog fullScreen open={props.dilaogOpenProp} TransitionCompone ...

javascriptcssreactjsmaterial-ui

Tap to navigate to queued sections on click

Greetings, community members! Despite my extensive research, I have been unable to find a solution to my query. Just a heads up - I am a novice when it comes to javascript and jQuery. My question pertains to incorporating two image buttons that, upon cli ...

javascriptjqueryhtmlcssscroll

Boxes maintain their height consistency even after a page refresh

I Implemented This Script to Ensure Same Height for Boxes <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"> $(document).ready(function(){ var highestBox = 0; $('.box').each(function(){ ...

jquerycssheightrefreshbox

The particles from particles.js plugin fail to appear on Chrome browser

While experimenting with particles.js, I noticed that it runs smoothly on the Safari browser (I'm using a MacBook), but it encounters an error on Chrome and the particles fail to display. Error pJS - XMLHttpRequest status: 404 particles.js:1558 Error ...

javascripthtmlcssparticles.js

Is there a way to create a dropdown menu that appears to emerge from behind a button?

I am struggling with the stack order of my dropdown menu. Despite using z-index, it appears in front of the button instead of behind it. I want it to look like it is coming out from behind the button. Here is my code: .subnav-wrapper { position: relat ...

htmlcss

Tips for modifying a particular element within a class?

I am seeking guidance on how to modify a specific class attribute in CSS/JS/JQuery when hovering over a different element. Here is an example: <h1 class="result">Lorium</h1> <h1 class="result">Ipsum</h1> <h1 class="result">Do ...

javascriptjqueryhtmlcss

Having trouble aligning material-ui GridList in the center

I am currently working with a GridList in order to display Cards. The styling for these components is set up as shown below: card.js const useStyles = makeStyles({ card: { maxWidth: 240, margin: 10 }, media: { heigh ...

javascriptcssreactjsmaterial-ui

Error message encountered in Python: AttributeError stating that the 'List' object does not possess the attribute 'click'. This error occurred while using Selenium. (Image attached for reference)

Help needed! I am struggling to select an item within the table cell. Below is the source code: <div class="clear formrow top_border"> <div> <table class="infoGrid" cellspacing="0" cellpadding="0" border="0" id="ctl00_cphMain_gd ...

pythonhtmlcssseleniumselenium-webdriver

Wordpress Website Lagging in Loading Speed

After migrating my Wordpress site from my computer to a Bluehost shared server, I noticed a significant decrease in loading speed. The home page now takes 107 seconds to load, while it ran smoothly on my local machine. Upon running a GTMetrix site analyzer ...

mysqlcsswordpress

Creating a striking Materialize Jumbotron: A step-by-step guide

Recently, I came across a sign up page that caught my eye. You can view it here. Upon inspecting the source code, I discovered that it was built using angular material design. This led me to wonder how I could achieve a similar look using Materialize.css ...

cssangularjsmaterialize

Rails 5 Bootstrap 3 Challenge: Unresolved Application-Wide Modal Glitch

Setting up modals for the new and edit actions in my users controller was simple, but now I want to ensure display consistency by having the user show page also appear in a modal. Currently, users access their show page through the link: <li><%= ...

javascriptjquerycssruby-on-railstwitter-bootstrap

What could be the reason for the unexpected occurrence of my CSS rule application?

In my collection of CSS files, I have a specific class defined in the common CSS file: common.css .container-example { display: grid; height: 100%; width: 100%; background-color: black; } .container-example > div { overflow: hidden; } This ...

htmlcss

Flexbox: Distribute remaining space evenly while allowing content to wrap

Is there a method to instruct flexbox items to occupy the available space while wrapping as soon as they become smaller than their content? However, some items have a fixed width percentage. HTML <div class="grid"> <div class="grid__item"> ...

cssflexbox

Tips for making a circle and a bar overlap using CSS

Trying to create a circular image and a horizontal bar of equal height next to it in a user profile. It needs to be responsive and look like the image below, with text in the black bar. Looking for help with CSS to achieve this: I currently have the cod ...

htmlcsscss-shapes