Label stops functioning properly when there is a line-height exceeding 1

The problem arises when the line-height of a paragraph is set to more than 1em and the label tag doesn't work properly between lines.

<p style="line-height: 2em;"><input type="checkbox" id="xx" /> 
<label for="xx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat quis magna sed varius. Suspendisse scelerisque cursus nunc et pulvinar. In nec metus dolor. Fusce blandit leo quis nulla scelerisque dignissim. Mauris fermentum diam sed metus venenatis pellentesque. Maecenas tellus lacus, condimentum in nibh et, ornare pharetra felis. Fusce mollis libero nisl, eu sodales mauris sagittis id.
</label></p>

View example here: jsfiddle

Is there any solution to this issue?

Answer №1

There's a unique method I came across that involves wrapping the entire paragraph with a label, although I'm uncertain of its validity in various HTML versions.

<label for="xx">
    <p style="line-height: 2em;">
        <input type="checkbox" id="xx" /> ...
    </p>
</label>

Check out the demo here: http://jsfiddle.net/2nFdq/1/

Answer №2

When the label for="" syntax is not needed, you can implement the following method.

HTML:

<p style="line-height: 2em;">
  <label>
    <input type="checkbox" id="xx" />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat quis magna sed varius. Suspendisse scelerisque cursus nunc et pulvinar. In nec metus dolor. Fusce blandit leo quis nulla scelerisque dignissim. Mauris fermentum diam sed metus venenatis pellentesque. Maecenas tellus lacus, condimentum in nibh et, ornare pharetra felis. Fusce mollis libero nisl, eu sodales mauris sagittis id. Maecenas semper nisi et augue imperdiet rutrum. Vivamus at viverra metus! Quisque eleifend cursus massa, sed facilisis diam ultrices ac. Nulla facilisi. Donec auctor adipiscing tellus id interdum. Nullam sodales libero sed lacus consectetur sollicitudin. Maecenas lacinia risus in lectus tincidunt, quis luctus turpis sollicitudin.
  </label>
</p>

CSS:

label{
  display:block;
}

View the fiddle.

If you prefer to use the label for="" syntax along with CSS to align the checkbox neatly with the label text, here's an alternative solution:

<p><input type="checkbox" id="xx" />
  <label for="xx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat quis magna sed varius. Suspendisse scelerisque cursus nunc et pulvinar. In nec metus dolor. Fusce blandit leo quis nulla scelerisque dignissim. Mauris fermentum diam sed metus venenatis pellentesque. Maecenas tellus lacus, condimentum in nibh et, ornare pharetra felis. Fusce mollis libero nisl, eu sodales mauris sagittis id. Maecenas semper nisi et augue imperdiet rutrum. Vivamus at viverra metus! Quisque eleifend cursus massa, sed facilisis diam ultrices ac. Nulla facilisi. Donec auctor adipiscing tellus id interdum. Nullam sodales libero sed lacus consectetur sollicitudin. Maecenas lacinia risus in lectus tincidunt, quis luctus turpis sollicitudin.
  </label>
</p>

CSS:

label{
  line-height:2em;
  display:block;
}

input[type="checkbox"]{
  float:left;
  position:relative;
  margin:.5em .5em 0 0;
}

View the fiddle.

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

Safari does not support the use of nth-child

My CSS code is functioning properly in Firefox and Chrome but not in Safari (5.1). Even though I have confirmed that Safari supports nth-child, it still does not work. Can someone please help me identify what I'm doing wrong? CSS: option:nth-child ...

Eliminate border around image link

I can't figure out what I'm doing incorrectly... I included some CSS code a:active {text-decoration: none; border: 0px solid black} a:link {text-decoration: none; border: 0px solid black} a:visited {text-decoration: none; border: 0px solid black ...

Problem with Jquery fetching data from specified div not resolved

Here is a working example: var myvar; $.get('formElements.html', function(data) { myvar = data; }); However, this code does not work as intended: var myvar; $.get('formElements.html .className', function(data) { myvar = data; } ...

Can divs be arranged in a similar fashion as images?

My goal is to create a navigation bar (#nav) with each nav item being a div (#nav div). However, my current approach isn't working as expected. Here is the code I'm using: #nav { background: url("navbg.png"); /* navbg.png is 1x40 pixels */ ...

Effortless Page Navigation - Initial click may lead to incorrect scrolling position, but the subsequent link functions perfectly

While implementing the Smooth Page Scroll code from CSS Tricks, we encountered an issue where clicking on a navigation link for the first time only scrolls down to a point that is approximately 700px above the intended section. Subsequent clicks work perfe ...

CSS causing navigation bar drop down content to be hidden when hovering

I'm currently working on a drop-down menu and everything seems to be functioning properly. However, when I hide my drop-down block, it doesn't reappear on hover. Can someone help me identify the issue here? HTML-: <div id="nav_wrapper"> ...

Creating a vertically scaling div with full height using Bootstrap 3

I am facing an issue with creating a full-height website using Twitter because the body min-height set to 100% seems to be causing problems. Here is my CSS code: html{ height:100%; } body{ min-height:100% } #main{ min-height:100%; } And here ...

Struggling to make images wrap properly using flexbox

I've been struggling to get these images to wrap properly within my container. They keep overflowing beyond the designated width and I'm not sure if it's because I have paragraphs placed under each image. Any ideas on how to make 3 images ap ...

Achieve a full-width span for a single item in a CSS grid without any alterations to the HTML code

How can I make the first item in this grid span 100% without changing the HTML structure? The first item is assigned an extra class ".sub" Is it possible to achieve this? Click here for more information <div class="fd-col fd-5col"> <div class= ...

splitting lengthy words into several lines

Does anyone know how to break words like the examples below using CSS or jQuery? SAMPLE 1 ConfigTechnologyHormonyAppComponentBackOfficeLaunch It needs to be broken into ConfigTechnologyHo rmonyAppComponentB ackOfficeLaunch SAMPLE 2 WorkAppComponentBa ...

Disabling animations in Reactjs with CSSTransition and Group Transition

Currently, I am experimenting with REACTJS to build a basic app featuring Transitions. In my project file, I have imported CSSTransitions and Group Transition. However, when attempting to implement CSSTransition for specific news items, the animations are ...

Troubleshooting Gulp Conversion of Bootstrap-Material Scss to CSS: Error Message "Import Not Found"

Upon completing my gulp task styles, I encountered the following error: Error in plugin "sass" Message: static\node_modules\bootstrap-material-design\scss\_variables.scss Error: File to import not found or unreadable: ~bootstrap/sc ...

Attempting to emulate the grid showcase using flexbox styling

Creating this layout using CSS Grid was a breeze. However, I wonder if it can be achieved with Flexbox. What do you think? .Message { display: inline-grid; grid-template-areas: ". name""date text"; } .Date { align-items: ...

Is it possible to incorporate a background color into a table using the predefined classes in Bootstrap?

Is there a way to utilize the default color scheme in twitter-bootstrap-3? I attempted using "Active" and "Success" for colors rather than background-color, but it did not work with this code snippet. <table class="table table-bordered background-col ...

CSS fails to render properly on pages containing multiple query strings

An issue was initially reported by a customer using an IE browser (specific version unknown). I was able to reproduce the problem on my Samsung Galaxy 3 mobile's Chrome browser. The CSS is not being applied to the page when accessing this link with tw ...

How can I save the complete CSS file using Firebug FireDiff?

While making CSS modifications with Firebug and FireDiff, I've encountered a few mishaps where I mistakenly saved a diff instead of the complete snapshot. This resulted in uploading only one or two changes to my web server and overwriting the entire C ...

Material Design Angular2 Toolbar

I am currently working on designing a toolbar using Material and Angular2. My main challenge is formatting the toolbar in such a way that the search bar appears centered in white, while the "Create Project" button and other buttons are aligned to the right ...

What could be the reason for the hr tag's CSS not appearing in React code?

In my React code, I am trying to create a border using the following code: <hr className="borderLine" /> However, when I attempt to style it with CSS, I utilize this snippet of code: .divider { margin: 2rem; width: 100%; color: ...

Why is it that Lotus Notes is unable to render this HTML code properly?

I am having trouble with an email that displays properly on every platform except Lotus Notes. Can anyone provide insight as to why this email is not rendering correctly in Notes? Here is a screenshot: img (please note the images are for demonstration pu ...

Reveal and conceal grid elements upon clicking embedded links

I'm attempting to toggle the visibility of div content upon clicking a link. I've tried using a similar approach as shown in http://jsfiddle.net/fXE9p/, but unfortunately it didn't work for me. <body> Clicking on a button should m ...