Utilizing Bootstrap in Laravel to align the heights of rows in adjacent columns

I am in the process of developing a calendar application that includes a header row and a header column. The layout displays six days in columns with a fixed number of time periods per day.

<div class="row">
    <div class="col-md col-sm-12 mt-3 border border-secondary" style="background-color:lightgray">
        <div class="row text-center"><strong>Period</strong></div>
        @foreach ( config('enums.class_periods') as $key => $class_period)
            <div class="row border-top border-secondary text-center d-flex align-content-stretch flex-wrap"><strong>{{ $class_period }}</strong></div>
        @endforeach
    </div>
    @foreach ($week_array as $weekday)
    <div class="col-md col-sm-12 mt-3 border border-secondary {{$weekday==$today ? "border-primary" : "" }}" style="{{ $loop->even ? "background-color:lightgray":"" }}">
        <div class="row text-center"><strong>{{ $weekday }}</strong></div>
        @foreach ( config('enums.class_periods') as $key => $class_period)
            <div class="row border-top border-secondary text-center"><p>-</p></div>
        @endforeach
    </div>
    @endforeach        
</div>

https://i.sstatic.net/cRodq.png

I am looking for a solution to make the rows in the header column the same height as the rows in the day columns. The content in the day columns' rows will be dynamic and may stretch significantly, so I need the header rows to adjust accordingly. I have tried various suggestions I found online, but none seem to work for my specific case. Any help or guidance on this would be greatly appreciated.

Answer №1

Just wanted to express my gratitude to all those who took the time to check out the question.

After some exploration, I managed to come up with a solution using jQuery by tweaking the suggestions provided in this discussion: Bootstrap equal height rows inside equal height columns Here's how I modified it:

 <div class="row">
    <div class="col-md col-sm-12 mt-3 border border-secondary h-auto" style="background-color:lightgray">
        <div class="row text-center"><strong>Period</strong></div>
        @foreach ( config('enums.class_periods') as $key => $class_period)
            <div class="row border-top border-secondary text-center Row{{$loop -> iteration;}}"><strong>{{ $class_period }}</strong></div>
        @endforeach
    </div>
    @foreach ($week_array as $weekday)
    <div class="col-md col-sm-12 mt-3 border border-start-0 border-secondary" style="{{ $loop->even ? "background-color:lightgray;":"" }} {{$weekday==$today ? "background-color:lightblue" : "" }}">
        <div class="row text-center" style="background-color: lightgray"><strong>{{ $weekday }}</strong></div>
        @foreach ( config('enums.class_periods') as $key => $class_period)
            <div class="row border-top border-secondary text-center Row{{$loop -> iteration;}}"><p>-</p></div>
        @endforeach
    </div>
    @endforeach        
</div>
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="application/javascript">
    $(document).ready(function() {
        var periods = @json(config('enums.class_periods'));
        $.each(periods, function( index, value ) {
            var maxHeightRow = -1;
            $('.Row'+index).each(function() {
                maxHeightRow = maxHeightRow > $(this).height() ? maxHeightRow : $(this).height();
            });
            $('.Row'+index).each(function() {
                $(this).height(maxHeightRow);
            });
        });
    });  
</script>

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

Stop the background from scrolling and prevent auto-jumping to the top on mobile devices

When users click on the hamburger icon in the top right of our mobile site, I want the drop-down menu to appear and be scrollable without the background scrolling. I tried using JavaScript to set the body to fixed when the menu icon is clicked, but this ca ...

Center align the division within the list item

Check out the fiddle provided here: https://jsfiddle.net/5jnnutg8/ I am looking for a way to center align and display inline the "something #" list items. While the title "Hi" can be centered using text-align: center in css, this doesn't seem to wor ...

Does the 'span' element negatively impact the vertical alignment of text?

While working on my code, I noticed an issue with vertical alignment when using span tags to change the background of the text based on its content. The problem occurs specifically when viewing the code in the Android Chrome browser. You can view the initi ...

JavaScript-powered horizontal sliderFeel free to use this unique text

I'm new to JS and trying to create a horizontal slider. Here's the current JS code I have: var slideIndex = 0; slider(); function slider() { var i; var x = document.getElementsByClassName("part"); for (i = 0; i < x.length; i++) { x[i].styl ...

The division element shifts to the left upon invoking the slideUp() function

I am currently working on a page that contains a form with two different sections - one is visible and the other is hidden. When the user clicks a button in the first section, it slides up using slideUp() while the hidden section slides down using slideDow ...

Having trouble getting the height to work properly on your Blogger Blogspot template?

Issue with embed height=100% not working <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> & ...

Make toggleClass show up smoothly without disappearing

I'm currently working with jQuery's toggleClass() method and I want to achieve a fade-in effect without the corresponding fade-out animation. Using the "duration" attribute applies the same duration for both actions, which is not what I want. I w ...

The pseudo-class for invalid input triggers CSS invalidation, even when the input field is left blank

The input property for handling invalid input is currently malfunctioning. It triggers an error even when the input field is left empty. I would like the input border to be goldenrod when it's empty, turn red if the input doesn't match the specif ...

What is the best way to extract an integer value from a JSON object?

Currently, I am working on a project using Laravel 5 and have encountered an issue. After running a database query, I received the following response: [{"id":1}] My goal is to extract the value 1 as an integer or string. Any suggestions on how to achie ...

Chrome is experiencing a delay in closing the Select Option dropdown menu

On my webpage, I have two select option buttons placed on different tabs. Whenever one button is changed, I want to update the value of the other button and assign it to a specific element like a span in the example code provided. While everything works sm ...

Creating a website with a seamless image background that fills the entire page

! Is it possible to achieve the same effect using AngularJS? Below is the CSS code: .bg { background: url(holiday-car-rental.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-s ...

Automatically omitting a selector that mimics a switch

After conducting thorough research, I discovered a variety of solutions using jQuery and Vanilla. While one answer perfectly addressed my issue, it failed to integrate effectively with the rest of my code. So, I decided to modify the code from this Stack O ...

Is there a way to rearrange my divs in the mobile display?

Is there a way to make the image column stack below the text info column in mobile view? I've tried using flexbox without success, so any help would be greatly appreciated. Thank you! <div class="container"> <div class="row"> ...

Ways to set a background image for two separate components in Angular

Trying to figure out how to integrate this design: https://i.sstatic.net/r70a4.png The challenge lies in having a background image that spans across the navbar and the content below it. Currently, the code separates the navbar component from the content ...

When I click on my navbar toggle button, why isn't my text displaying?

I'm experiencing an issue with my navbar toggle. The toggle button works fine, but when I click on it, the text inside the button doesn't show up. I've checked the Bootstrap docs to make sure I didn't miss any steps, but I can't se ...

Styling two divs with borders

Hello everyone, I could really use some assistance with merging the borders of two <div>s. Here's what I'm trying to achieve compared to where I currently stand: view image here and this is my desired outcome view image here Would anyone b ...

Step-by-step guide on creating a sequential glowing effect for list items with CSS and JQuery

I would like to create a glowing effect on each icon individually. The idea is for each icon to glow for a brief moment and then return to its normal state before moving on to the next icon in line. I am considering using text-shadow for the glow effect an ...

Why does my anchor appear with a different style compared to my submit button?

I encountered an issue where I have created a submit button and anchor link with the same class name and style, but they are displaying differently. The anchor link appears to be larger than the submit button. You can see the difference in size here: http ...

What could be causing the paragraph margins to overlap and not display properly?

Two pages with identical layout and CSS stylesheets. One page displays correctly, while the other has overlapping margins for paragraphs. Unable to share entire source code due to length. Seeking insight into potential causes of this issue. https://i.sst ...

Unusual SASS results observed while utilizing extends functionality

Having issues with my SASS files: _android.scss: $width: 111px; @import 'child'; .android .child { @extend %child; } _ios.scss: $width: 999px; @import 'child'; .ios .child { @extend %child; } _child.scss: %child { wi ...