Remove vertical scrollbar in bootstrap modal popup - html

I have a bootstrap modal popup on my page. The popup is a bit long so html adds the vertical scroll bar which doesn't look so good with the animation effect.
So, I want to remove this scroll bar but still be able to scroll.
Any help?

It may help you. Fixing the overflow hidden will remove the scrollbar, To get full content within the page use overflow auto to modal body
CSS:
.modal{
overflow:hidden;
}
.modal-body{
overflow:auto;
}

If you are using bootstrap version 4. You can use this css code.
.modal-scrollbar-measure {
overflow: hidden !Important; }

.modal class has overflow-y: scroll rule which results in scrollbar always visible.
https://stackoverflow.com/a/18715220/9143855

that because you use overflow : scroll ;
the scroll value of overflow property add scroll ball line to both sides vertically and horizontally you should use instead overflow auto which will just add one side scroll for which it needed the most

You can also use the modal events for this:
$("#modalID").on('shown.bs.modal', function(){
/* Hide the body scrollbar. */
document.body.style.overflow = "hidden";
});
$("#modalID").on('hidden.bs.modal', function(){
/* Show the body scrollbar. */
document.body.style.overflow = "auto";
});
the events can be seen here: https://mdbootstrap.com/docs/jquery/modals/events/

Related

Hiding horizontal scrolling bar doesn´t work using simplebar library

I'm using simplebar library (https://github.com/Grsmto/simplebar) inside of an angular 6 project, when I added the simple bar in my html tag, it showed up an horizontal and a vertical scroll bar, so I want to show the vertical scroll bar only.
I've tried to hide the horizontal scroll bar with this CSS property:
overflow-x: hidden
and with this properties too:
width:100%" and "position:abolute" or "position:relative"
<div data-simplebar style="overflow-x: hidden">
<div *ngFor="let example of examples;">
<div>{{example.title}}</div>
<p>{{example.text}}</p>
</div>
</div>
I expect only to show the horizontal scroll bar, but it doesn't seem to work, I don't know if I'm missing something or some CSS property, or if Angular is causing this problem.
The SimpleBar library creates wrapper around your contents, hence the CSS overflow applied on your div will not hide the scrollbars.
Hide the horizontal scroll bar created by the plugin
.simplebar-track.simplebar-horizontal {
display: none;
}
and disable the scroll on scrollable div created by the library.
.simplebar-content {
overflow-x: hidden;
}
If you are using SimpleBar from simplebar-react, you can set the overflow in the style, as in the example below.
<SimpleBar style={{overflowX: 'hidden' }} autoHide={true}>
...
</SimpleBar>
try using both of these commands at once.
overflow-y: scroll;
overflow-x: hidden;
Old question, but I think there are still no good answer to it.
When I am in need of hiding the horizontal scrollbar that's what I do:
.simplebar-scrollbar::before {
background-color: transparent;
}

Increase scrollbar height automatically

I make the scrollbar on a page always visible with:
html {
overflow-y: scroll;
}
On the other hand, I also want the scrollbar height increase automatically when opening a modal dialog that is longer than the page. However, the scrollbar height does not increase automatically. If I set overflow-y: auto; this makes the scrollbar hidden for the initial state that I do not like. Any idea to fix it?
Bootstrap's modal does an excellent job of this by hiding body overflow and using a fixed overlay.
body.modal-open{overflow:hidden}
/* this is the overlay */
.modal{position:fixed;top:0;bottom:0;left:0;right:0;}
.modal .modal-dialog{/* taller than window */}

Making fixed div's able to horizontally scroll

My website has a fixed width of 1024px to easier implement for smaller screens, the header and the footer that are displayed are in a fixed position.
However when the users has a smaller width than 1024px the header and footer are cut off, which is fine. However you cannot horizontally scroll to see the rest of them.
I imagine to fix this it'd be something to do with the CSS, however I'm unsure on what properties to change / use.
The pages are constructed like so:
<body>
<div class='header'>
<div class='headerbar'>
<div class='headerleft'><h1>BMRA Web Client</h1></div>
<div class='headerright'><!--image here--></div>
</div>
</div>
<div class='footer'>
<div class='headerbar'>
<div class='footerleft'></div><div class='footermiddle'></div><div class='footerright'></div>
</div>
</div>
</body>
That's as simple as put overflow-x: auto in your header with 100% width.
.header {
overflow: auto;
}
By this mode, you'll have a header with 100% of width, in small screens you'll see how it shrinks. With the hard pixel definition of the elements inside the header (as 1024px), your content will have this width and the overflow in the parent allows you to scroll it horizontally.
If this doesn't fits with your requirements, maybe you need a global scroll solution, that can be made with simply javascript.
EDIT
As we talk in comments, your solution will be to handle global horizontal scroll and move the fixed header with the content, like a relative or absolute header. To make this you need javascript to read how many pixels you need to move the fixed header. Here you are the complete code:
// when scroll
$(window).on('scroll', function(e) {
//calculate left position
var left = $(this).scrollLeft();
//apply to header in negative
$('.header').css('left', -left);
});
Do you like to see it working? Try this fiddle:
http://jsfiddle.net/fbvat00q/
EDIT 2
As far as you need to have the background fixed, you must to relativize the children and target it in the javascript. So your final code will be:
CSS:
.headerbar {
position: relative;
}
Javascript:
$(window).on('scroll', function(e) {
var left = $(this).scrollLeft();
$('.headerbar').css('left', -left);
});
See it working:
http://jsfiddle.net/fbvat00q/1/
If the main wrapper (that one which is set to width: 1024px) doesnt have overflow: hidden as a property, you should be able to scroll horizontally. Try to set it manually to overflow: auto
Loot At This Real Example
You can set wrapper with overflow: scroll, and fixed position, and set for inner value, or spesfic style you want
To manage abehaviour when content overflow a container(both vertical and horizontal), with fixed dimension, you can use the CSS overflow property (see this link for more details):
scoll : to scroll when content overflow
hidden : to hide the overflowed content
visble : to see the overflowed content even if it does not fit the container
In your case you have to set the property to scroll
.selector{overflow: scroll}
If you want to only manage horizontal overflow, you can set overflow-x CSS property .selector{overflow-x: scroll}
For the vertical overflow you can set overflow-y, .selector{overflow-y: scroll}
Try setting overflow to scroll horizontally. e.g:
.header {
overflow-x: scroll;
}
As here: W3C Link

hide scrollbar if not scrolling

I would like to hide the scrollbar if the the user is not scrolling, meaning if the user scrolls, the scrollbar should appear (only the scrollbar not the scroll track), while if the user does not scroll it should disappear. I sort of had that setup for a long time, but than I made some changes to my page and now the page always shows the scrollbar (if there is more content than one page can cover). Unfortunately I don't know what I did to make this feature go away? I played around with overflow in the css, but overflow: hidden just removes all scrolling possibilities. Here is a fiddle which shows my current setup
https://jsfiddle.net/jsmnsLm7/ (please make the window big, so that you can see all of the features of my navbar setup)
as you can see I use
overflow: hidden
in the body and
overflow: scroll
in the main.
thanks for your help
carl
try following css:
overflow:auto;
It worked for me :)
This will do what you're looking for
http://rocha.la/jQuery-slimScroll
Or you could just show the scrollbar when you hover over the area using CSS only;
This worked for me;
<style>
#ID {
overflow-y: hidden;
}
</style>
#ID:hover, #ID:active, #ID:focus {
overflow-y: auto;
}
</style>
<div class="ID"></div>
There isn't a way to do this outside of a scripting languege as far as I know, but the JavaScript you use for this is super simple.
Start off with a CSS style of:
#ID {
overflow: hidden
}
Then in your div in the HTML use this command
<div id="ID" onmouseover="this.style.overflow='scroll'"
onmouseout="this.style.overflow='hidden'"
this will cause your scroll button to appear when the user hovers over the div, but then disappear again when the user hovers away from the div.
If you are using bootstrap, it is pretty simple - There is a default Scroll class to which you can apply the style overflow: auto.
<div class="Scroll" style="overflow: auto" >
.......
</div>
Based on this https://stackoverflow.com/a/40857678/15992537 answer I made this:
.categorias::-webkit-scrollbar-thumb {
height: 6px;
background: #ff3d1d;
border-radius: 10px;
visibility: hidden;
}
.categorias:active::-webkit-scrollbar-thumb {
visibility: visible;
}
this worked in my case because my div is draggable, so the thumb shows when i drag and move it, but with JS you probably can make it apear based on events like page scroll for example.
use overflow: auto
The overflow property has the following values:
visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary

display parent horizontal scroll bar and child vertical scroll bar

I have a custom timeline view like this: http://jsfiddle.net/B4xRb/1/
The inner vertical scroll affects the rows beneath the header only.
The parent horizontal scroll affects the entire timeline.
<div class="parentDiv">
<div class="monthHeader"></div>
<div class="lanes"></div>
</div>
However, how could I structure this so that the vertical scroll bar can be seen WITHOUT
adjusting the row data as it can be really wide.
initially scrolling to the right, I want it so as you load the page, both scroll bars are visible
Here's the solution I came up with, using jQuery: http://jsfiddle.net/eB8WQ/6/
First off, to hide the second outside vertical scroll bar, add this code
html, body {
overflow-y: hidden;
}
for .lanes, you want to hide the horizontal scroll bar and set the initial width to 100%.
width: 100%;
overflow-x: hidden;
Next, the javascript you want to use sets the width of .lanes to 100% while scrolling (to avoid the messy flickering problem), and when you're done scrolling, it calculates the position of the horizontal scrollbar and adds that value to the width of your body element. Use the $.data function to store the value.
More information on $.data: http://api.jquery.com/jQuery.data/
$('.parentDiv').scroll(function() {
$('.lanes').css("width", $('.monthHeader').width());
});
$('.parentDiv').scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
$('.lanes').css("width", $('.parentDiv').scrollLeft() + $('body').width() + "px");
}, 100));
});
Some code taken from this previous answer.