My goal is to create a layout like this:
https://i.sstatic.net/dqs7R.png
Implementing the scrolling part with nested DIVs is straightforward, and I already have the left 40px area figured out. However, the challenge lies in adding the right 40px area. It's important to note that both additional areas should remain outside of the scrolling space.
Any suggestions?
You have the ability to achieve this using Flexbox:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
.parent {
display: flex; /* allows children to be displayed inline */
}
.parent > .child {
height: 100px;
}
.parent > .child:nth-child(2) {
flex: 1; /* stretches to occupy remaining space */
overflow-x: scroll;
}
.parent > .child:nth-child(2) > div {
width: 2000px;
}
.parent > .child:first-child,
.parent > .child:nth-child(3) {
width: 40px;
background: Lavender;
}<div class="parent">
<div class="child"></div>
<div class="child">
<div>...EXPANSIVE CONTENT INSIDE SECOND CHILD...</div>
</div>
<div class="child"></div>
</div>Check out this demo link where the dropdown icon is currently not vertically centered. It appears to have extra top padding due to the class "tlm-dropdown-icon", causing it to be off-center. I've tried inspecting the element but couldn' ...
I'm in the process of creating a website using Next and Typescript, with some interesting packages incorporated: Framer-motion for smooth page transitions Gsap for easy animations One issue I encountered was when setting images like this: <Link&g ...
Can someone help me with a problem related to the html input tag or primefaces p:input? I am facing an issue where the cursor always automatically jumps into the input field. The height of my page is such that scrolling is required, and the input field i ...
I am currently exploring animate.css at and I am curious if it is feasible to apply CSS animations to multiple elements sequentially upon page load. Below are the three distinct elements I aim to animate: <img src="flowers.png" data-test="bounceInDow ...
Currently, I am attempting to display a .docx file preview using react-file-viewer <FileViewer fileType={'docx'} filePath={this.state.file} //the path of the url data is stored in this.state.file id="output-frame-id" ...
Can someone provide me with the plain vanilla JavaScript code equivalent to the jQuery code below? $(document).on("mousemove touchmove", function(e) { console.log(e.touches[0].pageX); //code }); I understand how to implement this in ...
I received an image of a button that I need to replicate on a website, but unfortunately, only the image was provided without any information about the font-family or size. Despite not being a designer or CSS expert, I attempted to create a CSS style that ...
Hello, I'm struggling with implementing a jQuery accordion for mobile platforms that destroys itself on larger screens. While my code is mostly working, I've encountered two issues: The accordion only gets destroyed when the window is resized ...
Just starting out with html programming here. Looking to add top margin using a span class, any tips on how to tackle this issue? ...
I'm having trouble finalizing my menu and headings. Whenever I resize the browser window, they shift to the right instead of staying centered as I want them to. I would really appreciate any help with this. Below is the HTML and CSS code. var slide ...
I have implemented the basic navbar from the Bootstrap website, along with flex-direction set to "column" to display the image above the menu items. https://getbootstrap.com/docs/5.0/components/navbar/ Currently, I have a logo that I want to place with l ...
Can you show me how to have two inline-blocks with the second one positioned 10 pixels up from the bottom? I'm not sure how to do this. Here is a snippet of my code: .test1{ display:inline-block; border: 1px solid red; min-height: 50px; } .tes ...
Recently, I've been using Selenium to automate some data entry tasks on Salesforce. So far, my script successfully loads the webpage, allows me to log in, and clicks an "edit" button. Now, I'm encountering an issue when trying to input data into ...
When using a Rails layout, you can include HTML tags to render images like this: <%= image_tag("logo.png", :alt => "Sample App", :class => "round") %> This will generate the following HTML code: <img alt="Sample App" class="round" src="/i ...
I have an HTML5 video with a greenscreen effect that I want to display on a plane using a video texture in Three.js. I attempted to use separate video textures for the main video and the alpha channel, but encountered synchronization issues. From what I u ...
I need help figuring out how to make Google search results show a URL containing a query string. Here's an example from the project I am currently working on: Instead of this link, Google search returns: If anyone has any suggestions for fixing this ...
I am having an issue with my navbar alignment. I have set the div as shown, but the navbar is still staying on the left side instead of moving to the right. <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" h ...
I recently created this code snippet: <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle buttonForProfile" type="button" id="dropdownMenuButton" data-bs-toggle='dropdo ...
I stumbled upon a fascinating jsfiddle that can create color gradients on specific lines of text. Each line has a unique two-color gradient applied in a consistent pattern: Black to Red, Red to Black, Black to Blue, and Blue to Black. Despite its intrigui ...
Working on an existing code base, I am attempting to retrieve TextData from the mam-chart.model.ts file to populate a mat-form field in the design component. However, I am encountering an error that says "ERROR TypeError: Cannot read property 'text&ap ...