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

Yii: Error: The method 'typeahead' is not defined for the object [object Object]

I am currently working on a project using Yii and I encountered a small issue with the Typeahead widget from Yiistrap. It seems that jQuery is being included multiple times - twice before the inclusion of bootstrap.js and once after. Uncaught TypeError: O ...

Discover the secrets to replicating the mesmerizing horizontal scrolling menu akin to the

What is the most effective way to create a horizontal menu similar to the innovative Google picture menu? Could someone kindly share their knowledge and provide the code for achieving the same outcome? ...

Initiate an Ajax call to pre-fetch video content

I've been attempting to download a video from my own source and display a loading message while it's being downloaded. Once the download is complete, I want to hide the loading icon and have the video ready for playback. My issue lies in gettin ...

Having trouble with the jQuery toggle functionality not working as expected

I'm implementing a function where a div should increase in height and opacity when clicked, and then revert back to its original state when clicked again. I used the toggle function for this purpose, but the issue is that the button disappears when th ...

Ensuring draggable div remains fixed while scrolling through the page

I am currently working on creating a draggable menu for my website. The menu is functional and can be moved around the page as intended. However, I have encountered an issue where the menu disappears when scrolling down the page due to its position attrib ...

Ways to make <li> elements display inline with React Bootstrap Rows and Columns

I have some content that I need to format and display in a horizontal list. When I only use HTML elements in the list, it appears horizontally as expected. However, when I incorporate React Bootstrap grid layout components like Row and Column, the list dis ...

Hiding the y-axis on a msstackedcolumn2dlinedy Fusion Chart: A step-by-step guide

Currently, I am utilizing the msstackedcolumn2dlinedy fusion charts. To see an example of this in action, please take a look at this fiddle: Fiddle The objective I have is to hide the y-axis value on the right side of this chart. Can anyone provide guida ...

Sharing the latest updates on fyneworks' star rating information

Currently, I am incorporating a star rating system into a sports website where users can rate events post-occurrence. During my research, I came across this informative post: JQuery Star Rating This resource seems to align perfectly with what I need, but ...

Utilize flex to position content at the bottom

My layout features a fixed header and footer, positioned at the top and bottom respectively. The content section in between fills the remaining space, with a scrollbar available if the content extends beyond the area. <div id="app"> <d ...

generate a different identifier for ajax requests avoiding the use of JSON

The AJAX request functions in the following way: success: function(data) { $('#totalvotes1').text(data); } However, I need it to work with unique IDs as follows: success: function(data) { $('#total_' + $(this).attr("id")). t ...

A unique CSS transition effect applied after toggling a class

Greetings everyone I recently created this code pen https://codepen.io/alexyap/full/MmYvLw/. I am facing a challenge with my navigation menu. The transition in works perfectly, but the fade-out effect looks terrible. I'm struggling to figure out this ...

Is there a way to prevent the window.on('beforeUnload') event from triggering when using the <a> tag?

For my project, I require a user confirmation alert to appear when the user attempts to close the window or tab using the X button. However, the window.on('beforeUnload') function also triggers for hyperlinks. How can I prevent the leave page al ...

The list of data in the Jquery/Ajax success response is showing as "undefined."

I am facing an issue with my AJAX code. It retrieves a list from the controller, but when I display it, I receive an "undefined" message. AJAX $.ajax( { url: "/Panel/OpenOrderDetail1", type: 'GET&a ...

Stop ajax request when select2 is clicked

Is there a way to change the ajax call behavior in select2 drop down items so that it only retrieves data when I start typing in the search box, and not on click of the element? Your guidance on this issue would be highly appreciated. $("#ddlItems").sel ...

Getting error messages for form validation in CodeIgniter when using Fileupload via Ajax can be tricky. Here are

Hello, I am currently working on retrieving form errors for an input type file in CodeIgniter. I have created a Javascript code that utilizes Ajax to submit the details as shown below: var name = $("#name").val(); var des = $("#des").val(); var img=$("#fi ...

Convert the html list to a select dropdown with a hidden input type

In the process of revamping some code created by a fellow colleague, I have decided to modify his list into a more suitable select-option drop-down list. The PHP code provided by him looks like this: echo "<ul>"; echo "<li><a href='#& ...

What is the best way to declare a minimum and maximum date in HTML as the current date?

I have a question regarding setting the min/max date for a date input in my Angular 6 project. How can I ensure that only dates up to the current date are enabled? So far, I have attempted to initialize a new Date object in the ngOnInit function and set t ...

Implement a counter using jQuery within a self-invoking function

In an attempt to keep track of correct and incorrect answers given, a counter is implemented within the if-else structure that triggers after the user clicks on a button. (function countCorrectness(){ //generate and display a random number between 1 and ...

What is the best way to wrap the countdown numbers with <span> tags?

I have implemented the following countdown script: var clock = document.getElementById("timeleft"), tdy = new Date(1494979200000); countdown.setLabels( '| <span class="time-label">second</span>| <span class="time-label">minute< ...

adjust highcharts chart size to fit screen width

Has anyone experienced issues with setting an explicit width of 400px on a chart? I am facing difficulties as the chart gets cut off instead of scaling down to that size. My main concern is having it resized properly for an iPhone mobile site. Can anyone ...