Expanding the width of horizontal checkboxes to 100% using jQuery Mobile

I'm attempting to expand three horizontal checkboxes across the entire width of the page.

<!DOCTYPE html> 
<html> 
  <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
    <link rel="stylesheet" href="css/style.css">
  </head> 
  <body> 
    <div data-role="page" data-theme="b">
      <div data-role="header">
        <h1>Primary Codes</h1><br>
      </div><!-- /header -->

      <div data-role="content"> 
        <h1 id="result">Code: <span id="prefix"></span><span id="suffix"></span></h1>
        <form>
          <div class="custom">
            <fieldset data-role="controlgroup" data-type="horizontal">
              <input type="checkbox" name="checkbox-h-2a" id="phone">
              <label for="phone">Phone</label>
              <input type="checkbox" name="checkbox-h-2b" id="internet">
              <label for="internet">Internet</label>
              <input type="checkbox" name="checkbox-h-2c" id="video">
              <label for="video">Video</label>
            </fieldset>
          </div>
          <fieldset data-role="controlgroup2">
            <legend></legend>
            <input type="radio" name="jobtype" id="1" value="1">
            <label for="1">New Aerial</label>
            <input type="radio" name="jobtype" id="2" value="2">
            <label for="2">New Underground</label>
            <input type="radio" name="jobtype" id="3" value="3">
            <label for="3">MDU/Apartment</label>    
            <input type="radio" name="jobtype" id="4" value="4">
            <label for="4">Reconnect</label>
          </fieldset>
        </form>

      </div><!-- /content -->

    </div><!-- /page -->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
    <script src="js/primary.js"></script>
  </body>
</html>

While checking this layout in Brackets, it appears that the "fieldset" selector is already set to occupy 100% width.

I have attempted adjusting the widths of both the "label" and "input" elements without success.

Please note: I've come across similar discussions recommending the use of a navbar element, but due to the specific requirements of my application, this isn't a viable solution. The checkboxes must be displayed horizontally.

Answer №1

If you assign a custom class to your fieldset in order to target specific elements within it, the code will look like this:

<fieldset class="fullwidth" data-role="controlgroup" data-type="horizontal">
  <input type="checkbox" name="checkbox-h-2a" id="phone">
  <label for="phone">Phone</label>
  <input type="checkbox" name="checkbox-h-2b" id="internet">
  <label for="internet">Internet</label>
  <input type="checkbox" name="checkbox-h-2c" id="video">
  <label for="video">Video</label>
</fieldset>

When using these CSS rules, it appears to be effective:

.fullwidth .ui-controlgroup-controls .ui-checkbox {
    width: 100%;
}
.fullwidth .ui-controlgroup-controls .ui-checkbox label {
    width: 100%;
}

View Live Example

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

Changing font color of a selected item in Material-UI's textview

I have a select textview in my react app and I am wondering how to change the font color after selecting an item from this textview. <div> <TextField id="standard-select-currency" select fullWidth l ...

Animating with Jquery swipe motion

I am looking to make my brand image appear animated when the site is opened. I want it to swipe or move linearly from left to right and then return to its original position. I tried searching on Google for a solution but couldn't figure out how to mak ...

Is there a way in Jquery to retrieve the id of the clicked element and modify its name?

I am using a drag-and-drop website builder that utilizes HTML blocks, each with a unique ID. After dropping the blocks onto the canvas, I want to create a navigation menu that links to the IDs of each block. How can I retrieve the current ID of the block I ...

Tips for grabbing specific column header text in tables with different id, name, or class using Jquery

I utilized the each() method to extract the table header text. However, my goal is to specifically target and retrieve the table header text labeled as 4.1. Here are the results: Below is the HTML table code: <form enctype="multipart/form-data&quo ...

Struggling with CSS button hover effect: can't get border and background change to work

Hello coding community! I am a beginner in programming and I'm eager to learn. Recently, I came across a stunning button effect on Codepen that caught my attention. You can check it out here. However, when I tried to replicate the code from this exam ...

Image placed as background for registration form

In my Vue project, I am trying to create a login form with an image as the background. However, I am facing an issue where the image is not displaying on the page. Can someone guide me on how to add a picture behind the form? HTML: Below is the HTML code ...

Encountering a JSON Parse error when using jQuery Ajax with the Wikipedia API

When I attempt to Parse JSON data using the Wikipedia API, the URL successfully returns json data. I am specifically looking for the snippet part of the search notation in the response, but encountering errors. I have included the code below for your revie ...

Using jQuery to send a POST request with a data object

Trying to figure out something. Attempting to post an object using jQuery Ajax POST, like so: var dataPostYear = { viewType:GetViewType(), viewDate:'2009/09/08', languageId:GetLanguageId() }; $.ajax({ type: "POST", url: url ...

Looking to incorporate multiple accordion drop down menus on your website? Utilize a combination of HTML, CSS, and JavaScript to

I am experiencing a challenge with implementing multiple accordion menus on my website. Whenever I attempt to duplicate the code, the new accordion menu appears but clicking on the first bar simply scrolls me back to the top of the webpage. Below is the H ...

Issues with alignment within Bootstrap grid system

I have three unique "cards" that I want to display horizontally and center on the page without using the bootstrap card class. Currently, I am attempting to assign each of them a width of .col-lg-4 within an outer div set to full width. However, they are s ...

Undefined response received when parsing JSON data

Hey there, I'm currently working on an ajax request that submits a form and sends an email. If the email is successfully submitted, I encode a PHP array that has a structure like this: $success = array("state" => "Email Sent"); My issue arises wh ...

The mixin animation received 2 arguments, even though it only accepts 1

Below is the sass code snippet, @include animation(swayb $speed ease infinite 3s, reset 1s ease forwards 5s); When I try watching using compass watch on my Ubuntu machine, it triggers an error, (Line 2500 of _includes/_common.scss: Mixin animation tak ...

Center two lines of text in a div in a vertical fashion

After going through several articles on this topic, I've picked up some tricks for vertical alignment like using line-height for a single line of text, display:table for multiple divs, and Flexbox in CSS3. However, I'm still struggling to align t ...

What is the best way to determine the accurate size of a div's content?

There are 2 blocks, and the first one has a click handler that assigns the block's scrollWidth to its width property. There is no padding or borders, but when the property is assigned, one word wraps to the next line. The issue seems to be that scrol ...

`Z-index hover problem with jQuery`

Looking for a solution to make a transparent png act as a trigger for starting and stopping a slideshow box underneath it using z-index settings. The current script functions well for the slideshow, but I want the top transparent image (with ID "trans_im ...

Images cannot be uploaded to the login page

Here is the code for the login.aspx page: <%@ Page Title="Log In" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="DoubleEntryForm.Account.Login" %> <asp:Content ID="HeaderContent" runat="s ...

Reset the input field upon button press

Is there a way to clear the input field after pressing the button? <div class="form-group autocomplete"> <div class="input-group search"> <input id="search" name="searchterm" type="search" class="form-control form-control search-input" pl ...

The Navbar design in Bootstrap is not scaling properly with the background image, making

I am currently in the process of developing a Bootstrap 5 webpage based on a provided design, but I am encountering some challenges. Here is the design I am working from: https://i.sstatic.net/MsFzq.jpg Here is my current progress: https://i.sstatic.ne ...

Linking a pair of checkboxes

I am dealing with two checkboxes on my website. <input class="checkbox1" type="checkbox" name='1' id="example1" value="example1"/> and <input class="checkbox2" type="checkbox" name='2' id="example2" value="example2"/> I ...

When using jQuery without $.ajax, the combination of $.POST and json functions will return "null" when retrieving data from PHP's json_encode

Although I am writing for the first time, I have been a part of this community before. I decided to post my query here because none of the similar questions seemed to offer a clear solution to my specific issue. I am currently working on a tic-tac-toe gam ...