Prevent vertical scrolling with a Bootstrap 3 fluid layout featuring a sidebar

I'm currently working on a Bootstrap 3 page layout where the main content is positioned on the left, and a small sidebar on the right will house additional links and graphs related to the main information. For reference, you can view the progress at http://www.bootply.com/ZLB46jDSnU

The issue I'm facing is that when I use container-fluid for the main body (line 55), vertical scrolling disappears even though the sidebar requires it. However, if I switch to using just 'container', everything aligns properly but then the main body overlaps with the sidebar which is not the desired outcome. It seems like the fluid layout is what I need, but there's a problem with scrolling.

Does anyone have insight into why this is affecting scrolling? Am I going about setting up the sidebar and main content divs in the correct manner?

htmlcsstwitter-bootstrap

Answer №1

Managed to get it working thanks to the assistance from Skelly!

<div id="page-content-wrapper">
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4" id="right">
                        <div class="panel panel-default ">
                            <div class="panel-heading">
                                <h3 class="panel-title">Shortcuts</h3>
                            </div>
                            <!--User details -->
                            <div class="panel-body">
                                <li><a href="#/milestones">Milestones --»</a></li>
                                <li><a href="#/appversions">Versions --»</a></li>
                                <li><a href="#/reportcsv">CSV Report --»</a></li>
                            </div>
                        </div>
                </div>
                <div class="col-sm-8" id="left">
                    <!--All apps -->
                    <div class="panel panel-default" ng-init="">
                        <!-- Default panel contents -->
                        <div class="panel-heading clearfix">
                            <b>Your Applications</b>
                         </div>
                        <div class="panel-body">
                            <table-here></table-here>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

What is the method for utilizing data binding to modify a portion of a class name string with an ISO country code of your choice

Is there a way to dynamically change the country flag icon displayed on an element using the flag-icon stylesheet? This CSS provides country flags based on ISO codes, like so: <span class="flag-icon flag-icon-gr"></span> This code would displ ...

cssangulardata-binding

How can I extract the value of a JavaScript variable using jsoup in an HTML document?

<html> <script type="text/javascript"> var map = null; jQuery(function($) { L.marker([50.065407, 19.945104], {title: 'Cat'}) .bindPopup('<h3>Cat</h3> ...

javascripthtmlregexjsoup

The functionality of Bootstrap styles is not compatible with Code Igniter

I tried placing the bootstrap folder in the root folder and loading the styles in the header section of view files like this. Unfortunately, it didn't work as expected. Can someone please assist me in solving this issue? <link href="<?php e ...

phpcsstwitter-bootstrapcodeigniter

Guide on positioning the Bootstrap accordion button ahead of text and modifying its appearance

Check out this link for a bootstrap accordion with plus and minus icons: I'm looking to put buttons similar to the ones shown in this image: https://ibb.co/GJRGKnn Additionally, I would like to change the style of the buttons to match what's di ...

htmlcssbuttonbootstrap-5accordion

parallax scrolling can be a bit bumpy

While working on a website, I've incorporated a slight parallax effect that is functioning almost perfectly. However, I've noticed that the foreground divs tend to jump a little when scrolling down the page. At the top of the page, there is a di ...

javascriptjquerycssparallax

What is the best way to display a list of items with a default limit, and then dynamically load more items as the user scrolls

Here is a list of items that needs to be displayed. Scenario a: If there are less than three items (e.g. one, two, or three items), they should be shown normally without any issues. Scenario b: In case the list contains more than three items (e.g. four, ...

javascripthtmlcssangularangular9

Generating a hyperlink element in a new HTML document

Hey there, I'm struggling with a simple HTML issue and could really use some help. I've searched Google and Stack Overflow, but I can't seem to get this to work. I'm attempting to create a basic link in an index.html page that directs t ...

html

Is there a way to get a div to scroll its content inside another div with a max-height of (px)? I've tried setting the height in percentage but the scroll doesn't seem to work

<div style="max-height:450px; overflow: auto;"> <table id="improvementTbl" class="table table-hover table-bordered table-striped nowrap" cellpadding="0" cellspacing="0"> <tbody class ...

htmlcss

Leverage the power of Ajax in WordPress by utilizing checkboxes to fetch

I need assistance in incorporating AJAX to load a content template based on checkbox selection. I have limited experience with AJAX, so any guidance would be greatly appreciated. HTML <input type="checkbox" class="checkbox" id" ...

phphtmljqueryajax

The database powered by Postgresql performs flawlessly when it comes to updating data with accurate code execution. However, there seems to be an

Imagine a zoo with a postgresql database. To enable web access to this database, I am using php and javascript. Most of the web pages are working fine, but I am currently working on a page where clients can add or remove animals from existing exhibits. T ...

javascriptphphtmlpostgresql

Avoid displaying the identical div through consecutive random fade-ins and fade-outs

I'm trying to make a JavaScript function that selects a random div from a list of divs, displays it for a few seconds, fades it out, and repeats this process in a loop. The issue I'm facing is that sometimes the same div is selected consecutively ...

javascriptjquerycss

What are the best methods for efficiently extracting web page content that is nested within HTML pages under the `<body>` tag?

Is there a way to easily extract embedded content like images, PDFs, videos, and documents from HTML web pages without including CSS, CSS background images, or JavaScript? I am in the process of migrating content from an old site to a new site and need to ...

cssxhtml

Tips for customizing the mx-fluity navbar code to create multi-tiered dropdown menus

I have limited experience in web design and struggle with understanding CSS code. Can anyone provide guidance on how to create a (multi-level) menu in the popular mx-fluity blogger template that will display consistently on both PC and mobile browsers? T ...

htmlcssblogger

Is there a way to trigger validation with a disabled property?

My form element is set up like this: <input type="text" id="country" formControlName="Country" /> The form group looks like this: this.myForm = this.formbuilder.group({ 'Country': [{ value: this.user.Country, disabled: this.SomeProperty= ...

htmlangulartypescript

What could be causing the show button to change its style every time I click it?

I'm a beginner in the world of JavaScript. I have been working on customizing the "show more" button and encountered an issue. I managed to add text and a down arrow below the button, but when I click it, another button labeled "I don't know how ...

javascriptcssbootstrap-5

Sub menu in navigation bar appearing hidden by images

I designed a CSS menu using the following CSS Code: #cssmenu ul { margin: 0; padding: 0; text-align: center; } #cssmenu li { margin: 0; padding: 0;} #cssmenu a { margin: 0; padding: 0;} #cssmenu ul {list-style: none;} #cssmenu a {text-decoration: none;} # ...

htmlcssslider

Make multiple images in one row resize proportionally instead of wrapping them to the next line

My phone's screen is small and I want the three images to remain in the same row. In case they don't fit, they should shrink proportionately to maintain alignment (refer to image at the bottom). Consider the code snippet below: <div id="exam ...

htmlcssimage-resizingautoresizeshrink

Extracting <p> elements from a separate HTML file and cycling through them

I successfully created a website using only HTML, JavaScript, and jQuery without any server-side scripting or language. Within my website, I have a simple stream.html page that remains unstyled with no CSS formatting. <html> <head> </head& ...

javascriptjqueryhtml

Adjusting the size of HighCharts HighMaps with a custom function

Simple query here (I believe) I have a DIV with the class "container" acting as my Map. The Highcharts plugin I'm using is responsive, but it only resizes when the window does. I'm looking to manually trigger a resize without adjusting my windo ...

javascriptjqueryhtmlcsshighcharts

Bootstrap navbar partially collapsed with inner items concealed not at the edges

Many discussions have come up regarding partially collapsing Bootstrap navbars, such as: Item1 Item2 Item3 Item4 Item5 Is it possible to achieve the following collapsed format: Item1 Item2 Item3 =menu= Or: =menu= Item3 Item4 Item5 This method ...

htmlcsstwitter-bootstrapbootstrap-5