I have searched the web and I have failed to find a solution to adding a scroll to a bootbox custom dialog. Is there anyway I could get it to work. I need a vertical scroll.
Is this possible?
Bootbox uses a css class named modal-body for the body of its dialog; so you can override the class to make it scroll-able. For instance:
.modal-body {
height: 100px;
overflow-y: scroll;
}
If you want your dialog to expand and add scrollbars based on the size of your content, use this:
.modal-body {
max-height: 500px;
overflow-y: auto;
}
That sets the maximum height, after which the scrollbar is added. So if you have little content, no bar and height adjusts to fix. If you have lots of content, you get a scrollbar and the height doesn't get too crazy high.
Related
If you go to https://www.biznessapps.com on mobile layout, inspect element in Google Chrome and disable overflow-x: hidden from body and resize again, then you will find the white vertical stripe (padding) in the right side.
I had to add overflow-x:hidden to body to hide this, but not sure what causes this. Is there any other way than using overflow-x:hidden ?
So what you are doing with the overflow-x solution is a viable solution, but if you'd like to learn how to debug ghost elements, read below:
Basically, I debugged your site and saw that some of your sections (mainly ones in columns of 2 or 3, that float) extend past the wrapper's width. You can see this as well by inputting this into your CSS
*{
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
Scroll down and look for sections that extend past the main div, such as this:
Most of these are the results of a little extra margin or padding on the floated section.
Like I said, the width:100%; and overflow-x:hidden; is still a very common solution, this is just how to debug it if you'd like to fix the structure.
Hope this helps!
It's a scroll bar. Since the default behaviour for overflow is to add the scroll bar,
overflow-x: visible;
might be the correct way to go.
Scrollbar some times visible and shows like extra padding or margin in body hiding overflow-x will work.
html, body {
width: 100vw;
overflow-x: hidden;
}
I have a bootstrap accordion that has a list a mile long, and I would like to set the OPENED height to roughly 200px. When I do this in the CSS, the accordion opens, but to full height, THEN sets to the 200px after it has been opened.
I attempted to style not only the collapse class, but the collapsing and collapse in classes, and all that does is have the accordion pop open with no animation.
CSS:
.collapse.in, .collapse{
height: 200px;
overflow-y: scroll;
}
Where do I need to set the height so that the accordion only opens to 200px and stops the animation at 200px?
Example: http://jsfiddle.net/murphy1976/c8nw2jmo/1/
The content height of the to-be-opened page is bigger. Bootstrap accordion is build to display all.
If you make the wrapping html element a fixed height, it works, as demonstrated in the updated fiddle
<form id="max200">
#max200 {
height: 200px;
overflow-y: scroll;
}
Never mind. I was styling the wrong element.
A HEADS UP for anyone who wants to do this. Style the WELL, the accordion will automatically take the height of it's contents. If you set the .well to a specific height, the collapse animation will ease smoothly to the desired height.
see jFiddle example to see where I placed the .well, and then modify your CSS to your taste.
try this and also i have edit your jsfiddle example
check that i am sure it will work fine
.collapse.in, .collapse{
height: 200px;
overflow-y: scroll;
max-height:200px;
}
#instrument.collapsing{
max-height:200px;
}
Bootstrap v. 4.5.0. Please check for the older versions too.
This does the job.
.collapse,
.collapsing {
overflow: auto;
max-height: 50vh;
}
.collapsing is added when the transition of the accordian starts, and removed when it finishes
I have a div called list which is getting its content from database.
I have set the vertical scroller such that whenever its height exceeds 100px,it will use scroll bar.
Now my problem is when the content of the list gets empty or less than 100px,it is setting to same height of 100px .I want the height of div dynamically as per the content of it and at the same time use vertical scroll bar whenever its height crosses 100px.
#list {
height: 100px;
width: 1100px;
overflow-x: hidden;
overflow-y: auto;
}
Any help will be highly apreciated
Use max-height:100px instead of height:100px.
You can see the difference here: jsFiddle example. Chop the text down to see the div shrink.
height:auto;
max-height:100px;
I'm developing a mobile website, and a full-screen image will appear as a floating-layer once the website is loaded.
Please see below........
A: My mobile website contains a lot of content which exceeds the windows height
B: After page loaded, a full-screen image appears as a floating-layer on top of the contents. The image exceeds the windows height
C: When user scroll down, he can see the lower part of the image, but not the website content. The bottom of the image should never detached from the screen bottom no matter how the user tries to scroll down
May I know how can I achieve C ??
Also, in situation B, sometimes the image may not exceed the screen height if the user is using a Smartphone with big screen, in this case, the image should be fixed at the top of the screen and not scrollable.
It would be better if all the above can be achieved by NOT using jquery. However, if it is a must, then it is still ok........
Many thanks.
While the general effect is doable with CSS only, you will probably need javascript to toggle the effect on and off.
The general idea is to use position: fixed and overflow: scroll on a layer containing the image, while the body has overflow: hidden. Under these conditions, you're able to scroll the contents of the overlay but not the body.
While this works on desktop, things are a little bit different on mobile where all of the content will be rendered despite the overflow: hidden on the body. A quick work-around is to apply position: fixed to the body as well. I don't know if this is intended behaviour, but it works fine in both Safari and Chrome on iOS.
Markup outlines:
<body class="no-scroll">
<section class="content">
/* content here */
</section>
<aside class="overlay">
<img src="img.jpg">
</aside>
</body>
CSS:
.no-scroll {
overflow: hidden;
position: fixed;
}
.overlay {
overflow-y: scroll;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: none;
}
.overlay img {
width: 100%;
height: auto;
}
.no-scroll .overlay {
display: block;
}
With this you could use javascript to toggle the class no-scroll on the body. When it's there, the overflowing content is hidden and the overlay is visible. When it's not there, the overlay is hidden.
Here's an example of the effect (without the .no-scroll class and javascript, though, just to show that it works):
Full screen
With markup/CSS visible
Edit:
In the example above, I gave the overlay a semi-transparent background and gave the image inside of it a max-width of 100%. If you want the entire screen to be filled with the image, change the max-width to a regular width.
Edit 2:
As requested, here's a jQuery function to toggle the effect.
$(".close").click(function() {
$("body").toggleClass("no-scroll");
});
Just give a <button> or whatever the class name close and it'll toggle the effect on and off.
A client is opening our website into a popup window using JavaScript with window.open. They are turning off scrollbars and making the window a fixed height, causing the pages to not be scrollable. I control the code of the website being loaded this way, but not the calling JavaScript. Is there any way I can force the display of scrollbars?
body { overflow: auto }
should bring back the scroll bars. If it doesn't, and the scrollbar directive in fact turns off the body's scroll bars (I don't know right now whether that is the case), add a wrapper DIV in the body:
html, body { height: 100% }
.wrapper {
width: 100%;
height: 100%;
overflow: auto
}
<div class="wrapper"> ......