What is the maximum length that the label of an HTML checkbox input can be before it aligns with the start of the label on the first line?

Here is the HTML input checkbox with a picture and snippet provided below.

<div id="div123" style="word-wrap:break-word;">
<input tabindex="5" enterastab="" type="checkbox" id="chkBx" name="v_108950" value="OPTION_1111111111111"/>
<label id="lbl123" for="chkBx" unselectable="on">Option 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</label>
</div>

https://i.sstatic.net/VxXUu.png

Query: In case of lengthy labels, how can I align the text to start below the "O" instead of the left side of the checkbox?

htmlcss

Answer №1

To utilize Flexbox, simply apply display: flex to the parent div element. Additionally, you can include word-break: break-all on the label but ensure to insert a br after the first word to properly display numbers beneath the option.

div {
  display: flex; 
  align-items: flex-start;
}
label {
  word-break: break-all; 
}
<div id="div123">
  <input tabindex="5" enterastab="" type="checkbox" id="chkBx" name="v_108950" value="OPTION_1111111111111" />
  <label id="lbl123"  for="chkBx" unselectable="on">Option <br> 11111111111111111111111111111111111111111111111...
</div>

Answer №2

To achieve a 2-column layout using Flexbox, follow these steps:

#flex-container {
  /* Use display property to create a flexible container */
  /* Each child element will automatically form a separate column */
  display: flex;
  
  /* Determine vertical alignment of columns */
  /* Setting align-items to flex-start aligns items to the top */
  align-items: flex-start;
}
<div id="flex-container">
  <input type="checkbox" id="check1" name="checkBoxOne" />
  <label for="check1">Option One</label>
</div>

Answer №3

Either the inline-block property or float property can be utilized in this scenario

input {
display: inline-block;
vertical-align: top;
}


label {
display: inline-block;
vertical-align: top;
width: calc(100% - 40px);
}

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 email generated by Laravel does not conform to HTML formatting standards

After creating an email using markdown in Laravel, I noticed that the email content received was not displaying correctly. The HTML tags were not being rendered properly. You can view my email here. Any help on this issue would be greatly appreciated. I h ...

htmllaravelemail

I am having trouble getting my JavaScript to load

I've hit a roadblock trying to understand why my JavaScript code isn't executing properly. Could someone kindly point out what I may have overlooked? :( JSFiddle Link HTML Snippet <div class="po-markup"> <br> <a href="# ...

javascriptjqueryhtml

Arrange text in a line below neatly in a list

My goal is to line up items on the same row, as shown in the screenshot. I need the opening hours to align consistently in the list. The data is retrieved from a database and displayed using Vue. This is how I currently display the opening hours and days. ...

htmlcsslistvue.js

Tips for aligning chart data alongside a chart that is compatible with various screen sizes

Positioning elements in CSS is presenting a new challenge for me, especially when it comes to creating a custom chart details section alongside my chart. Unfortunately, I am encountering issues with the display on different devices. While minor misalignmen ...

javascripthtmlcsschart.js

Stylize the selected item in a kendoui listview

I am utilizing a kendoui listview to showcase various signatures in an ASP.NET MVC 5 project. My goal is for the listview to allow selection and exhibit data based on a predefined template. Everything is functioning properly, except for an unwanted margi ...

jquerycssasp.netlistviewkendo-ui

How can HTML output be automatically indented?

Seeking a way to automatically indent the HTML generated by my PHP script. I currently use HTML Purifier for validating internal textbox inputs, but I have reservations about using HTML Tidy due to its lack of active development and numerous reported bugs ...

phphtmlindentation

Use the .replace() method to eliminate all content on the page except for the table

Extracting a table from a page that has been loaded through .ajax() in queue.htm has proven to be challenging. I am attempting to utilize .replace(regex) in order to isolate the specific table needed, but the process is unfamiliar to me. $j.ajax({ ...

javascriptjqueryhtmlregexreplace

Using jQuery to update a table, however, the browser is failing to automatically refresh the

I have developed a node.js and sockets app to create a Single Page Application (SPA). The user can fill out a form to create a new lobby. Upon submission, a socket event is sent to the server, where the new lobby is added. The server then emits an event to ...

javascripthtmlnode.jssocket.io

The CSS styles are functioning correctly in index.html, but they are not applying properly in the component.html

When the UI Element is clicked, it should add the class "open" to the list item (li), causing it to open in a collapsed state. However, this functionality does not seem to be working in the xxx.component.html file. Screenshot [] ...

javascriptcssangulartypescript

Bootstrap seems to be struggling with recognizing the last child of a button group. What steps can I take to troubleshoot and resolve this

I'm facing a small but annoying issue with my button group. The last button in the group appears rectangular instead of having rounded corners at the top right and bottom right. This is because the a.btn element is followed by a modal within the btn-g ...

htmlcssbootstrap-4

Place a Three.js scene within a jQuery modal dialogue box

I am attempting to integrate a Three.js scene into a jQuery modal window. The objective is to utilize the Three.js scene in a larger window size. This scene should be displayed after clicking on an image that represents the scene in a smaller dimension. Y ...

javascriptjquerycsscanvasthree.js

The ion-datetime in Ionic 4 ensures that the floating label always remains visible, even when the input

When an ion-datetime field in Ionic 4 has no value, the label always floats as shown below. Here is my code snippet: <form [formGroup]="statusHandlerForm"> <ion-item class="input-container " align-items-center no-padding> <ion-la ...

javascriptcssangularionic-frameworkionic4

Creating a custom HTML5 pattern for formatting Pakistani phone numbers

For my HTML5 pattern for Pakistan Phone Number Format, I have the following criteria: 03xx-xxxxxxx My current regex code is as follows: /03[0-9]{2}-[0-9]{7}/ Now, I want to ensure that the next 7 digits after the hyphen meet the following conditions: ...

javascriptregexhtml

Angular will move the input field cursor to the beginning after typing 4 digits

I'm looking for some guidance with a specific scenario involving a reactive form input field. The field is meant to capture the last four digits of a Social Security Number (SSN), and upon filling it out, an API call is triggered to validate the enter ...

javascripthtmlangulartypescriptforms

I am seeking guidance on extracting specific data from a JSON file and presenting it in an HTML table using jQuery

I am currently working on extracting specific elements from a JSON file and displaying them in an HTML table. I have successfully retrieved the data from the JSON file, stored it in an array, and then dynamically created an HTML table to display the conten ...

jqueryhtmlarraysjson

Conceal the Material UI Grid element and allow the following Grid Item to smoothly transition into its place

I need to create a form where certain Textfields must be hidden. However, when I attempt to hide a Grid item within a Grid container using display: none, the next grid item does not move to take its place. Instead, it creates whitespace. Is there a soluti ...

cssreactjsmaterial-ui

Issue with Flat-UI: Navigation bar is not collapsing correctly. Need help to resolve this problem

I am currently utilizing the most recent Twitter Bootstrap along with Flat UI. I have been trying to create a basic navbar that collapses when the screen size is reduced. How can I resolve this issue? This is how it currently appears: My navigation items ...

javascripthtmlcssruby-on-railstwitter-bootstrap

Unreliable behavior observed with the selenium driver.find_element method

Struggling to enter a password into a text box using Python. Here is the HTML code snippet for the webpage containing the input field. <input type="password" placeholder="" name="password" id="input6" value=" ...

pythonhtmlselenium

Background color and page height

When attempting to place a background image on the body element and the page height exceeds that of the viewport, allowing for vertical scrolling. In this case, the background image seems to start or end at the point where the viewport ends when scrollTop ...

css

When a table cell is hovered over, a left border will be added

I've been working on adding a left border to the text in a way that highlights the first cell's border when hovering over a row, providing a clear indication of the current row for users. Feel free to check out my progress so far on this fiddle: ...

htmlcss