Horizontally align the label with the Checkbox

Hi everyone, I'm new to this forum and I've encountered a problem that I am struggling to resolve.

The issue lies with a table containing a checkbox list. Initially, everything looks fine when I use:

    display:inline-block;

However, on smaller devices like mobile phones, instead of the aligned appearance:

"[] Other                   
 Unknown"

I would prefer the label to be aligned as follows:

 "[] Other
     Unknown"

Is there a way for me to align the label in this manner?

Here is the link to my code snippet

jqueryhtmlcsscheckboxtext-align

Answer №1

Simply incorporate CSS code such as td.cstm-cls {display: flex;}

body{width:40%;}
label{display:inline;font-size:11px;}
td.cstm-cls {
  display: flex;
}
<table class='table'>
      <thead>
        <h3>Crane Brand</h3>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" name="craneBrands[]"  value='Demag'><label>Demag</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Kone'><label>Kone</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Starluff'><label>Starluff</label></input>
        </tr>
        <tr>
          <td><input type="checkbox" name="craneBrands[]"  value='Gis'><label>Gis</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='JDN Monocrane'><label>JDN Monocrane</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Monosteel'><label>Monosteel</label></input></input>
        </tr>
        <tr>
          <td><input type="checkbox" name="craneBrands[]"  value='Litfking'><label>Litfking</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Atlas Copco'><label>Atlas Copco</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Ingersoll Rand'><label>Ingersoll Rand</label></input></input>
        </tr>
        <tr>
          <td><input type="checkbox" name="craneBrands[]"  value='Hitachi'><label>Hitachi</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Kito'><label>Kito</label></input></td>
          <td class="cstm-cls"><input type="checkbox" name="craneBrands[]"  value='Other/Unknown'><label>Other / Unknown</label></input></td>
        </tr>
      </tbody>
    </table>

Answer №2

I have successfully resolved your problem. Please execute the code snippet below:

label {
display: inline-block;
font-size: 11px;
}
.table td input, .table td label {
float: left;
}
.table td input {
margin: 0px 5px 0;
}
<table class='table'>
  <thead>
  <h3>Crane Brand</h3>
    </thead>

  <tbody>
    <tr>
      <td><input type="checkbox" name="craneBrands[]"  value='Demag'>
        <label>Demag</label>
        </input></td>
      <td><input type="checkbox" name="craneBrands[]"  value='Kone'>
        <label>Kone</label>
        </input></td>
      <td><input type="checkbox" name="craneBrands[]"  value='Starluff'>
        <label>Starluff</label>
        </input>
    </tr>
    <tr>
      <td><input type="checkbox" name="craneBrands[]"  value='Gis'>
        <label>Gis</label>
        </input></td>
      <td><input type="checkbox" name="craneBrands[]"  value='JDN Monocrane'>
        <label>JDN Monocrane</label>
        </input></td>
      <td><input type="checkbox" name="craneBrands[]"  value='Monosteel'>
        <label>Monosteel</label>
        </input>
        </input>
    </tr>
    <tr>
      <td><input type="checkbox" name="craneBrands[]"  value='Litfking'>
        <label>Litfking</label>
        </input></td>
      <td><input type="checkbox" name="craneBrands[]"  value='Atlas Copco'>
        <label>Atlas Copco</label>
        </input></td>
      <td><input type="checkbox" name="craneBrands[]"  value='Ingersoll Rand'>
        <label>Ingersoll Rand</label>
        </input>
        </input>
    </tr>
    <tr>
      <td><input type="checkbox" name="craneBrands[]"  value='Hitachi'>
        <label>Hitachi</label>
        </input></td>
      <td><input type="checkbox" name="craneBrands[]"  value='Kito'>
        <label>Kito</label>
        </input></td>
      <td><input type="checkbox" name="craneBrands[]"  value='Other/Unknown'>
        <label>Other /Unknown</label>
        </input></td>
    </tr>
  </tbody>
</table>

Answer №3

Revamp your style by incorporating the code snippet below (make changes in CSS)

body{width:40%;}
td{padding:0px}
label{display:inline;font-size:11px;display:flex;word-wrap: break-word;}
input[type=checkbox]{float:left;padding:0px}
  <table class='table'>
      <thead>
        <h3>Crane Brand</h3>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" name="craneBrands[]"  value='Demag'><label>Demag</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Kone'><label>Kone</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Starluff'><label>Starluff</label></input>
        </tr>
        <tr>
          <td><input type="checkbox" name="craneBrands[]"  value='Gis'><label>Gis</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='JDN Monocrane'><label>JDN Monocrane</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Monosteel'><label>Monosteel</label></input></input>
        </tr>
        <tr>
          <td><input type="checkbox" name="craneBrands[]"  value='Litfking'><label>Litfking</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Atlas Copco'><label>Atlas Copco</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Ingersoll Rand'><label>Ingersoll Rand</label></input></input>
        </tr>
        <tr>
          <td><input type="checkbox" name="craneBrands[]"  value='Hitachi'><label>Hitachi</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Kito'><label>Kito</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Other/Unknown'><label>Other /Unknown</label></input></td>
        </tr>
      </tbody>
    </table>

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

Activate the bootstrap modal display using PHP code

Can someone help me trigger the modal('show') event using PHP code? I attempted the following: if(isset($_POST['Edit'])){ echo "<script> $('#Modal').modal('show') </script>"; } I tested this code, but i ...

phpjavascriptjquerytwitter-bootstrap

Load the identical page using jQuery and insert it into a specified <div> element

I have been using the load method to dynamically load content into a div, but I encountered an issue in my case. When trying to load a page that contains external JS files into the same page, the JS files get loaded twice - once when the page is initially ...

jquery

What is the best way to place tfoot at the top of the table

Below is the structure of my table: https://i.stack.imgur.com/QmlVn.png In the table, there are search input fields at the bottom of each column. I would like to move them to the top, right after the <thead> </thead>. The basic HTML code for ...

htmlcsshtml-table

Tips for choosing elements in jQuery that do not contain a particular element

How can I target elements in jQuery that do not contain a specific element within them? I am trying to create a sidebar that will close when the user clicks either the menu or the sidebar itself, excluding dropdown menus. Below is the structure of the menu ...

jqueryhtmlcss

Web fonts are functioning properly only on Chrome and Safari for Macintosh operating systems

A web designer provided me with some fonts to use on a website. Below is the content of my fonts.css file: /* Font Awesome */ /* Font Awesome Bold */ @font-face{ font-family: 'font-awesome'; src: url('fonts/font-awesome-bold-webf ...

htmlcssfonts

Ensuring that an added row remains at the bottom of a table composed of rows generated dynamically by utilizing the .detach() method

I need to ensure that the "subtot" row is always appended as the last row in the table. When dynamically adding rows, the "subtot" row appears as the last row the first time, but does not stay at the bottom when more rows are added. Even though I want the ...

javascriptjqueryhtmlcss

Filtering Individual Columns on the Server Side with DataTables

Seeking assistance with a complex issue that has been causing me quite a bit of stress. I am facing an obstacle with the DataTables grid, a feature I find truly impressive! Everything works smoothly until I attempt a search and encounter difficulties. The ...

jquerydatatables

Express bodyParser may encounter difficulties in parsing data sent from Internet Explorer

After creating a server app with Node and Express 4, I utilized jQuery for the front-end. An Ajax call was set up to send data via POST to the server: $.ajax({ cache: false, type: 'POST', url: Config.API_ENDPOINT_REGISTRATION, ...

jqueryajaxinternet-explorerexpress

Transferring a JavaScript element's ID to PHP

Recently, I came across a JavaScript function that automatically updates the date and time for me. I found the script on this URL: http://jsfiddle.net/pLsgJ/1/ setInterval(function() { var currentTime = new Date ( ); var currentHours = curren ...

javascriptphpjqueryhtml

Utilize jQuery to encase the final word of a paragraph within span tags

Greetings! Consider the following HTML snippet: <p>Phasellus sit amet auctor velit, ac egestas augue.</p> I am interested in enclosing the last word within span tags to achieve the following result: <p>Phasellus sit amet auctor velit, ...

jqueryhtml

Tips for creating responsive emails

Yesterday, I posted about my email newsletter and received some helpful feedback on creating a good structure. I implemented the suggestions provided into my newsletter and also added media query code to make layout adjustments for supported email clients. ...

htmlcssmedia-querieshtml-email

Gradually disappear when scrolling "not fluid" or "jerky"

I recently developed a jQuery code to create a fade-out effect on an overlay while scrolling down. Everything seemed to be working smoothly until I noticed that on certain older PCs, the fade effect appears choppy and inconsistent. Strangely enough, on my ...

jqueryopacityfadeout

Merge ReactCssTransitionGroup with React-route's Link to create smooth page transitions

React.js I'm facing an issue with the React.js code provided below. My goal is to set up the animation before transitioning to a new page using "React-router.Link" and ReactCSSTransitionGroup. Version: react: '15.2.1' react-addons-css-trans ...

javascriptcssreactjsreact-routerreactcsstransitiongroup

A convenient npm tool for combining HTML files into a single document

I have a specific need to combine several HTML files into a single file. This involves eliminating the HTML tags and HEAD tag from each file, then merging them into one file with only one set of HTML and HEAD tags. I am wondering if there are any existing ...

htmlnode.jsnpm

Updating inner text content dynamically can be accomplished without relying on the use of the eval() function

I am faced with a situation where I have multiple batches of code structured like this: 1 <div id="backgrounds" class="centery">Backgrounds 2 <div id="bk1" class="attr">Background 1 3 <div class="container"> 4 ...

javascripthtml

Insert an image into a Word document using the addHtml function in PhpWord

Can someone help me with an issue I'm having in PhpWord? I am trying to insert an image into a Word document using HTML code, but it doesn't seem to be working. I am working in Visual Studio Code and the image is located in the 'public&apos ...

htmlphpword

Real estate for a targeted audience

1. Overview I have a list of selectors that should always apply certain properties. Some selectors require additional properties to be added. I'm struggling to find a way to achieve this without repeating code. 2. Minimal CSS Example (MCVE) 2.1 ...

cssstylus

Fetching data dynamically using ajax as you scroll

Currently, I am using the jQuery Tools Plugin to create an image slider. However, I am facing a challenge with loading a large number of images all at once. Since the slider is coded in JavaScript, I am not sure how to control the scroll position. I would ...

javascriptjqueryajaxscroll

Error message: "Uncaught ReferenceError: $ is not defined in BackboneJS and RequireJS"

In my Backbone application, I am using RequireJS. However, I keep encountering the error message Uncaught ReferenceError: $ is not defined, indicating that my libraries may not be loading properly. This is what my RequireJS config looks like: require.con ...

javascriptjquerybackbone.jsrequirejs

Utilizing iPad, Safari, and CSS to effortlessly fill a page with flexbox properties

Trying to create a flex layout that expands the main area to fill the entire height of the display, with a footer always at the bottom when the content is small. However, if the main content exceeds the display size, it should behave like a normal page and ...

htmlcssipadsafariflexbox