Is there a way to have two divs at 50% width, even if the content of the first div has a minimum size?
<div class="col-xs-6">
<div style="min-width:1000px">
<label>The value here...</label>
</div>
</div>
<div class="col-xs-6">
<label>TEST</label>
</div>
In this code snippet, the first div does not appear as 50% due to the minimum width set for its content.
Any suggestions on how to make the first div 50% in size (with a horizontal scrollbar)?
Make sure to add overflow:auto; to the first column in your layout. You can use the selector :first-child, but I recommend creating a separate class like .overflow-auto{ overflow:auto;} as seen in Bootstrap 4.
Check out this demonstration:
.col-xs-6:first-child{
overflow:auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-6">
<div style="min-width:1000px">
<label>Content here will have an overflowing scroll bar.</label>
</div>
</div>
<div class="col-xs-6">
<label>TEST</label>
</div>
</div>Utilizing CSS Grid with a parent container that has two equal columns can help organize your content effectively.
display: grid;
grid-template-columns: repeat(2, 1fr);
To provide the most accurate solution, please share your current code so I can offer tailored advice for improvement.
To achieve this, you can simply apply the CSS property overflow:scroll to add a scroll feature. If you also want to eliminate the padding between columns, just use the row-no-gutters class in the row to maximize the space.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<div class="row row-no-gutters">
<div class="col-xs-6" style="overflow:scroll">
<div style="min-width:1000px">
<label>Enter text here to demonstrate how it will look with the specified styling.</label>
</div>
</div>
<div class="col-xs-6">
<label>TEST</label>
</div>
</div>
Looking to create a panel with images that, when clicked on, display an info window similar to Google Map's pin maker. When you click on an image, a balloon should appear containing additional information. Check out this example <a id="infowindow ...
Here is a snippet of code that I am working with: <html> <head> <style> #visibilitycontent{ visibility:hidden; } </style> </head> <body onload="visibilitychange()"> <div id="header"> This is the h ...
I'm struggling to make a flex box with max and min width properties work properly. When I reduce the page size, it ends up showing blank space instead of resizing. How can I troubleshoot this issue? .parent{ border: 1px solid red; width: 50%; ...
I am attempting to create an HTML file that automatically logs into my bank account. Below is the code I currently have: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> ...
My HTML table structure is quite simple: <style> .demo { width:100%; border:1px solid #C0C0C0; border-collapse:collapse; padding:5px; } .demo th { border:1px sol ...
After a specific panel has finished loading, I need to insert a JavaScript code (using the panel's ID). What is the best way to ensure that the panel has been fully rendered so that I can access its ID using document.getElementById? Thank you. ...
Currently, I am working with an array that contains objects and I want to dynamically change the number of objects in this array based on user input from a number type input box. Whenever the number in the input box is increased, I need to increase the len ...
I have successfully exported my flash file to an HTML page. How can I make the page close automatically once the flash animation is finished? While I can use actionscript to stop the animation, I need the entire page to shut down on its own. I attempted u ...
I need assistance with placing a Google map on a webpage along with textboxes in the div below it: <div id="map_area"> <div id="map_canvas"></div> </div> <div id="date_range"> <input type="text" id= ...
Despite my efforts to center it, I'm struggling to do so. I've experimented with justify-content and align-items for each row and col class, but unfortunately, nothing seems to be effective. In the breakpoints (md, lg), I really need the 4 lorem ...
Having trouble with Owl Carousel loading issue. I've set up my carousel using the Owl Carousel jQuery plugin as guided, but it's showing me an "owl-carousel loading" class added to the DOM (owl-loading). I've tried adding custom styles and J ...
Attempting to animate a matrix3d with both rotation and translation concurrently has yielded unexpected results for me. It seems that changing the order of applying rotation and translation produces vastly different outcomes. http://jsfiddle.net/wetlip/2n ...
Is it possible to align two UL's to a single baseline, with one UL aligned flush left and the other flush right? Currently, the UL's are not aligned and appear like this: How can I make sure the two UL's share the same baseline? CSS #foo ...
Is there a way to dynamically generate 'n' number of XElements within an XDocument using a loop, based on the number of files found in a directory? The code for my work-in-progress project is quite lengthy to include here, so I have uploaded it ...
Here's a dilemma I'm facing - I have some HTML code on my localhost that looks like this: <div> <p>Go to: <a href="www.foobar.com">here</a></p> </div> On localhost, the output is "Go to: here" with 'he ...
I'm having trouble getting my body div to fill the width of the page and align with the right side of my sidebar. Whenever I add padding to the sidebar, it creates blank space on the right that I can't seem to get rid of. Here is the code I am us ...
<input name="name" type="text" ng-model="numbers" mandatory> Is there a way to dynamically remove and add the "mandatory" class in Angular JS? Please note that "mandatory" is a custom class that I have implemented. Thank you. ...
I am attempting to enhance a Bootstrap tooltip by adding body text, as it typically only includes a basic title. After reviewing the Bootstrap 5 documentation, it seems that the simplest approach is to utilize the template option: template Base HTML used ...
My attempt at writing AngularJS JavaScript code seems to be malfunctioning. While the root scope updates properly, the other two scopes FirstCtrl and SecondCtrl do not update as expected when the root scope is updated. I would like all three scopes to upd ...
CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="./test2.php" method="POST"> ...