Is there a way to set the height of a column to match its sibling? I need the children of a column to have a specific height that fills up the remaining space, even if their content is too large. Check out this demo for reference: https://stackblitz.com/edit/empty-xgvdqz?file=index.html
If you want to create a scrollable area using flexbox, you can use the d-flex flex-column classes and wrap the content in another div. Then set the inner scrollable div to have an absolute position.
.wrapper {
position: relative;
flex: 1 1 auto;
}
.scroll {
position: absolute;
top: 0; bottom: 0;
overflow-y: auto;
width: 100%;
}
<div class="container">
<div class="row py-4 border border-secondary">
<div class="col-5 py-3 border border-primary">
<p>I need my neighboring column's height to match mine, not the other way around</p>
<div class="border border-warning p-1" style="height: 150px;">
filler content (height: 150px;)
</div>
</div>
<div class="offset-1 col-5 py-3 border border-primary d-flex flex-column position-relative">
<p class="flex-shrink-1">I do not want this column to be scrollable</p>
<div class="border border-warning p-1 wrapper">
<div class="scroll">
<p>I want this section to be scrollable</p>
<p>Filler text, filler text, filler text</p>
<p>Filler text, filler text, filler text</p>
<p>Filler text, filler text, filler text</p>
<p>Filler text, filler text, filler text</p>
<p>Filler text, filler text, filler text</p>
<p>Filler text, filler text, filler text</p>
<p>Filler text, filler text, filler text</p>
<p>Filler text, filler text, filler text</p>
<p>Filler text, filler text, filler text</p>
<p>Filler text, filler text, filler text</p>
</div>
</div>
</div>
</div>
</div>
Link to Live Example
Link to StackBlitz Example
I am in the process of creating a basic website using HTML and CSS. My current task involves taking an image and using it as a page border. Unfortunately, I am unable to share my progress at this moment because I am unsure of where to begin. I understand ...
Is there a way to hide the native Select when using the select2 dropdown on my site? ...
In this code snippet, my aim is to display costs based on checkbox selection and generate corresponding totals in the bottom row when the checkboxes are toggled. The goal is to allow users to choose relevant items and have the total cost calculated accordi ...
I am currently developing my senior year portfolio website and I am struggling to center the navbar (Work About Contact) when it is in mobile mode. My goal is for it to be positioned directly below the logo, perfectly centered, but so far nothing I have tr ...
I have a custom header image on my website that displays 6 random images each time the site is visited. I am attempting to change this group of images while the user is browsing my site. Here is the code I am using: function show_banner(){ document.ge ...
Recently, I delved into the world of React.js and came across controlled inputs. Sample Code: Check out my simple implementation: import React, { useState } from 'react'; const MyForm = () => { console.log('rendered'); // Li ...
Currently, I am attempting to determine a way to create an <input type="time"> field that exclusively shows minutes and seconds. Despite my efforts with time pickers, I have been unable to achieve the desired result. Does anyone have any suggestions ...
My website includes a div positioned below the header that contains quick links. I have implemented the solution from http://davidwalsh.name/persistent-header-opacity to ensure this div remains on-screen at all times. However, I would like it to appear a ...
I am attempting to dynamically change a CSS style depending on the viewer's position on the page. Despite researching numerous similar threads online, I have not been able to get this code to work as intended. Any assistance would be greatly appreciat ...
I am currently dealing with an HTML-based date picker and while I can successfully click on it to make the calendar pop up, there doesn't seem to be an option to inspect the calendar. Even when I manually select a date, there is no visible change in ...
Issue: After submitting the JSP form on Page1, it redirects to a server-side JSP page but appears as a blank page in the browser. Instead, I want it to redirect to Page2 which includes a list box that highlights the newly created item. Seeking help with t ...
Seeking guidance on integrating a map into the second column of a responsive website. Acknowledging that my code may not be optimal, as this is my first attempt at such a task. After a day of searching for solutions, I'm feeling quite desperate. HTML ...
The menu needs to be centered on the website and adjust to the browser window resizing. Currently, it's positioned in the center and the animation is working fine. However, when I attempt to make the menu responsive so that it stays centered when resi ...
I've been experimenting with AngularJS to dynamically update an iframe whenever a query is triggered. It works like this: a query is made, the embed link is fetched from the database, and then it's used in the iframe alongside the title and video ...
Is it possible for my website to have an iframe that enables users to browse the web, and when they click on a download button on any external website, the file can be saved directly to a specific folder on my server instead of their own computer? I'm ...
I'm currently working on a basic HTML5 page that includes inline PHP script. I'm looking for advice on how to transform this app so it can be used with Blackberry WebSockets. For example, I want to develop a native app using HTML5. ...
I currently have a wrapper class that contains an expandable side menu and main content section positioned side by side. The side menu acts as a filter for the content displayed in the main area, but I am encountering an issue where the rows separate when ...
https://i.sstatic.net/g1YeJ.png I am working on creating a layout where I want to display certain content differently based on whether the user is viewing it on a mobile or desktop device. The current approach I have taken involves duplicating some divs ...
Trying to experiment with custom cursors, but every attempt ends up pixelated. I created a ring asset to demonstrate the issue. Here is the cursor image file. cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/272259/circle.png), auto; Although it ...
I have been working on developing a popover component using Bootstrap4 in Vue framework: <template> <div> <div :id="uid + '_Content'" class="d-none"> <slot name="content"& ...