The text inside the DIV is overflowing beyond its boundaries

I've got this code for a row with some text boxes and buttons inside.

However, the text is overflowing from the div. I tried using the overflow attribute but it didn't work.

<div class ="row no-gutter">        
        <div class ="col-sm-12" style="margin:8px 0px 0px 0px;padding-left:8px;padding-right:8px;">                         
                <div class ="row">
                    <div class ="col-sm-6" style="margin:8px 0px 0px 0px;padding-left:30px;padding-right:30px;">
                        <div id="MainContent_UpdatePanelCentrifugeSpinAndStep" >                                   
                                            <div class ="row">                                                                                  
                                                <div class ="col-sm-4 text-center" style="margin:2px 0px 0px 0px;padding-right:0px;">
                                                    <div class="form-control input-md" >
                                                        <input id="MainContent_chkLastCycle"  type="checkbox" name="ctl00$MainContent$chkLastCycle" />
                                                        End Day Production Re-set
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>                            
</div>

Take a look at this fiddle to see the same: https://jsfiddle.net/2zfp3g4g/

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

htmlcssasp.netwebformsbootstrap-4

Answer №1

overflow:hidden successfully implemented in this case. It has been applied to the parent div of the checkbox.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
                   
<div class ="row no-gutter">        
        <div class ="col-sm-12" style="margin:10px 0px 0px 0px;padding-left:10px;padding-right:10px;">                         
                <div class ="row">
                    <div class ="col-sm-6" style="margin:10px 0px 0px 0px;padding-left:20px;padding-right:20px;">
                        <div id="MainContent_UpdatePanelCentrifugeSpinAndStep" >                               
                                            <div class ="row">                                                                                  
                                                <div class ="col-sm-4 text-center" style="margin:5px 0px 0px 0px;padding-right:0px;">
                                                    <div class="form-control input-md" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" >
                                                        <input id="MainContent_chkLastCycle"  type="checkbox" name="ctl00$MainContent$chkLastCycle" />
                                                        End Day Production Re-set
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>                            
</div>

Answer №2

From what I can see, the checkbox appears to be styled with 'display: block'. Changing it to 'display: inline' may resolve the issue.

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

Creating tags in HTML and displaying them on a webpage

I have a code that sends a message from a textarea after completion tags are entered as I wrote. The desired output should be: <h1> Thanks </h1> The expected output is: Transmitter Thanks instead of <h1> Thanks </h1> ...

javascriptjqueryhtmlcss

Asp.Net Number Validation: Only accepting numeric input, no characters allowed

I am looking to implement a validator in my application that is different from the standard ASP validator. The application consists of approximately 70 fields for a costing calculator, and I want these fields to only accept numeric input. This means that a ...

c#.netasp.netvisual-studio

When I toggle the div to close on mobile, I want it to show on desktop

My attempt at creating a toggle button to hide and show content was not successful. I struggle with coding in Javascript/Jquery. In the desktop view, the description displays perfectly (see image here), but in mobile view, there is a button to toggle hidi ...

javascriptjqueryhtmlcss

Adding and deleting div elements in real-time using JavaScript

Currently experiencing an issue while trying to create a form that allows dynamic addition and removal of div elements as needed. I have successfully implemented the functionality to DYNAMICALLY ADD new div elements, but encountering problems when attempti ...

javascriptjqueryhtml

Creating unique image control buttons for each image within a div using a combination of CSS and JavaScript

How can I create image control buttons, such as close, resize, and rotate, for each individual image when hovering over it? Each image is contained within a draggable div. I want to display an image control button next to each image. This button should on ...

javascriptjqueryhtmlcss

Enhance the efficiency of prolonged update queries

I have found a method that uses three SQL queries to update a single column in a table with nearly 10,000 records. However, this process is taking more than 20 minutes to complete. Are there any alternative methods, like set-based updates, that could imp ...

asp.netsql-server

Implementing Angular JS to Fill a Drop-down Menu with JSON Data

Here is my HTML code: <body ng-app="mainApp"> <div ng-controller="myController"> <select> <option ng-repeat="person in persons">{{ person.data }}</option> </select> </div> </body> This is my JavaScript ...

htmlangularjsjson

How can I incorporate a custom icon into the <i> tag in HTML like Bootstrap does with its icons?

When working with Bootstrap, you can easily add an icon using the following syntax: <i class="bi bi-arrow-right-square-fill fs-1"></i> One great feature is that you can adjust the size of the icon by simply adding the fs-1 class. If ...

htmltwitter-bootstrapbootstrap-5

Lightbox Thumbnail feature in Wordpress theme

Looking for some help with customizing code in my WordPress theme. The current setup includes a thumbnail image with two icons on top - one is a lightbox gallery icon that I want to focus on, and the other is a like button. My goal is to remove the lightb ...

phphtmlcsswordpresslightbox

Transform a Javascript object into a string format and then reconstruct it back

I am utilizing a JavaScript getter setter class function UserContext() { var category_id; var biller_id; this.get_category_id = function () { return category_id; } this.set_category_id = function (value) { category_id ...

javascriptc#jqueryasp.net

Having trouble getting the toggle menu to work using Jquery?

I am trying to create a toggle menu using jQuery on this particular page: . The menu is located in the top right corner and I want it to appear when someone clicks on the "Menu ☰" button, and then disappear when clicked again (similar to this website: ). ...

javascriptjquerycss

Make sure to always retrieve the previous state in your React application

After researching and experimenting based on my previous inquiry, I have devised a solution to properly store the state: if (value === 'checkpoint') { if (checked1) { this.setState({checked1 : false}) localStorage.setObject('che ...

javascripthtmlreactjscheckbox

Is it feasible to use SignalR to send messages to either an individual or a specific group?

There are numerous websites, such as MSDN, that demonstrate the process of sending messages to all clients. For instance, by using Clients.All.addNewMessageToPage(), the message is broadcasted to all users. But what if I only want to send a message to a ...

asp.netmodel-view-controllersignalrchatmessage

utilizing the scss random feature to assign a randomly generated background hue

Despite reading numerous articles on this topic, I am struggling to implement a feature where a random color from a list is applied as the background image every time the page is refreshed. $red: #fc5545; $pink: #FCCCD1; $green: #005E61; $greenLight: #42B ...

csssass

Tapping on the emphasized hyperlink within an unorganized roster

I am currently working on a page and have encountered an issue. The problem lies in the fact that users must click on a link before they are redirected to the target page. Is there a way to make the highlighted box for each of those links active so it resp ...

htmlcss

Combine the elements within the HEAD tag into a group

I am currently developing a dynamic page system using AJAX. Whenever a link is clicked, an AJAX call is made to retrieve data from the requested page. However, I have encountered an issue where certain data in the page file needs to be placed within the h ...

javascriptphpjqueryhtmlajax

The onSelectIndexChange event seems to be failing to trigger

Having some trouble with the dropdown in the code below. When I select a value, the onselectedindexchanged event is not getting fired as expected. I have tried to fix it but haven't had any luck. Can someone lend a hand? code: <asp:DropDownList I ...

c#asp.net

Display or conceal script for individual elements, not universally

I am working on a news page that has a Show/Hide script implemented to handle long content. However, the current script is applied globally to all content and I would like it to only apply to one specific element or the nearest element. Here is the curren ...

javascriptjqueryhtmlcss

Flask URL Error - Failed to construct URL for endpoint

Having trouble with a Python code that is supposed to retrieve data from a database. @app.route('/studentsearch', methods = ['POST', 'GET']) def searchstudent(): """ Shows the student search page on the site """ curso ...

pythonhtmlflask

What are some creative ways to implement the useState function as a toggle switch in React?

import React, { useEffect, useState } from "react"; import './Menu.css' export default function Menu() { const [classes, setClasses] = useState('container') return ( <div> <p>Click the Me ...

htmlreactjsonclick