My current challenge involves achieving the following:
https://i.sstatic.net/M4mba.png
In a scenario where the content within the green box exceeds its width, I need the div to scroll horizontally as necessary.
The red box may or may not be included, containing a variable number of elements. If setting a fixed width is required for this box, I can do so.
However, it is crucial that the total width of the grey box does not exceed 100%.
I prefer using flexbox CSS for layout.
.outer{
width: 90%;
background-color: #C4C4C4;
height: 40px;
border: 10px solid #C4C4C4;
display: flex;
flex-flow: row no-wrap;
}
.left {
flex-grow: 1;
background-color: #9BB18C;
height: 40px;
overflow-x: scroll;
}
.right {
flex-shrink: 1;
background-color: #D6514B;
height: 40px;
margin-left: 10px;
}<div class="outer">
<div class="left">
<div class="content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
</div>
<div class="right">
YYYYYYY</div>
</div>
<br/><br/>
<div class="outer">
<div class="left">
<div class="content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
</div>
<div class="right">YYY</div>
</div>What is the best way to customize the style of npm mydatepicker? Here is the code I have been using: <my-date-picker [options]="myDatePickerOptions" (dateChanged)="onDateChanged($event)"></my-date-picker> Is it possible to modify its backgrou ...
I'm trying to create a hover effect where an image within a parent div transitions into a blurred state. However, I've run into an issue where if the image is set to 100% width/height of the parent div, there is a visible bezel of the parent&apos ...
I am trying to find a way to show the version value from my package.json file in the footer of my app, but I'm not sure how to do it. I've heard that you can access these properties using the process env object. Can someone confirm if this is cor ...
Check out my HSL color picker on JS Bin I have created a simple HSL color picker that dynamically applies a gradient to a range input type upon DOM ready and changes to update the picker. // Code Update Setup $(".cpick-code-hsl").on('change keyup&ap ...
While following a Udemy tutorial, I encountered the following error message associated with Bokeh: Bokeh Error attempted to retrieve property value for property without value specification when running the code provided in the HTML. Can anyone shed some l ...
$_product = $this->getProduct(); $_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes()); ?> <?php if ($_product->isSaleable() && count($_attributes)):?> <dl> <?php foreach($_attrib ...
I am working with an array of data const projectTypeValues = [ { name: 'Hour', value: 'hour'}, { name: 'Day', value: 'day'}, { name: 'Session', value: 'session'}, { name: 'project', valu ...
While working on my React application, I encountered an issue with parsing an XML file. When I hard code the XML data in my file listener, I get the correct answer (2): const raw = `<?xml version="1.0" encoding="ISO-8859-1" ?> <?xml-stylesheet ...
Here is the sample HTML code I have, which prints the data in a proper table format: redshiftClient.query('SELECT top 10 * FROM table') .then(function (data) { console.log(data); var mail = { from: '******@ou ...
Coding Example:- '<td>' + item.Message + ' <input type="button" class="btn btn-info" id="' + item.LogID + '" onclick="Clicked(this);" value="View More" /> <p> ' + item.FormattedMessage + ' </p>& ...
Hello, I am currently facing an issue where I need to reset the content of a div using an AJAX call when a user clicks a button. However, if the user clicks multiple times in quick succession, an error occurs. I would like to find a way to prevent users fr ...
I need to modify the appearance of a tab in my left navigation menu so that it changes color when hovered over and remains that color when selected. I have limited experience with jQuery and CSS, so any guidance would be greatly appreciated! Below is the ...
I'm running into an issue while attempting to build a Stepper component using MUI V5. The problem I am facing is the presence of a gap between the icons and the line connectors. Here's what my current setup looks like: https://i.sstatic.net/UoMs ...
Currently, I am working on implementing hide and show functionality in my project. However, I have come across a bug in my code that I need assistance with. When clicking on the first div element, the content opens from bottom to top instead of the desired ...
After successfully creating a web api in ASP.NET Web API, I encountered an issue when accessing the site hosted on Vercel. While the GET methods worked fine, the POST methods did not. This was due to the backend API being on my local system, causing a conf ...
This feature resembles sorting, where selecting a brand starting with 'A' will display the list starting with 'A', and the same applies for all other letters from A to Z. Additionally, when one brand is selected, all others should be hi ...
When it comes to passing down data in React or Vue apps, I find myself torn between two methods. Method 1: Child components calling functions to make API calls for data retrieval/refresh. Method 2: Lately, I've been leaning towards moving these API ...
Currently developing an app that includes both public and admin routes. In our previous CRA app, we utilized custom route elements, but it seems that Next.js does not have this feature. Our project consists of numerous public pages along with 20 private pa ...
I am facing an issue with two React arrow function components stacked on top of each other using absolute positioning. Both components have onClick attributes, but I want only the one on top to be clickable. Is there a workaround for this? Here is a simpl ...
Currently, I am incorporating HTML5 date and time input fields within an AngularJS-based interface: <input type="datetime-local" ng-model="event.date_time.start" /> <input type="week" ng-model="event.date_time.start" /> However, my goal is to ...