I am seeking a solution to make the ".on-the-left" container have the same size as the ".on-the-right" container, but without relying on relative or absolute positioning.
Here is the visual outcome I am aiming for: https://jsfiddle.net/NicoZZZ/osbL16z9/28/
This is what I strive to avoid by finding an alternative method:
.on-the-left {
position: relative;
}
.container-child {
position: absolute;
}
It's uncertain if this fulfills all the requirements, but the following code can achieve the same outcome without utilizing relative or absolute positioning.
.container-parent {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: fit-content(1em);
background: pink;
}
.on-the-left {
background: lightblue;
overflow-y: scroll;
}
.on-the-right {
background: lightgreen;
}<div class='container-parent'>
<div class='side-container on-the-left'>
<div class='container-child'>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<!-- After this point you should scroll to see "more text -->
<p>More text</p>
<p>More text</p>
<p>More text</p>
</div>
</div>
<div class='side-container on-the-right'>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
</div>Is there a more efficient way to convert the following CSS code into SASS? div#block-views-news-block, div#block-views-news-block-1, div#block-views-news-block-3, div#block-views-news-block-4 { margin: 0; padding: 0; } I attempted the following: div ...
In a div, there is a ul. Inside a li, there is another ul. The task is to select only the first ul inside the div using jQuery. The HTML markup: <div class="parent"> <div class="clearfix"> <div class="another-div"> <ul cl ...
For my project, I have implemented a font picker component in the following manner: <FontPicker apiKey={process.env.REACT_APP_GOOGLE_API_KEY} activeFontFamily={activeFontFamilyMobile} ...
Can someone help me figure out how to center a resized image within its container, which should also be centered? I've been struggling with this for 7 hours and can't seem to get it right. Any assistance would be greatly appreciated :-) Here is ...
Having trouble generating PDF from HTML using DinkToPdf due to div elements splitting across pages? Is there a way to ensure the entire div stays on one page, perhaps through html/css? Ideally, if there is sufficient space, the div should remain on the c ...
Please review the code below: $(".nwe-cl-icontext").click(function () { $(this).parent().toggleClass("nwe-active"); }) .nwe-cl-c.nwe-active { background: red; } .nwe-cl-c { background: green; } <scrip ...
I have been attempting to insert a complex JSON data record into a JSON variable using the following code: var marks=[]; var studentData="student1":[{ "term1":[ {"LifeSkills":[{"obtained":"17","grade":"A","gp":"5"}]}, {"Work":[{"obtained":"13"," ...
I am facing an issue with using Bootstrap in my ASP.NET project. The page displays correctly on a desktop, but when I resize the page to mobile phone size, the navigation panel does not stay in dropdown position. Here is my code: <%@ Page Language="C ...
I am working on an HTML page that contains 50 A tags. I am trying to figure out how to create an alert based on a specific element inside the A tag. Here is an example of what I am looking for: <a href "something">click to see the alert</a> ...
Can anyone help me figure out how to disable a button when the datepicker value is empty? I've tried using ngIf to check if the datepicker is empty and then disable the button, but it's not working. My goal is to make the button unclickable if th ...
How can I modify my drop down menu so that the first drop box closes when a new link is clicked? Additionally, how do I ensure that the menu closes when clicking on a child item without refreshing the page (since the content is dynamically pulled from a ...
Currently, I am in the process of developing an ecommerce platform using angularjs. In my controller, I have a list of various products structured like this: $scope.products = [ {imgLink: 'product1.jpg', name: 'Wingtip Cognac Oxford&apo ...
As I develop my web application, I have incorporated react-bootstrap for its React components based on Bootstrap. However, wanting to give my project a customized look inspired by Material design, I came across bootstrap-material-design. I am curious if I ...
After searching for answers to my question, I have found some general solutions but none that fit my specific problem. I created a backend system for users to manage the availability of hotel rooms throughout the selected year. Using HTML/PHP/MySQL, I dis ...
I have designed a simple angular-material form with various inputs that are organized using angular flex-layout. The form displays correctly in all browsers except for Safari on iOS devices. The problem in Safari arises when loading a form that contains d ...
Currently, I am utilizing the following script to display NBA standings: <script type="text/javascript" src="https://widgets.sports-reference.com/wg.fcgi?script=bbr_standings&params=bbr_standings_conf:E,bbr_standings_css:1&"></sc ...
One common thing I come across on websites is this snippet of code: body:before { content: ""; width: 0; height: 100%; float: left; margin-top: -31700px; } What happens when this CSS is implemented? ...
Looking to design an image with an overlay gradient and text, similar to this: <div> <img src="url"/> <div background-image="other url" background-repeat:repeat-x;> <h2>some text</h2> </div> </div> Some impor ...
Looking for some guidance on how html text and margins work? If there's a good online reference you can point me to, I'd greatly appreciate it! I'm currently struggling with setting precise margins for text. In the example below, there&apos ...
I am new to JavaScript and was attempting to determine if an element is centered aligned by accessing its CSS properties/values. Can someone help me retrieve the CSS property to verify text alignment using JavaScript? ...