Navigational tabs arranged vertically with the ability to scroll

I'm struggling with making the code below (from bootstrap v4) scrollable. I want to treat the v-pills-tab as a child of a container that has a set height and a maximum height of 100%:

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
  <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
  <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
  <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
  <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>

The issue arises when adding more nav-links than the container-div can accommodate, causing these links to exceed the 100% limit.

htmlcssbootstrap-4

Answer №1

nav element within the initial div is styled with display: flex;. Disabling this style will enable vertical scrolling. I have tested it and can confirm that it works.

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

Using relative URLs in HTML to navigate a specific group of requests via nodejs middleware

Alright, so let me dive into the details of my current dilemma. Essentially, I have a project implemented in node that serves a specific purpose. It's a website utilizing express, jade, and stylus. I have configured the routing for static content in ...

htmlnode.jsexpress

What is the best way to selectively add the x-ua meta tag specifically for Internet Explorer versions 10 and earlier?

I am facing a scenario where the x-ua code specified below is included in the header <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" /> It functions correctly on Internet Explorer versions 10 and below. However, it causes certain feat ...

htmlinternet-explorermeta-tagsie8-compatibility-modex-ua-compatible

Displaying Hierarchical Data with AngularJS and ng-repeat

Recently, I've been working on finding an elegant solution to represent hierarchical data in my application. Specifically, I have implemented a slide effect for bootstrap badges that showcase sub-categories using AngularJS. With some guidance from th ...

javascriptcssangularjstwitter-bootstrap

The CSS class is specifically assigned to a single element

After every two seconds, my JavaScript function is triggered and based on certain logic, I aim to add a CSS class with an effect to an HTML element on the page. var counter = 0; $interval(function () { counter++; ...

javascriptjqueryhtmlcssangularjs

Styling CSS for HTML links

I am encountering an issue with a CSS hover effect on an image that is also a hyperlink to another website. The CSS styling for the hover effect seems to be interfering with the functionality of the HTML hyperlink. The image in question is aligned with ot ...

htmlcss

Using Selenium to verify that a textarea is empty when clicked on

I am currently utilizing Selenium with Python to write a functional test. My goal is to verify that when a user clicks on a textarea, its content is cleared. Below is the HTML code for the textarea: <textarea id="id_textarea" cols="50" rows="10" oncli ...

pythonhtmlseleniumtextarea

Tips for incorporating HTML elements into XML emails

I'm facing an issue with my email template where the body of the email is being pulled as a String, resulting in raw html appearing in the email. Does anyone know how to insert an html tag into the body of an XML email using a String? <body> ...

javahtmlxmlemail

Creating dynamic image carousels using the latest versions of Bootstrap and AngularJS

I have created an array that stores various images using angularJS: $scope.docImg = [ '../../Content/Image/BackGrounds/abra.png', '../../Content/Image/BackGrounds/background_black.jpg', '../../Content/I ...

javascripthtmlangularjsloopsbootstrap-modal

Why is it that text doesn't function properly next to certain images?

I have been using the code below to place text next to an image: <div style="display:inline-block;vertical-align:bottom"> <p><img src="CIMA/CimaMetanoia.png" alt="Cool" height="50%" width="50%" /></p> </div> ...

htmlcssimagepositioning

Sequence of HTML elements arranged in a stack

Recently, I came across a useful jQuery tutorial called "jQuery for Absolute Beginners: Day 8". In this tutorial, there is an interesting code snippet that caught my attention: $(function() { $('.wrap').hover(function() { $(this).childre ...

javascriptjqueryhtmlcss

Padding causing links to break exclusively in Firefox

As a seasoned front-end developer, I recently encountered an issue that has stumped me. My main navigation bar has extensive right padding to ensure the hover dropdowns have ample space. The problem seems to be in this piece of code: HTML: <div id="h ...

htmlcssfirefox

How can I eliminate the border from the last child in a row within a responsive framework?

Put simply, I am trying to target not only the last child in a parent div, but also the last item in a row that adjusts based on screen size. I have a row of 4 elements (divs) with borders on all but the last one using :last-child. However, when the screen ...

csstwitter-bootstrap-3

Webpack is failing to recognize certain CSS files

My development stack includes Vue.js 2.5.15, Webpack 4.12.0, css-loader 0.28.11, ASP.Net Core 2.1 in Visual Studio 2017. Starting with the Visual Studio asp.net core template project for Vue and Typescript, I prefer to have individual small CSS files with ...

csstypescriptwebpackvue.jscss-loader

What are some ways to design scrollbars with a Google Wave-like style?

Is there a way to design scrollbars similar to the ones found in Google Wave? They seem to save space and have an appealing look. I am interested in implementing these customized scrollbars on a div element, just like how Google Wave utilizes them. https: ...

javascripthtml

An issue occurred during the building of the module (from ./node_modules/sass-loader/dist/cjs.js) and resulted in

Within the app directory, I've created a new folder called styles > custom > loader.scss. In the styles.scss file, I included the following import: @import "styles/custom/loader.scss"; However, upon doing so, an error message appeared ...

htmlcsssass

Displaying server errors in an Angular componentIn this tutorial, we

As I work on creating a registration page, my focus has been on posting data to the server. I have successfully implemented client-side and server-side validation mechanisms. Managing client-side errors is straightforward using code such as *ngIf="(emailAd ...

javascripthtmlangularforms

What could be causing the DIV elements to not align side by side?

<div id="dvFirst" class="mainSecond" style="background: #6FA5FD;"> <div id="leftdiv3" class="leftdiv">Client: </div> <div id="rightdiv3" class="rightdiv"><asp:DropDownList ID="ddlCliNewMsg" AutoPostBack="t ...

htmlcssasp.net

Guide on integrating jQuery for AJAX responses to gracefully transition into view within an MVC3 View

Is there a way to create a smooth fade in effect for a <p> element on my website? Currently, I am using Ajax to retrieve the server time and display it. However, the elements appear abruptly and I would like to make the transition more gradual by ad ...

jqueryhtmlajaxasp.net-mvc-3fade

Circular graphs displaying percentages at their center, illustrating the distribution of checked checkboxes across various categories

Looking for a JavaScript script that displays results in the form of circles with percentage values at their centers, based on the number of checkboxes checked in different categories. The circle radius should be determined by the percentage values - for e ...

javascriptjquerycss

Creating a CSS style that automatically adjusts the font size within a container that spans the full height of the

Issue: I have a container set to 100vh, but as the screen size changes, I want the font size to adjust accordingly and always stay within the container without overflowing. Thoughts: While I understand this can be achieved easily with @media CSS rules, I& ...

javascripthtmlcss