Tips for styling a select element within a listview with the help of JQuery Mobile

Here is my current situation: http://jsfiddle.net/w6PAC/3/

I am looking to position the select button next to the count without affecting the vertical size and alignment of the list item.

Methods I have attempted include:

  1. Creating CSS based on the .ul-li-count class, but it caused issues with the jQM enhancement.
  2. Attempting to create the buttons outside the listview, but struggling with vertical alignment.
  3. Experimenting with fieldsets, data-roles, divs, etc., all without success.

As far as I know, it's not possible to invoke a select programmatically; otherwise, I would simply add a plain button to the listview.

Any help or alternative document layout suggestions would be greatly appreciated.

jquerycssjquery-mobile

Answer №1

If my comprehension is correct, you have the option to utilize some straightforward CSS code to modify jQuery Mobile's default layout:

/*absolutely position the <select> to the right side of the <li> and center it within the <li>*/
.custom_list .ui-select {
    position   : absolute;
    right      : 10px;
    top        : 50%;
    margin-top : -1.4em;
}
/*add some extra padding to the right side of the <li> to make the text wrap properly*/
.custom_list .ui-li {
    padding-right : 80px;
}
/*change the position of the <span class="ui-li-count"> to make room for the <select>*/
.custom_list .ui-li-count {
    right : 50px;
}

Please keep in mind that I am using the .custom_list class to target the specific <ul> element. For this method to function correctly, you need to either eliminate .custom_list from the CSS declarations above or apply the .custom_list class to the <ul> element you wish to customize.

You can view a demonstration of the above solution on jsfiddle: http://jsfiddle.net/jasper/w6PAC/4/

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

Pass values from one page to another using jQuery and dynamically load them onto the current page. Implement a "Show More" button to

Apologies if there was any confusion caused. The jquery code provided below is intended to load a webpage within the current webpage, similar to when you click on "load more" or "show more results". The specific page I am attempting to load into the curren ...

javascriptphpjqueryhtmlajax

Clicking on the background does not alter the onclick function

Can anyone help me troubleshoot my code? My function load() isn't changing the background of .firstDiv for some reason. I've checked multiple times but I can't seem to spot any errors. function load() { document.getElementsBy ...

htmlcssonclick

Tips on updating the filename of an image during the uploading procedure

I am looking to rename the file name of an image before it is moved to the upload folder and saved in the database. The issue I am facing is that in my current code, the original file name remains unchanged after it has been moved to the upload folder and ...

phpjquerymysqlajaxpdo

What is the reason for selenium's cssSelector being unable to recognize the text?

Is it possible to identify an element based on its text, div or link using only CSS? I am unable to use the contains method for cssselector. Can you please provide the CSS selector syntax for the following HTML? For example: "Hi There" ...

cssselenium

Troubleshooting Problem with Retrieving Files Using jQuery Ajax

I am attempting to use ajax to retrieve the contents of a file, but it doesn't seem to be functioning properly. I'm not sure why this is happening, as I have copied the same code from the examples on w3schools.com. $().ready(function(){ ...

javascriptjqueryajaxfile

Is it possible to dynamically store JavaScript code in a variable and then have JavaScript execute it?

I'm uncertain if my current method is the most appropriate for my goal. Essentially, I am fetching data from a database using an ajax call, and I want this data to populate a JavaScript library where the layout is structured like this: data[ item{ ...

javascripthtmljquery

I am looking to modify the highlighted table cell whenever the value within it changes

I am currently working on a small project related to the Stock Market. In this project, I need to dynamically change the style of the td element based on data fluctuations - green highlight for an increase and red highlight for a decrease. In the provid ...

javascriptphpjqueryhtmlcss

Avoiding the stretching of images in a bootstrap carousel is a top priority

I'm facing an issue with my Bootstrap 4 carousel that takes up a large portion of the page. The images are loaded through an ajax request once received. Since all the photos are taken on a phone, they are either in landscape or portrait style. The p ...

javascriptjqueryhtmlcsstwitter-bootstrap

JQuery class for swapping elements upon scrolling

I am currently working on a navigation bar that changes classes to create a fading effect for the background. The approach I have taken involves targeting the window itself and monitoring the scroll position of the user. If the user scrolls down more than ...

javascriptjqueryhtml

"Using html_attr with the attribute "href" does not return any value in the rvest package

My objective is to extract the URLs linked with specific CSS elements on a website using rvest. Despite trying various methods, such as using the html_attr function with the 'href' argument, my current script only returns NA values instead of the ...

htmlcssrweb-scrapingrvest

Difficulty loading CSS in PugJS

I can't seem to get my dashboard.pug file to load both dashboard.css and dashboard.js, even though they are all in the same folder. I have already set up express.static correctly for the public folder. const publicpath=path.join(__dirname,'../p ...

cssnode.jspug

Adjust the sliders according to the current time

I am looking to display different sliders based on the time of day. For instance, 'slider set 1' from 0-9am, 'slider set 2' from 9am-12pm, and so forth. I am new to java script and need assistance in solving this challenge. Below is the ...

javascriptjqueryslider

Attempting to align several div elements in the middle while ensuring they all stay in a single row

I've been attempting to center a contact form and a feedback form side by side. I tried using float: left; for both to align them horizontally, but I also want them to be centered on the page. Whenever I manage to display them together horizontally, ...

htmlcss

Difficulty in dynamically updating custom attributes data in a popover

I am attempting to dynamically insert text into a Bootstrap 3 Popover data-content="" on this demo. My goal is to update the text in the data-content="" attribute by clicking different buttons. I have tried doing this using the following code: $("#poper") ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3

Retrieving the ID of a newly created object in Rails with the help of jQuery

Struggling to retrieve the ID of a newly created element using a query-AJAX-POST request. Despite numerous attempts, none have proven successful thus far. Currently at a standstill. Controller: def createuserlink @new_element = Link.new(element_params ...

jqueryruby-on-railsajaxhttp-post

Overreaching line surpassing its containing box

I have a specific HTML setup that includes CSS styling for rows, circles, and lines: .row.justify-content-center div:last-child>div>div { display: none; } .line { width: 100%; height: 9px; margin-left: 16px; border-bottom: 2px solid l ...

htmlcssbootstrap-4

Automatically calculate the sum of numbers as the user inputs values dynamically, regardless of the number of inputs. Notify the user if they enter anything other than numbers

HTML Table with Dynamically Adding Rows <table> <thead> <th>Item</th> <th>Cost</th> </thead> <tbody id="items-list"> <tr> <td>Item 1</td> ...

javascriptjquery

Issue encountered: Compilation error occurred following the update from Angular 11 to Angular 15, stemming from the module build failure within the sass-loader directory

I recently attempted to update angular from version 11 to 15, but encountered an error as shown in the screenshot below ./src/assets/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected "(". ...

cssangularsassbuildmodule

JavaScript event listener for SVG path element click is not functioning correctly as anticipated

How to determine if an element or its children have been clicked? I am trying to identify when a parent element or any of its child SVG icons with the attribute name set to "setGameState" have been clicked. The issue I am facing is that sometimes the even ...

javascriptjqueryreactjs

Include a sharing option within the magiczoomplus feature

My current project involves creating a WordPress site using Artisteer along with several plugins to showcase photo galleries. To enhance the user experience, I purchased an e-commerce WordPress theme which features a share button that I really like. Now, I ...

javascriptcssmagiczoomplus