Creating a dual-column checkbox design with CSS only

I'm working with a dynamically generated form element that can only be styled using CSS. I need help achieving a specific layout without making any HTML changes, except for the classes. The "element" and "formField" classes are common and cannot be modified.

The layout I require is a two-column label-checkbox setup, with items 0 and 1 in one column, and items 2 and 3 in another column. As you can see from the code snippet provided, there are four label-checkbox pairs that need to be arranged in this manner.

While I understand the preference for removing tables, I currently lack the time to rebuild the entire site. Kindly assist me in styling the existing structure as described.

javascriptjqueryhtmlcss

Answer №1

If you want to achieve this, you can utilize the CSS properties float and clear. Here is a sample code snippet to demonstrate:

.element{
  float:right;
}

.element:nth-child(odd){
  clear:right;
}
<div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat0">Category 0</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat0" style="float:left">
                                <input type="checkbox" name="eCat0" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat1">Category 1</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat1" style="float:left">
                                <input type="checkbox" name="eCat1" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat2">Category 2</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat2" style="float:left">
                                <input type="checkbox" name="eCat2" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat3">Category 3</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat3" style="float:left">
                                <input type="checkbox" name="eCat3" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

Answer №2

If you have control over the styling of the parent element containing those four divs, you have the ability to define the layout as follows:

.parent {
    columns: 2;
}

This layout technique is compatible with Internet Explorer 10 and higher. See an example here: https://jsfiddle.net/c979dxLe/1/

Additionally, you can specify the width of the columns by referring to the documentation available at: https://developer.mozilla.org/nl/docs/Web/CSS/columns

Answer №3

I arranged some md-checkboxes within a parent div using a column-first order. Here is an example of how they are displayed:

1                                              4
2                                              5
3

Here's the CSS used:

.parent {
    columns: 2;
}
.parent > * {
    width: 100%;
}

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

The Impact of Using Custom HTML Tags with AngularJS Directives

If I were to create a unique avatarDirective in AngularJS that is connected to an userEmail property on the scope. The directive would update this HTML … <avatarDirective userEmail="user.email" /> with a standard img tag that has its src attribut ...

htmlangularjsangularjs-directive

What is the best way to superimpose text on a variety of images with varying sizes using CSS

I have a client who is requesting a sold text to be displayed on top of all images that have been sold, positioned in the bottom left corner of each image. While I have successfully implemented this feature, the issue arises when dealing with images of var ...

htmlcssoverlayimage-size

Transmit the Boolean value to the controller using ajax requests in asp.net.core with C# programming

Within the view section, there is a form that includes a checkbox input. <div class="checkbox"> <label class="">active</label> <div class="icheckbox_flat-green checked" style="position: relative;"> <input type="checkbox" id="A ...

javascriptc#htmlajaxmodel-view-controller

Is it possible to utilize jQuery for extracting information from HTML pages?

During my project research involving parsing and extracting content from HTML pages, I stumbled upon jQuery. Can jQuery be used for this purpose? If yes, could someone provide examples or share tutorial links with me? One idea I have is to parse the top q ...

androidjqueryjsonparsingjsoup

The JSON data appears to be correct, yet it is not functioning properly when transmitted to X

I have a JSON object that has been validated using https://jsonlint.com/. However, I am encountering an error when trying to use this JSON with the Xero API as shown below. { "Type": "ACCREC", "Status": "AUTHORISED", "DueDate": "2021-12-11T14:24:0 ...

javascriptjsonxero-api

Web2py exhibits varying behavior between local and online versions, where it executes server code but results in a 404 error

When I run the request on my local version of the application using the code below, it successfully executes on the server. $.ajax({ type: 'POST', url: "{{=URL('default', 'serverFunction.json')}}", data: {id: id} }); Howe ...

javascriptajaxweb2py

Align the text field value with the corresponding tooltip content in Vuetify

<v-col class="d-flex align-center"> <v-tooltip bottom> <template v-slot:activator="{ on }"> <v-text-field v-on="on" :value="info.payeeNo" den ...

htmlvue.jsvuejs2vuetify.js

When using firebase.firestore(), the data displayed is completely different and does not match the content of my actual database documents

I am trying to fetch data from firebase firestore using the following code: let db = firebase.firestore(); let locations = db.collection("location"); console.log("locations", locations); However, the logged data is coming back strange and not showing the ...

javascriptreactjsfirebasegoogle-cloud-firestore

Determine whether the response originates from Express or Fastify

Is there a method to identify whether the "res" object in NodeJS, built with Javascript, corresponds to an Express or Fastify response? ...

javascriptnode.jsexpressfastify

Generating personalized MongoDB collections for individual users - A step-by-step guide

My query is more about the procedure rather than a specific coding issue. I am working on a node application and using DHTMLX calendar. What I aim for is to have each user with their own set of events on their individual calendar. Currently, the implement ...

javascriptnode.jsmongodbexpress

When transferring files to Azure Blob Storage in segments using a SAS URL, I encountered a 403 error

Using Python, I am generating a SAS URL. An example of a generated SAS URL is: https://testvideos.blob.core.windows.net/testvideos/user_125/video_125/test.mp4?se=2023-05-14T11%3A02%3A59Z&sp=rc&sv=2022-11-02&sr=b&sig=7o8tNK508ekXy9JpahWBsfdf ...

javascriptazurefile-uploadazure-blob-storage

Change the parent title attribute back to its original state

This is in contrast to queries similar to the one referenced here. In my scenario, there is a child element within a parent element (specifically a matSelect within a matCard, although that detail may not be significant) where the parent element has a set ...

htmlangulartypescriptproperty-binding

What is the best way to halt a specific function in jQuery?

I recently developed a website for my photographer friend, and I implemented a feature where the home page is initially blurred. Visitors can click a button to unblur the content. While the functionality works smoothly, there's one issue - every time ...

javascriptjquery

Is jQuery failing to serialize the form data?

I have a question regarding my form. When I try to serialize it using a jQuery script, the output is empty. Could someone please assist me with this issue? Here is a snippet of my form: <form id="tabb2"> <!-- *************************** ...

javascriptphpjqueryajaxserialization

javascript enables smooth and continuous scrolling

<html> <style type="text/css"> #news { position: relative; box-shadow: 1px 4px 5px #aaa; text-align: left; padding: 5px; line-height: 20px; height: 235px; background: white; border: 1px solid #ccc; border-radius: 15px; background: #eee; wi ...

javascriptphp

Experience the smooth CSS3 transition effects on iOS devices such as iPhones and iPads. Elevate the appearance of DOM objects with

I have a basic image contained within a div tag. I use JavaScript to add a transition effect to the div element: <div style="transition: opacity 0.8s linear; opacity: 0.5;"><img src="..." /></div> At the end of the transition duration ...

iosipadcsscss-transitionsmobile-webkit

Is it necessary for me to replicate this function? - jQuery

I have developed a function that creates a transparent information overlay on a current div for a mobile web app. Context: I am using jQTouch, which means I have separate divs instead of loading individual pages anew. $(document).ready(function() { ...

javascriptjqueryhtmlcssjqtouch

Don't let noise linger in the background unnoticed

Within my HTML table, there are 32 cells that each possess an onclick="music()" function. This function is currently functioning correctly, with one small exception. I desire for the functionality to be such that whenever I click on a different cell, the m ...

javascripthtml

Having trouble including a YouTube iframe code within the document ready function

I am having trouble getting the youtube iframe API code to work properly within my $(document).ready() function. When I try to add the code inside the function, the player does not load. However, when I move the code outside of the document.ready, the play ...

javascriptjqueryyoutubeyoutube-api

The comments are visible in the database, but they only appear on my index page once I refresh the page

Trying to create a simple website with AJAX, PHP, jQuery, and MySQL. The goal is to have a text area that sends data to the database and displays it on the index page using AJAX/jQuery. However, after submitting the data, I have to manually refresh the pag ...

phpjquerymysqlajax