Label for the checkbox is covering other content on the screen in 1024 x 768

Here is the JSP code snippet:

<h:field
  path="configuredChannels" 
  required="true" 
  code="admin.menu.channels">
    <div class="row-fluid" 
      data-channel-checkboxes="#">
        <form:checkboxes 
          element="div class='span1 checkbox'" 
          items="${channels}" 
          path="configuredChannels" />
    </div>
</h:field>

The checkboxes work fine on most resolutions, except for the channel value 'Facebook' overlapping with the next checkbox at resolution 1024 X 768.

See the JPEG image below for reference:

The resulting client-side HTML code is as follows:

          <div class="controls">
                <div class="row-fluid" data-channel-checkboxes="#">
 <div class='span1 checkbox'>
<input id="configuredChannels1" name="configuredChannels" type="checkbox" value="SMS"/><label for="configuredChannels1">SMS</label>
</div class='span1 checkbox'>
<div class='span1 checkbox'>
<input id="configuredChannels2" name="configuredChannels" type="checkbox" value="Voice"/><label for="configuredChannels2">Voice</label></div class='span1 checkbox'>
<div class='span1 checkbox'><input id="configuredChannels3" name="configuredChannels" type="checkbox" value="Facebook"/><label for="configuredChannels3">Facebook</label></div class='span1 checkbox'>
<div class='span1 checkbox'><input id="configuredChannels4" name="configuredChannels" type="checkbox" value="Twitter"/><label for="configuredChannels4">Twitter</label>
</div class='span1 checkbox'><input type="hidden" name="_configuredChannels" value="on"/></div>
<span class="help-inline">
                    </span>
           </div>
       </div>

View the latest images below:

htmlcss

Answer №1

The issue arises from the utilization of a fluid row grid alongside assigning checkboxes a fluid span width:

<div class="row-fluid" data-channel-checkboxes="#">
 <div class='span1 checkbox'>

This setup means that the row-fluid always takes up 100% of its container's width (whatever that may be in your HTML context), while the checkboxes inherit the span1 class, which amounts to around 6.38% of the row-fluid width as per Twitter Bootstrap's specifications.

As you resize the window, the 100% width of the row-fluid decreases, eventually reaching a point where approximately 6.38% is insufficient to accommodate all the contents of the checkbox.

There isn't a straightforward fix for this within the confines of a fluid grid system; it's functioning as intended but probably not as desired. A more effective approach would involve letting the checkboxes occupy the necessary width without restrictions.

Consider removing the span1 class from the checkbox divs and applying the following CSS:

.checkbox {
  float: left;
}

By doing so, the checkboxes will no longer have equal widths like before; instead, when there isn't enough space to display them on a single line, they will wrap onto a new line.

Additional Note:

Avoid setting classes on the closing tag of a div—it serves no purpose. Classes (as well as other attributes) should only be specified on the opening tag (<div>), never on </div>.

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

What is the best way to loop through jsoup elements while skipping the initial two results?

Extracting desired data from the following HTML snippet: <div class='col5'> <strong><a href="/stellenangebote/107278-supporter-sap-crm?page=1&amp;query%5Bcity%5D=&amp;query%5Bradius%5D=100&amp;query%5Btext%5D=SOA+SAP" ...

javahtmlparsingjsoup

Access a three.js scene from a canvas element within the local environment to make alterations

Is it necessary to keep Three.js variables (scene, camera, renderer etc.) globally? I have devised a function that initializes canvas elements by taking a DOM position and other information to build the scene. This function is then passed to a render func ...

javascripthtmlcanvasscopethree.js

Create an HTML component that expands to fill any leftover space on the page, without using flex

In my current situation, I have two elements positioned side by side with dynamic widths based on their content. The element on the right needs to fill up as much vertical space as possible without a set width. I am looking for an alternative to flexbox d ...

htmlcss

Distinguishing each unique JavaScript property within an array of objects

I've been struggling with this problem for quite some time. I have an array of objects, focusing on the "00" object at the moment, and I am trying to group together the bestScore properties in a specific way: .. User Group apple .. User Group ba ...

javascriptjqueryhtml

event fails to trigger on a fixed positioned element

Here's the code snippet I've been working with: if ($('body.page-service-map').length || $('body.page-contact').length) { $(document.body).append('<div class="black-overlay"></div>'); ...

cssz-index

Guide on showcasing a list over several pages in Flask

I'm working with Flask and facing a challenge in displaying a dynamic list of items across multiple pages, as the list can potentially contain over 1000 items. Inside app.py, I've set up a route like this: @app.route('/displayitems') ...

pythonhtmlflaskjinja2

Challenge with PHP mail function in sending emails

I run a website and have a "Contact" section where users can fill out a form to reach me. The form is a basic one with its action being a php page. Here is the php code: $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4 ...

phpjavascripthtmlemail

Incorporating mootools scripts into a gwt application

My issue involves creating an animation on a Composite that should start when data is loading. To test this, I created animations on regular divs using HTML: <div class="LoadDataWidget"> <div id="arrow" class="greenArrow"></div> < ...

javascriptcssgwtmootools

I'm interested in implementing a cooldown feature on my button, but I'm not quite sure how to go about

Working on a React.Js website and looking to improve the Contact Me page by adding a cooldown to the button. Unfortunately, I haven't shared all the code here but feel free to reach out on Discord: uvejs#5162 for more details. import "./contactpa ...

htmlcssreactjs

Internet Explorer 11 Freezes Unexpectedly with Dynamic SVG Components

Lately, I developed a unique SVG Icon control for the new html application at my workplace. However, our quality department started noticing that IE 11 would intermittently "crash" while using the application after its implementation. I'm not convinc ...

javascripthtmlsvgknockout.jsinternet-explorer-11

Having trouble locating the nivoslider IE8 jQuery bug, can't seem to track it

I am encountering an issue with the nivoslider script in IE8 and I am having trouble identifying what is causing it. The nivoslider works perfectly fine in all other browsers except for IE8. Any help or guidance on this matter would be greatly appreciated ...

jqueryhtmlcssinternet-explorer-8nivo-slider

"Email signature design with sleek black borders incorporated for a professional touch in responses

At my workplace, I use an HTML file as my email signature footer with IBM Notes. Everything looks great when I create a new email - the logo is positioned correctly, text is styled how I want it, and the overall layout is fine. However, things start to lo ...

htmlcssemailhtml-email

Height that is determined in real-time

I am attempting to adjust the height of a div based on the size of the screen. Within this div, there is a calendar that contains multiple lines of content, which can be displayed or hidden based on user preference. The height of the calendar is not fixed, ...

css

What is the best way to mandate multiple input fields in AngularJS?

I am currently working on creating a basic web page with a few input fields that must be filled out to proceed. Below is the code I have so far: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/l ...

javascripthtmlangularjs

Using Javascript to dynamically swap images within a div as the user scrolls

Can someone help me achieve a similar image scrolling effect like the one on the left side of this website: I am looking to change the image inside a div as I scroll and ensure that the page doesn't scroll further until all the images have been scrol ...

javascripthtmlcss

Retrieve jQuery CSS styles from a JSON database

I've been attempting to pass CSS attributes into a jQuery method using data stored in a JSON database. However, it doesn't seem to be functioning as expected. I suspect that directly inputting the path to the JSON variable may not be the correct ...

jquerycssjson

Achieving a smooth transition from a blur-out effect to a blur-in effect on a background Div

I created a blur in/out effect for my landing page, but it's not functioning as expected and I'm not sure why. It blurs out correctly, but the issue arises when I want the underlying Div to fade in. Currently, it just appears abruptly after the ...

javascripthtmlcss

Animating the opacity of elements using jQuery and CSS

Trying to put together a fading slideshow with five slides that will loop back to the beginning. My code seems like it should do the trick, but there's something not quite right. <script type="text/javascript"> $(document).ready(function( ...

javascriptjquerycss

Using a for loop, how can the property value be set in another object?

One challenge that I am facing is setting object property values. The object in question looks like this: const newPlan = { name: '', description: '', number: '', monday: { breakfast: '', ...

javascripthtmlobjectfor-loopdom

Issue with Ionic Grid: Row not occupying entire width of the container

Currently, I am working on creating a straightforward grid consisting of one row and seven columns. Each column holds a div with a single letter of text inside. My intention is for these columns to evenly space out across the page by default, but unfortu ...

htmlcssionic-framework