Tips for displaying boostrap content in two columns that adapt to the height of the browser

I'm facing a common issue with a unique twist in my web application development using Bootstrap.

In my layout, I have a top bar for actions and a left-side navigation bar for moving between pages. The content of the page is always positioned in the bottom-right part of the screen, covering about 80% of the area.

For a specific page, I need to create a two-column layout with independent scroll bars. On the left side, I want to show a task list, and on the right side, I want to display boxes (two wide) representing my employees with their assigned tasks. I aim to navigate through the task list separately from the employee list.

Here is a basic mock-up of what I envision: https://drive.google.com/file/d/0BwbWwcCjL9EJT1B5MlFMQVh0UnM/view?usp=sharing

Is it feasible to achieve this layout within the constraints of Bootstrap? Currently, my task and employee lists extend beyond multiple page lengths, making interaction difficult. I hope to confine them within the browser window and provide individual scroll bars for each list to enable tasks to be moved smoothly across various employees.

Thank you.

Answer №1

At last, the solution is in my grasp. I attempted to utilize the "scroll" class previously, but failed to include a "max-height" parameter. Now, I have implemented the following code :

$(document).ready(function() {
    ResizeListsSoTheyFitInScreen();
});
$(window).resize(function () { ResizeListsSoTheyFitInScreen(); });

function ResizeListsSoTheyFitInScreen() {
    var windowHeight = $(window).height();
    var taskListTop = $('#TaskList').offset().top;
    $('#TaskList').css('max-height', (windowHeight - taskListTop) + 'px');
    var employeeListTop = $('#EmployeeList').offset().top;
    $('#EmployeeList').css('max-height', (windowHeight - employeeListTop) + 'px');
}

Although it functions adequately, I am uncertain if this is the optimal solution as I must consider factors like bottom margin on my own. Any suggestions for improvement are most welcome.

Many thanks

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

Change the width of specific <li> elements to create variation

My goal is to configure a ul element with varying widths using flex. Specifically, I want the first two items in the ul to be 60% width while the last two items should be 40%. However, my flex-basis property doesn't seem to be working as expected. ...

What is the best way to implement responsive html within the Avada theme?

Greetings! Is there a way to apply HTML/CSS code in the Avada theme on WordPress while ensuring it is responsive? Kindly refer to this image. https://i.sstatic.net/GMmg7.jpg ...

Having trouble displaying labels alongside inputs in Bootstrap 5.1.3

<form> <div class="row mb-3"> <label for="name" class="col-sm2 col-form-label col-form-label-sm">Name</label> <div class="col-sm-10"> <input type="text" clas ...

How can I easily add both horizontal and vertical arrows to components in React?

Creating a horizontal line is as simple as using the following code: <hr style={{ width: "80%", border: "1px solid black" }} /> You can customize the width, length, and other properties as needed. If you want to display an arrow ...

CSS: Understanding the Height Declaration

After struggling through a lengthy session of trial and error with my CSS stylesheet, followed by an even lengthier web search that yielded no solutions, I have decided to turn to this platform in the hopes that someone can offer guidance. The issue at ha ...

Customizing the CSS shadow for a specific ionic select text color, while ensuring that other ion select instances remain unaffected

I'm encountering an issue while attempting to customize the text color inside an ion select element based on the option selected. Unfortunately, when I make changes to the shadow part in one component, it affects other components as well. I want to ap ...

Hover image displacement

Can anyone help me identify the feature used in this price list where the mouseover changes and a big image appears underneath? I'm trying to achieve something similar but can't figure out how. Any guidance would be appreciated. ...

Is there a way to make my HTML file search beyond its current directory?

My HTML file seems to be having trouble searching in a different folder for the CSS file that I've linked. How can I make it search in the correct folder? I have my HTML file in a directory named INDEX and the CSS file in another directory named STYL ...

Include a label within the Highcharts Gantt chart square

I'm struggling to include a label within each box in the Gantt Diagram Highcharts, and I'm unsure how to proceed. How can I display a value within each frame? The label needs to be positioned at the center of each box, and all the data is genera ...

Adding a box shadow around the entire div in Internet Explorer 11 with CSS

I am having difficulty applying box-shadow to create a shadow around the entire perimeter of a div. While it works in FireFox, it does not work in IE 11. So far, I have attempted solutions from this StackOverflow thread. For reference, here is a JSFiddle ...

I have found that I can load a CSS file using Node Express, however, it seems to be malfunctioning. On the other hand, some

I have added app.use(express.static(path.join(__dirname, 'public'))); to my app.js file. Now I am using bootstrap.css along with my custom CSS file main.css. index.html: ┊ <meta http-equiv="Content-Type" content="text/html; charset=UTF- ...

Choose the selectize item to always move to the front

Hey there, I'm currently using the selectize plugin to incorporate tags into my website. Everything is working well, except for the issue of the drop-down item being obscured by some of my other divs. I'm looking to have them function more like ...

CSS has no effect

While editing the CSS for a module in PrestaShop, I encountered an issue where the changes I made were not reflecting on my website. To troubleshoot, I deleted the CSS stylesheet to confirm that I was working with the correct CSS file. Surprisingly, all th ...

The color of the link refuses to change

The link text is displaying in a persistent purple color, despite my attempts to change it to white. I have experimented with adding nav:link and nav:active, but the text reverts to the default color without any CSS styling applied. I have included the fo ...

Is there a way to modify the color scheme of the hamburger icon

I'm experiencing difficulties changing the color of a hamburger icon. I've searched for the specific code responsible for the color change, but I haven't been able to locate it. Ideally, I want the color to be white, but on small screens, i ...

utilizing a dynamic illustration as the backdrop

Despite my efforts, the canvas on my webpage is taking up the entire screen and preventing me from clicking on the navigation menu. I've tried various solutions like adding div tags and adjusting the z-index without success. Here's a snippet of t ...

What is the best way to display my menu bar when the icon is hovered over?

I want to create a menu bar similar to the one found on . I am unsure of how they achieved this effect, but it seems to involve a scroll-over action. However, when I attempt to replicate it, the words still appear even when the menu bar is collapsed. < ...

Is it possible to apply a negative margin to a background URL image in CSS?

Seeking a solution for seamlessly fitting a background URL into a pattern using CSS/HTML. Experimenting with applying negative margin to make the background image overlap in repetition. Current approach involves using a DIV element, but negative margin o ...

The transparency of my navbar renders it elegant, yet I desire to imbue the toggle background with a vibrant hue

I'm facing an issue with the transparent Navbar I built in Bootstrap 5. On mobile toggle view, the navigation links are getting lost within the text of the hero image. To resolve this, I want to keep the main navigation bar transparent and change the ...

Enhance Your Highcharts Funnel Presentation with Customized Labels

I am working on creating a guest return funnel that will display the number of guests and the percentage of prior visits for three categories of consumers: 1 Visit, 2 Visits, and 3+ Visits. $(function () { var dataEx = [ ['1 Vis ...