Ways to ensure that the height of the second row in the second column matches that of the first column

My current layout design is causing an issue where the lower green box extends beyond the total height of the entire box. I've provided a rough version of my code on codepen. Using the Bulma framework, my goal is to align the height of the left column with that of the right column, ending at the black line and implementing a scroll bar on the right-hand side.

I attempted fixing this by setting a specific view height for the lower box and enabling overflow scrolling, but resizing causes problems. Alternatively, I can use JavaScript to dynamically adjust the lower box's height based on the left column minus the top box height. However, I'm exploring if there is a more efficient CSS solution available.

javascripthtmlcssbulma

Answer №1

Here is my solution: I first set the .column.is-2 to flex with a column direction. Then, I made sure that the #getHeight element has its display property set to block and added scroll functionality to the bottom one using overflow: auto.

You can view the Codepen demo for this solution here.

html {
    overflow:hidden;
}

.fullh:not(:last-child) {
    margin-bottom: 0rem;
}

.fullh:last-child {
    margin-bottom: 0rem;
}

.fullh{
    margin-top: 0rem;
    margin-left: 0rem;
    margin-right: 0rem;
}

.shadow {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

option:hover{
    background-color:#F1F6FE;
}

.is-vertical-center {
  display: flex;
  align-items: center;
}

.component-helper {
    cursor: pointer;
    color: #74A2F8;
}

.component-helper:hover {
    color: #504A77;
}

.column.is-2 {
    display: flex;
    flex-direction: column;
}

#getHeight {
  display: block;
}

.column.is-2 > .scroll {
  overflow: auto
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />

    <link rel="icon" type="image/png" href="" />

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="dashboard_script.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<body>
    <nav class="navbar is-transparent navbar-padding" role="navigation" aria-label="main navigation" style="background-color: #fafafa">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item nav-text" href="#" style="font-weight: 500;font-size: 1.5rem;color: #74A2F8;">
                    Test
                </a>
                <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
...
                                <img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
                                <img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Modal containing all the Elements -->
    <div class="modal">
        <div class="modal-background"></div>
        <div class="modal-content">
            <div class="box" style="width: 100%;">

            </div>
        </div>
        <button class="modal-close is-large" aria-label="close"></button>
    </div>
</body>

I hope you find this solution helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular JS has blocked the cross-origin request from $http

I have been working on implementing search suggestion functionality using a Suggestions API "". The implementation works fine with Ajax GET requests, but when I try to use it with Angular's $http service, I encounter an error in the console: Cross-Or ...

javascriptangularjscors

Tips for utilizing PrependTo dynamically on every element

I am facing a requirement that involves prepending an element with a specific class to its sibling with another class. While I have managed to accomplish this for the first occurrence, it seems to fail for all other elements within the same div. Below is t ...

htmljquery

I keep encountering an error in the where clause when trying to update MySQL. What could be

I encountered an issue stating Unknown column 'CR0001' in 'where clause' while executing my code. Strangely, the error seems to be related to the id_scooter column rather than CR0001. Below is the snippet of my code: var update = "UPDA ...

javascriptmysqlnode.js

The VueJS component from a third-party source is not located in the node_modules directory

Utilizing vue-cli version 3 for a fresh vuejs project (I've been dedicating ample time to learning vuejs, but this marks my initial attempt at integrating a third-party component). I'm aiming to incorporate a visually appealing grid component. Th ...

javascriptnode.jsvue.jsvue-component

Is there a way to view the text as I enter it while drawing text on an image canvas?

I currently have a canvas setup that allows users to upload an image and display it on the canvas. Users can then input text to be drawn on the image by clicking the submit button. However, I would like the entered text to appear on the image as it is bein ...

javascriptjqueryhtmlcanvasdrawtext

The TypeScript Promise error codes TS2304 and TS2529 are causing confusion among

I came across the code below: function asyncTask(): Promise<string> { return new Promise<string>(resolve => resolve); } This code resulted in the following error: TS2304: cannot find name 'Promise' To address this issue, ...

javascripttypescriptpromise

Step-by-step guide to populating a JavaScript array with AJAX requests

Having some trouble with populating a JavaScript array using an Ajax request. Here is the code I'm working with. The Ajax portion seems to be running smoothly. function GetColumns() { var customArray = []; $.ajax({ url: '@Url.Con ...

javascriptjqueryajaxjsonasp.net-mvc-4

Error: req.next is not a recognized function in node.js

I am completely stumped by this sudden issue that just appeared out of nowhere, with no changes in the code! TypeError: req.next is not a function The error is occurring at line 120. Here is the corresponding SQL query and the problematic line 120: // Set ...

javascriptnode.jsnpm

Troubleshooting Problem with Google Maps CSS

I'm in the process of constructing a website utilizing Foundation and have integrated Google Maps to showcase some markers on it. However, I've noticed that the map control elements in the top left corner (zoom in and zoom out) have disappeared, ...

cssgoogle-mapszurb-foundation

enhancing look of external tool

I have a third-party widget with inline CSS that displays a table on my website. Is there a way to strip out the inline CSS from the widget before adding it to my page so that only my custom css file styles are applied? The HTML structure of the widget i ...

javascriptjquery

Styles in print CSS are not effective in an Angular project

Currently, I am working on an Angular project where I need to generate a printable document using CSS. The challenge I am facing is ensuring that the date and title in the header do not print automatically when the document spans multiple pages. Additional ...

cssangularprinting

Angular encountered an issue while attempting to access the property 'results' of an undefined value

I've got the code functioning perfectly, but for some reason I'm not getting any errors in the console log. It seems like I can't access results from an indefinite property. Any ideas on what could be causing this issue? I'm trying to m ...

javascriptangularapi

What is the best way to design a content page with linked boxes to various arrays in PHP?

How can I create a PHP menu template that navigates to different pages? I am new to PHP and still learning. I want to achieve something similar to this image: https://i.stack.imgur.com/ylfe8.jpg I have the code for the navigation bar, but I need help crea ...

phpcsshtmlnav

Using Tailwind CSS to center a NexJS <Image /> component within a modal

In an effort to style my MapBoxGL popup content, I am working on aligning the text above the image to the left and centering the image below within the popup. As shown in the image below, this is currently proving to be a challenge as I transition from usi ...

cssreactjsnext.jstailwind-cssnext-images

Validation for dates in Angular.Js input is important to ensure that only

Take a look at this form: <form name="user_submission" novalidate="novalidate" method="post"> <input type="date" name="date_of_birth" ng-focus="save_data()" ng-model-options="{timezone: 'UTC'}" ng-pattern="/^(19\d{2}|[2-9]& ...

javascriptangularjsangularjs-directiveangularjs-scope

Extracting JSON Value from a Script Tag

Seeking a more efficient method to extract the designated JSON value (highlighted in yellow) that is currently acquired using the code below. Although effective, it lacks efficiency. $("head > script:nth-child(55)").text().trim().replace(" ...

javascriptnode.jsjsonobject

Is there a way to implement the adjacent selector in combination with the :before selector?

Hello there, I am working on a timeline area with a slick effect and have implemented slick.js for that purpose. I am trying to change the color of my spans within the elements. Specifically, I changed the first span in the slick-active class element succe ...

htmlcsscss-selectorspseudo-elementslick.js

Create a Bootstrap jumbotron that is centered and only half of the width

I have a unique password reset method here: Jumbotron-Form-Bootstrap-My-Attempt Displayed below is the code from the image above: <div class="container"> <div class="jumbotron"> <br><br> <h2>Forget Passwo ...

twitter-bootstrapcss

Merge functions that execute identical operations

I find myself in a situation where I have two functions that do very similar tasks, but on different elements. Initially, I only anticipated having these two functions, but now I realize I'll need to add more. This will result in a lot of repetition. ...

javascriptjquery

display the hidden box contents when clicking the button within a PHP loop

I am attempting to create a simple e-commerce site for learning purposes, but I encountered an issue when trying to display information upon clicking a button. The button does not seem to trigger any action as expected. It is meant to reveal text from the ...

javascriptphphtmljquery