Bootstrap Accordion - Set to specific height - javascript

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

Related

How to add a scroll to bootbox dialog?

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.

How to set max height for Bootstrap accordion

I used this template to create an accordion in Bootstrap.
I will probably have a lot more elements and can't figure out how to set the max height for the menu before the contents of the sublinks div become scrollable, since I have a limited window.
JSFiddle
I already tried applying max height to both #menu and the .list-group.panel
Here's an example of how to get your scrolling working with the code you've provided.
div.sublinks.collapse {
max-height: 200px;
overflow-y: scroll;
}
http://jsfiddle.net/bjpLL5xn/3/
The issue you'll run into is that when expanded the Javascript is going to make the animation "jump".
One item is 38px so you can set a max-height to the .sublinks div to the amount of divs you want to be shown so if you want two make it 76px or you want 3 make it 114px so on so on. Also i added overflow: overlay; so you won't see the items outside the accordion bit it still adds a scrollbar.
Jsfiddle
.panel-group .panel+.panel {
margin-top: 3px !important;
max-height: 90% !important; //90% height of your parent div and if it crosses y-axis scroller will be shown
overflow-y: auto !important;
}
Always use % and not px... you will have resolution issues later.

Gallery images overflow to left

I am working on a carousel - gallery viewer for my website and I have problems with the elements in it.
The images at the bottom are overflowing but only to the left. I have set the overflow property to hidden but it does not seem to work in this side.
In addition, the images are not affected by the property margin-right for some reason, only by margin left.
Here is a demo of the image viewer: http://codepen.io/anon/pen/XbgdWo
This is the code I am using for the image items. I use margin-right to show it is not working properly.
.slider-item img {
width: 100%;
margin-left: 5px;
margin-right: 5px;
overflow: hidden;
#include transition('all .2s ease-in-out'); }
.slider-item:hover {
img { #include transform(scale(1.1)); } }
I would really appreciate if you could have a look at it. I have no idea what to do to fix it.
Thanks in advance.
You don't need to have the overflow:hidden on the image itself, just the containing element - which you have.
The effect you are after works fine, you just have an issue with margin - you have put it on the img when it should but on the parent (.slick-slide).
I have forked your codepen here and fixed the issue, I added a red background to the img container so you can see the changes, the code is still messy but it gets the job done. I will continue to refine the code in the same pen.
Your body has 80 percent of width.
First of all, add the following CSS to the body to make it appear properly.
body {
width: 80%;
margin: 0 auto;
}

Scroll to bottom not working

Need help, why is my scrolltop not working on this sample
I dont know why..using the code everything works fine. But updating the css the scrolltop is not working.:( what should i do to fixed this? is the problem cause by my css style?
i used this but it won't scroll at the bottom of the div..
$(document).ready(function() {
alert('scroll must happen');
$('#message_container').scrollTop($('#message_container')[0].scrollHeight);
$('.topbox').html('just sample');
});
There is no visible scrolling happening because the element you're trying to scroll isn't overflowing; it's all displayed. The scrollbar is for the <body> element and not the <div> you're trying to scroll.
You can make it work if you give #message_container a height e.g.
#message_container {height:100px;}
Alternatively, use absolute positioning tricks, for example in this demo. (The initial "undoes" CSS, I used it to keep code short. See MDN)
#container, #head, #body, #foot{
position: absolute;
top:0;left:0;right:0;bottom:0;
}
#head {
bottom: initial;
height:50px;
}
/* position so it get's your desired size*/
#body {
top:50px;
bottom:50px;
overflow-y: scroll;
}
#foot {
top: initial;
height:50px;
}
You have to set 2 things:
Overflow for the div,
Some height, even percentage one (to make it more flexible).
If you don't set any height at all the div will expand and then there is nothing to scroll, in this case the only scroll bar you get is of the document itself (body).
I added a height and overflow property to your CSS and now it works as expected.
jsFiddle
CSS added:
#message_container {
overflow-y:auto;
overflow-x:hidden;
height:300px;
}

Limited scrolling for an Image

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.

Categories

Resources