Is there a way to make the checkbox and corresponding text display on a single line within my code snippet?

Bootstrap text-truncate is causing the checkbox and text to appear on separate lines in the following example. How can I adjust it to have the text right after the checkbox?

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello World</title>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0cad1d5c5d2d9e0938e958e91">[email protected]</a>/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7c71716a6d6a6c7f6e5e2a302b302c">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0929f9f848384829180b0c4dec5dec2">[email protected]</a>/dist/css/bootstrap.min.css"/>

</head>

<body class="body-bg-color">
    <div class="container">
        <div class="card" style="min-height: 10rem; width: 350px">
            <div class="card-header">Hello World</div>
            <ul id="issues" class="list-group list-group-flush list-group-mine">
                <li class="list-group-item">
                    <input type="checkbox" checked></input>
                    <label class="text-truncate" style="max-width: 100%">Praeterea iter est quasdam res quas ex communi. Praeterea iter est quasdam res quas ex communi.</label>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

javascriptbootstrap-4

Answer №1

To make your check-box and label align horizontally, simply include the d-flex class in the parent element

Answer №2

Enhance accessibility with input labels

Boost accessibility for users by wrapping your input with its corresponding label. By making the input a child of the label, you ensure a better experience for screen readers and also meet the common UX expectation of clickable text. This simple tweak can make a big difference in user interaction.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello World</title>

  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />

</head>

<body class="body-bg-color">
  <div class="container">
    <div class="card" style="min-height: 10rem; width: 350px">
      <div class="card-header">Hello World</div>
      <ul id="issues" class="list-group list-group-flush list-group-mine">
        <li class="list-group-item"> <label class="text-truncate" style="max-width: 100%">
                    <input type="checkbox" checked></input>
                   Praeterea iter est quasdam res quas ex communi. Praeterea iter est quasdam res quas ex communi.</label>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

Answer №3

To achieve the desired layout, apply flexbox to the parent div that contains both elements. Additionally, modify the styles of the label by removing the bottom margin and adjusting the left margin to shift it to the right.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello World</title>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ce6fd9cf0e1d0e9d4e4e9e4e1">[email protected]</a>/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad0d4f1edeee3e5f6c7e0dcd4de">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b29242f282724203312278b272f253">[email protected]</a>/dist/css/bootstrap.min.css"/>

</head>

<body class="body-bg-color">
    <div class="container">
        <div class="card" style="min-height: 10rem; width: 350px">
            <div class="card-header">Hello World</div>
            <ul id="issues" class="list-group list-group-flush list-group-mine">
                <li class="list-group-item d-flex justify-content-between align-items-center ">
                    <input type="checkbox" checked></input>
                    <label class="text-truncate ml-2 mb-0" style="max-width: 100%">Praeterea iter est quasdam res quas ex communi. Praeterea iter est quasdam res quas ex communi.</label>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

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

unable to execute PHP code

I am attempting to execute a PHP file that will update a database. On Chrome, I am encountering this error: https://i.sstatic.net/3ruNL.png This is the code I have in my index.html file: <!DOCTYPE html> <html> <body> <input type ...

javascripthtmlajax

The autofocus feature does not function properly in an input tag that is not located within a form element

Is there a way to set the autofocus property in an input element that is not part of a form? I have tried adding the "autofocus" attribute to the input tag but it doesn't seem to be working. <div> //I have added the autofocus property her ...

javascripthtmlcssuser-interfaceautofocus

Having trouble loading a 3D model with ThreeJS in React?

I am currently utilizing React and ThreeJS to incorporate a 3D model into a webpage. However, I am encountering an issue with the function responsible for loading the mesh into my ThreeJS scene. The error message I am receiving is as follows: TypeError: C ...

javascriptreactjsthree.jsblendergltf

The Navbar in my React Material UI app is being covered by the Drawer component. Can someone guide me on how to fix

I am facing an issue where the drawer is overlaying my navbar instead of disappearing behind it when opened. I tried adjusting the z-index in my styles but it doesn't seem to be working as expected (see screenshot). The z-index for the navbar is set h ...

javascriptreactjsmaterial-uinavigation-drawerz-index

Store the image URL in cache during AJAX loading

I have implemented an ajax slider to display images, and it is functioning perfectly. However, I am facing an issue with image caching. Since the images change dynamically using ajax, there is no cache available which causes a delay in displaying the new i ...

javascriptphpjqueryajaxcaching

I'm looking to integrate Jest in my React project with npm. How can I achieve

I've developed my application with create react app and npm. While reviewing the official documentation for jest at https://jestjs.io/docs/tutorial-react, I noticed that they only provide information on testing CRA apps using yarn. Does this suggest t ...

javascriptreactjstestingnpmjestjs

Navigating through the additional plugins in WebDriver

After installing a plugin in Chrome, the next step is to access it through webdriver. Here's how you can do it: File addonpath = new File("path of .crx file"); ChromeOptions chrome = new ChromeOptions(); chrome.addExtensions(addonpath); WebDriver dri ...

javascriptseleniumselenium-webdriverwebdriverselenium-chromedriver

What is the method for initiating a POST request in Java Script without including any data?

Currently, I am utilizing Ajax to send an array to the router, as demonstrated below... var send = function () { var data = search console.log(data) $.ajax({ type: 'post', url: ...

javascriptnode.jsajaxexpressmongoose

How can I make the input box TextField in Material UI with React expand to full width when selected?

I am currently customizing a Material UI form where the input box (Text Field) starts off at a width of 200px. My goal is to have the input box expand to 100% width only when it is selected or clicked on. ... <FormGroup sx={{ maxWidth: "200px" ...

javascriptreactjsformsmaterial-ui

Secure your React TypeScript applications with GraphQL authentication

When users try to log in on my website, I need to verify their authentication using data from a GraphQL API. I referred to this tutorial for guidance: https://www.apollographql.com/docs/react/networking/authentication/ In my GraphQL playground, I execute ...

javascriptreactjstypescriptgraphqlapollo

What is the best way to retrieve all the keys from an array?

I am looking to retrieve the address, latitude, and longitude data dynamically: let Orders= [{ pedido: this.listAddress[0].address, lat: this.listAddress[0].lat, lng: this.listAddress[0].lng }] The above code only fetches the first item from the lis ...

javascriptangularjstypescript

Attempting to alter an image with a click and then revert it back to its original state

I'm currently working on a feature that toggles an image when a specific class is clicked. The code I have so far successfully switches from 'plus.png' to 'minus.png' upon clicking, but I need it to switch back to 'plus.png&ap ...

javascriptjqueryhtmltoggle

What is the best way to ensure that the operations are not completed until they finish their work using RX

Is there a way to make RXJS wait until it finishes its work? Here is the function I am using: getLastOrderBeta() { return this.db.list(`Ring/${localStorage.getItem('localstorage')}`, { query: { equalTo: fa ...

javascripttypescriptionic2angularfire

Use jQuery to apply a class to some input elements when certain events like keyup or

If I type something in the input field, it should add a border to the li tag containing the text. The current script works fine, but is there a way to make this jQuery script shorter? Thank you for your help! .add_border{ border: 2px solid #000 !impor ...

javascriptjquerycss

Can someone share with me the best practices for implementing @HostListener within a method in my Angular 16 project?

Currently, I've been involved in developing a Single Page Application using Angular 16, TypeScript, and The Movie Database (TMDB). My task at hand is to implement the "infinite scroll" functionality on a particular component. To achieve this, I have ...

javascriptangulartypescript

Which element from the context menu has been selected?

We specialize in creating browser extensions for Chrome, Firefox, and Safari. Our latest project involves implementing context menus within the extensions that will appear when users right-click on any editable form element. I attempted to incorporate an e ...

javascriptjquerygoogle-chrome-extension

Enhance your dynamic php page with the use of a light box feature

Hey, I have created a PHP page that dynamically reads images from a folder and displays them on a gallery page. However, I am facing some issues - I am unable to link an external CSS file and I have to include all the CSS within the HTML. Additionally, I c ...

javascriptphpjqueryhtmlcss

Retrieving the ID from the element that was clicked

Here is a code snippet that allows for the changing of color and text when an href link is clicked. /* Function to change the color of the button upon click */ function changeColor(element) { alert(element.target.id); if (element.innerHTML == "Selec ...

javascriptphphtml

Implementing dynamic ID routes in React Router using JSON data

As a beginner in React, I have been working hard to improve my skills every day. However, I am currently facing a challenge with creating dynamic routes using JSON characters (specifically from Dragon Ball Z). Although my routes are set up correctly, I wo ...

javascriptreactjsreact-router

The Magic of jQuery Cross Site Fetch

It seems like this should be simple, but I am having trouble figuring it out... I'm using jQuery to fetch a remote page from a different server, grab the HTML content, and then insert that content into a hidden DIV. However, when I try to do this wit ...

javascriptjqueryajax