adjusting label widths using jQuery mobile

I am currently using jQuery mobile to develop my user interface, however I am facing an issue with adjusting the width of my labels. Can anyone provide guidance on how to set the width of all my labels to 108px?

http://jsfiddle.net/GZaqz/

Check out the code snippet below:

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label data-role="none" for="basic">Zip</label>
<input style="width: 280px;" data-role="none" type="text"
    name="name" id="basic" value="">
</div>

I am aiming to have all labels maintain a consistent width similar to the above example.

htmljquery-uicssjquery-mobile

Answer №1

There seems to be an issue with your markup - the for attribute of the labels does not match the name of the input field. This can cause jQuery Mobile to have trouble styling your content correctly. For instance, consider the following:

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
    <label data-role="none" for="basic">Phone</label>
    <input style="width: 280px;" data-role="none" type="text" name="name" id="basic" value=""  />
</div>

You should modify it as follows (ensure that the for and name attributes match):

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
    <label data-role="none" for="basic">Phone</label>
    <input style="width: 280px;" data-role="none" type="text" name="basic" id="basic" value=""  />
</div>

By making this adjustment, jQuery Mobile should style your form as desired.

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

Incorporating the fadeout technique in conjunction with the append() function

Here is some code that I am working with: $('body').on('click' , function(){ $('body').append('<div class="ajax-success"><p>Its Done !!!</p></div>').fadeOut(2000); }); The goal was to a ...

javascriptjqueryhtmlcss

Constructing Jquery object with added event listener

Take a look at the code I've provided below: <body> <canvas id="canvas" height="300" width="300" style="border:1px solid" /> </body> <script> function maze(canvas){ this.ctx = canvas[0].getContext("2d"); ...

jqueryhtmlcanvasjquery-eventsmousedown

flexbox layout with a fixed sidebar that stays in place

Is there a way to make the sidebars in the holy grail layout sticky using flexbox? Specifically, I want the aside and nav sections of the HTML to stop scrolling down further once the last element is reached. I've tried various methods but with limited ...

cssflexbox

showcasing real-time webcam information within an HTML web application

I have successfully integrated my webcam data live into my web application using the following code snippet. The live feed from my webcam is now visible on the webpage. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

javascripthtmlwebcamwebrtcgetusermedia

Ways to eliminate excessive spacing between grid blocks

Hey, I'm having an issue with displaying ads in a thumbnail format; there seems to be too much space between them. Take a look: I've been utilizing Bootstrap thumbnails to showcase products. echo '<div class="col-sm-6 co ...

csstwitter-bootstrap-3

Having trouble extending my navbar to the full height of the window

Having an issue with my code regarding the menu. I am trying to create a navbar that fills the height on the left side for PC screens and becomes scrollable at the top for mobile versions. The problem lies in my flex container not properly filling the scr ...

htmlcssflexbox

Disable the movement and dragging functionality of the scroll feature in Google Maps using React

I have a map.jsx file in my React application that contains the code below: import React from 'react'; import GoogleMapReact from 'google-map-react'; import './map.css'; const Map = ({ location, zoomLevel }) => ( <d ...

javascriptcssreactjsgoogle-maps

The Bootstrap Grid Leaves Blank Spaces Unfilled

View the screenshot here Take a look at the image above. I'm struggling to fill the empty space with div elements. I've experimented with display:inline-block and other display properties, but they haven't yielded the desired results. < ...

htmlcssbootstrap-4

Tips for resizing a larger image to display only a specific portion in CSS (and incorporating JS if needed)

I need to resize an image that measures 1024x1024 and is segmented into 4 quadrants: My goal is to reduce the size of this image so that quadrant 2 is 256x256 while masking out or hiding the remaining 3 quadrants, displaying only the desired section on th ...

javascriptjqueryhtmlcss

When the mouse button is released or when an event listener is

I've been pondering a question that has yet to be fully answered. When I implement this technique to catch a mouse up event: <div onmouseup="/*Script to be executed*/"></div> Is it more efficient than this newer approach: <div id=" ...

javascripthtmlmouseevent

How to create an HTML hyperlink in CakePHP version 2.2.1 and above?

Is there an easy way to create an HTML link using the HtmlHelper class in CakePHP 2.2.1? Let's say I have a route set up that maps /finest-perfumes-ever-2012 to the Perfumes/Index Controller/Action. I want the generated link to be: somedomain.com/f ...

htmlcakephphyperlinkhtml-helpercakephp-2.2

Issue with Angular 11: Unable to bind to 'ngForOf' as it is not recognized as a valid property of 'tr' element

My issue lies with a particular page that is not functioning correctly, even though it uses the same service as another working page. The error seems to occur before the array is populated. Why is this happening? I appreciate any help in resolving this p ...

htmlangulartypescriptngforangular11

Including a drop-down arrow or triangle next to the initial button

In the navigation bar displayed below https://codepen.io/shaswat/pen/XzpRXL Is it possible to create a down triangle or arrow next to the "home" link, which changes direction upward when hovered over? How can this be achieved without modifying any HTML e ...

htmlcss

What's the best way to update the value of an angular field upon submission?

Could someone please provide instructions on how to update the myName variable when the "submit" button is pressed? Thank you! app.js: app.controller('SomeController', ['$scope', 'emails', function($scope, emails) { emails ...

javascripthtmlangularjsangularjs-scope

When submitting an Asp net mvc Form, some fields may not be posted as expected

I'm facing an issue with my ASP.NET MVC application form. Some fields that should be posted are missing, and I can't figure out why. <form id="FormRegistroUsuario" action="/Account/AdminSecurityUserAccountAdd"> <fieldset> ...

javascriptjqueryhtmlforms

What is the functionality of Google Chrome's "New Tab" iframes?

Have you ever wondered about those 8 small iframes displaying your most visited websites? How do they capture snapshots of the websites? How are the websites chosen for display? And most importantly, how do they actually work? Edit: I want to learn how to ...

javascriptphpjqueryhtmlcss

JavaScript providing inaccurate height measurement for an element

Upon loading the page, I am trying to store the height of an element. To achieve this, I have utilized the jQuery "ready" function to establish a callback: var h_top; var h_what; var h_nav; $(".people").ready(function() { h_top = $(".to ...

javascripthtmljquerycss

Use CSS properties to isolate and extract the logo from the Sprite image

If we have a sprite image, like the StackOverflow sprite, and CSS properties like: background-position: 0px 0px; width: 250px; height: 61px; We can use the Chunky PNG library to crop out a specific part of the sprite. However, some websites use negative ...

cssrubybackground-imagechunkypng

Ways to eliminate the Vuetify append-icon from the sequential keyboard navigation

In my Vue.js application using Vuetify, I have implemented a series of password fields using v-text-field with an append-icon to toggle text visibility. Here is the code snippet: <v-text-field v-model="password" :append-icon="show1 ? 'mdi-eye& ...

javascripthtmlvue.jsvuetify.js

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

Can someone please review this source code? Here is the demo link: http://jsfiddle.net/bala2024/nvR2S/40/ $('.expand').click(function(){ $(this).stop().animate({ width:'73%', height:'130px' }); $( ...

javascriptjqueryhtmlcss