Chrome browser experiencing a disappearing vertical scroll bar issue on a Bootstrap Tab

<div class="tabs-wrap left relative nomargin" id="tabs">                  
                        <ul class="nav ultab" id="fram">
                 <li class="active"><a href="#history" data-toggle="tab" id="history1"  >History</a></li>
                             <li ><a href="#exam" data-toggle="tab" id="exam1" >Examination</a></li>
                             <li ><a href="#mdm" data-toggle="tab" id="mdm1" >MDM</a></li>
                        </ul>
                        <div class="tab-content" id="" >                 
                 <div class="tab-pane active scrolly" id="history">
                  <iframe name="iframe1" id="Frame1" class="frame" frameborder="0" marginwidth="0" width="100%" src="1s.jsp"></iframe>
                  </div>                              
                  <div class="tab-pane scrolly" id="exam" >
                  <iframe name="iframe2"  id="Frame2" class="frame" frameborder="0" marginwidth="0"  width="100%" src="2s.jsp"></iframe>
                  </div>                  
                  <div class="tab-pane scrolly" id="mdm" >
                  <iframe name="iframe3"  id="Frame3"  class="frame" frameborder="0" marginwidth="0" width="100%"  src="3s.jsp"></iframe>
                  </div>  
                  </div> 
               </div>

the disappearance of the vertical scroll bar when switching from one tab to the next is causing an issue. How can this be resolved?

javascripthtmlcsstwitter-bootstrapscrollbar

Answer №1

To ensure the vertical scrollbar remains visible in your browser at all times, you can include the following CSS:

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

If you prefer to apply this styling to a specific class, simply add the code within that class:

.your-custom-class {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

If you are working with tabs, you can define a class such as .scrolly, apply it to your tab elements, and include the same CSS properties in your stylesheet:

.scrolly {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

These examples illustrate how you can achieve this effect.

I hope this information proves 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

When attempting to integrate Angular 1.4's new router with components, an issue arises where a warning is triggered stating, "Failed to instantiate controller HeadlinesController

Attempting to work with Angular for the first time and struggling to load a component using data from an http request. Currently encountering a warning when attempting to execute the code with the HTTP request. Receiving a "Could not instantiate control ...

javascriptangularjshttpcomponentsangular-routing

Events trigger React to render multiple times

I have implemented socket functionality on my website where users can send a word to the server, triggering an event (art-addpic) that broadcasts an image URL corresponding to that word to all users. However, only users with isArtist=true are allowed to re ...

javascriptreactjssocketssocket.ioreact-hooks

Traversing through JSON main sections, checking for operation and subsequently retrieving data

I have a json structure below: { users: [ { action: 'add', payload: [Array] } ], categories: [ { action: 'add', payload: [Array] } ], products: [ { action: 'add', payload: [Array] } ] } Can you suggest a method using .m ...

javascriptnode.jsecmascript-6

Having trouble getting the Vue checkbox change event to work?

I am currently utilizing Vue to handle a function that is not triggering on the change event when a checkbox is checked. I am uncertain if the issue lies in the fact that I have placed it within the mounted lifecycle hook or if there is another underlying ...

htmlvue.js

AngularJS Multiple Select fails to display preselected options

This morning, I dedicated a significant amount of time to finding a solution for assigning multiple values to an entity on my form. The scenario is as follows: I have an Entity named QualityData that can have various MechanismIdentifiers. After brainstor ...

angularjshtml

Setting a JavaScript variable to null

Using Jquery, I have a variable that is assigned a value on button click. After the code executes successfully, I need to reset the variable to null. $("#btnAdd").click(function () { var myDataVariable= {}; myDataVariable.dataOne="SomeDa ...

javascriptjqueryajax

Creating a Full Page Background Image That Fits Perfectly Without Resizing or Cropping

Can someone help me achieve the same effect as the website linked below, where the background image fades instead of being a slideshow? The image should be 100% in width and height without any cropping. I have managed to set this up with the codes provided ...

javascripthtmlcss

What is the best way to keep the textfield value at 0? If you clear the textfield, it will result in another value being

If I don't input anything in this field, the total will show as isNaN, and I want to prevent form submission if it is isNaN. How can I stop the form from being submitted when the total value is isNaN? export default function BasicTextFields() { cons ...

javascriptreactjsmaterial-ui

Having trouble bringing in icons from the @mui/icons-material library

An error occurs when attempting to run the code. wait - compiling... error - ../../../../../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js:1:0 Module not found: Can't resolve '@mui/material/utils' null Note: @mui/material pack ...

javascriptcssreactjsmaterial-uinext.js

What is the best method to shift an element to the top by a fraction of its height, namely -100%?

I am facing an issue with an element where I set top: -100%. My requirement is to translate top: -100% to top: -{height-of-the-element}. Unfortunately, instead of getting top: -{height-of-the-element}, I am getting top: -{height-of-another-element-wrapping ...

htmlcsscss-positionabsolute

Automatically add shimmer with CSS styling

Is it possible to make the shine effect work automatically (without needing hover) every 5 seconds? http://jsfiddle.net/AntonTrollback/nqQc7/ .icon:after { content: ""; position: absolute; top: -110%; left: -210%; width: 200%; height: 200%; ...

jqueryhtmlcssanimationeffects

Identify objects obstructed from camera view (hidden behind other objects) - Three.js version 71

I am working on triggering intersectObjects when a mesh is behind another mesh (to determine if the mesh is visible to the camera). Currently, I have found that intersectObjects is triggered when a mesh is both behind and in front of another mesh. Here i ...

htmlthree.js

Exploring the concept of Promises through the lens of recursion

I am dealing with a MongoDB collection that looks like this [ { "classId": "1", "name": "Input", "definition": [ { "property": [ { "classId": "12", "name": "One" }, { ...

javascriptnode.jspromise

Tips on duplicating an object within a React state without using references

In my React application, I have a state that contains several objects. I need to make a copy of the c: "value" field from the initial state before it gets replaced by the input value from e.target.value. The purpose behind this is to ensure that ...

javascriptreactjs

A variety of personalized Vimeo play buttons

Recently, I stumbled upon a genius solution by Chris Coyier for creating custom Vimeo play buttons. It worked perfectly for my needs, but now I'm facing a challenge - how to make it function with multiple videos on the same page. I tried swapping out ...

javascriptjqueryhtmlvimeo

Jest may come across test suites, but it discreetly disregards the individual tests

Having encountered an issue with Jest testing in a Nuxt/Vue v2 project, I found that after making some changes, the tests were no longer running. The unit tests were either passing or failing initially, but suddenly stopped running altogether. ----------|- ...

javascripttypescriptvuejs2jestjsnuxt.js

Vibrant Reverberation of Color

When creating a table connected to a MySQL database, I encountered an issue with changing the text color inside the rows. How can I display the text in white within the table? I attempted to use <style = color #34242, but it didn't produce the des ...

phpcss

What is the best way to add HTML formatted text into Outlook?

In my Emacs, I've generated this syntax-highlighted code snippet and now want to paste it into an Outlook email with rendered HTML (without the actual HTML code). <pre> <span style="color: #a020f0; background-color: gtk_selection_bg_color;"& ...

htmlwindowsemailoutlook

What methods can be used to test included content in Angular?

When testing an Angular component that includes transclusion slots utilizing <ng-content>, it becomes challenging to verify if the transcluded content is correctly placed within the component. For instance: // base-button.component.ts @Component({ ...

javascriptangularunit-testingtesting

Using both withNextIntl and withPlaiceholder simultaneously in a NextJS project causes compatibility issues

I recently upgraded to NextJS 14 and encountered an issue when deploying my project on Vercel. The next.config.mjs file in which I wrapped my nextConfig in two plugins seemed to prevent the build from completing successfully. As a workaround, I decided t ...

javascriptnode.jstypescriptnext.jsnext-intl