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;
}
Related
How do I hide the horizontal, off-screen overflow of a <div> that has a large width set on it? For example:
HTML:
<div class="example">
</div>
CSS:
.example {
height: 100px;
width: 10000px;
background-color: black;
position: absolute;
overflow: hidden;
}
Here is an example fiddle that shows the scrollbar appearing, I wish for that to not happen if the div is very large like this.
Edit: Adding hidden overflow-x on the parent element does not work on small width iOS devices.
You can set overflow: hidden on the elements container. In this case it's the body.
body {
overflow: hidden;
}
You're nearly there!
Setting the overflow of the .example class is only hiding any overflowing content inside of it, though.
You would need to set the overflow of the parent container of .example, for this to work - i.e. whatever container it is inside of.
As you mentioned in your OP, you want to hide horizontal scrollbars.
For this, you would need to set
overflow-x: hidden
But (as mentioned), be sure this is on the parent container of .example.
This could be the body, or another div etc. HTH.
e.g.:
body, .parent-container {
overflow-x: hidden;
}
You can use overflow-x: hidden in CSS to hidde only horizontal scroll.
Since Bootstrap 4 doesnt Support .affix anymore, i have to find a other solution for a fixed box.
I want a div Container stay fixed when you scroll to it. For now i solved it with
.fixedcard{
position: sticky;
top:75%;
}
Now i got the problem, that the sticky part starts from the top of my div Container. This causes the problem, that the view differentiate on smaller device. I want to fix the div Container 25% from bottom starting by the bottom of the div Container.
I tried to illustrate my problem.
Try using CSS calc() for it to work out 0% + height of element.
.slider {
height : 300px;
position: sticky;
top: calc(0% + 300px); /*Height of element*/
}
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 am looking for a way to create a div with height and width of the current browser window size.
This should work even if the window is re-sized.
The fullscreen div shall be followed by even more content.
I am using Bootstrap3 - But I am not sure if this changes anything.
It is pretty easy to get this working in Firefox/Chrome/IE
.fullscreen {
min-height: 100%;
min-height: 100vh;
height: 100%;
width: 100%;
width: 100vw;
height: 100vh;
}
This does not work on Safari.
So I came up with some js
$('.fullscreen').css({
width: $(window).width(),
height: $(window).height()
});
This works on all Browsers (At least all Browsers I've tested). Resizing the window does not work, as the width and height is fix. I could create a Listener that reacts on Window Size changes (I have not looked it up - but this should work).
I don't like the idea of using js to set css.
Isn't there a best practice? This should be possible using css only, shouldn't it? The solutions I've found on the web, were not satisfying.
Something like this?
You need to set the dimensions of both the viewport (html) and content (body) to 100%, then by giving a div a height and width of 100% it will be calculated relative to the viewport, giving the functionality you require (always filling it even on resize).
Feel free to ignore the huge parrot picture in the example, I added it because often in such layouts the first div includes a responsive image.
HTML
<div></div>
<div>More Content</div>
CSS
html, body {
height:100%;
width:100%;
position:relative;
margin:0;
padding:0;
}
div:first-of-type {
height:100%; /* <-- keep the div 100% of the viewport height */
width:100%; /* <-- keep the div 100% of the viewport width */
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
background-size:cover;
background-position:center center;
}
div:last-of-type {
background:green;
position:relative;
color:white;
height:100%;
}
http://magician.sdf-eu.org/zee/Click%20This%20One%20To%20View%20What%20I%20Have%20So%20Far.html
Thanks a lot for your help, stack overflow.
CSS is here
http://magician.sdf-eu.org/zee/css/showcss.css
jQuery source code is included in the page.
This is because your ".center" class has position of fixed. Try switching it to absolute:
.center{
//other styles
position: absolute;
}
change the position:fixed to position:absolute at your .center class
.center
{
position:absolute;
left:50%;
margin-left:-490px;
}
Note :at fixed position the element is positioned relative to the browser.
or instead you can use this
.center{
width: 980px;
margin: 0px auto;
}
a bit less code :)
badAdviceGuy is right, it's because your position is fixed. This tells the item to stay on this part of this page no matter what the scroll value is.
However, you shouldn't even need to set an absolute or fixed position here.
A nice fix for you would be to remove all of the styles you currently have set on your center tag.
Then style it like this:
.center{
width: 980px;
margin: 0 auto;
}
We use 980px, because this is the width of your images/image container and most likely always will be, at least on this project.
And margin: 0 auto, basically tells your center container to add 0px on the top and bottom margins, but set the left and right margins to the same px amount so that the element is centered within it's container.