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;
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.
Whenever I append new element the div's width will increase. I want it to act as a static one. Why don't I just put it to static pixel value? Well I need to have it working on all monitors and resolutions. I need the width of 100% so it goes to the right border and after appending it acts as the static one letting me scroll through the div.
In JSFiddle I set the width to 50% so you can see how it acts(In real environment it will be 100%) Try clicking 10 or more times on Add Tab to see what's happening. After that change the width to static one to see how I want it to behave.
fiddle
Change this code:
.l_tabs {
height: 57px;
display: block;
width: 50%;
/*Changing this to px works as i want it to work but then i have screen resolution problems TRY to set the width to 500px to see*/
background: #474544 none repeat scroll 0 0;
overflow: hidden;
}
Dynamically re-sizing the div can be done using display:table in div css properties, but the tricky part is controlling it to certain height as the tables can be large and giving it vertical scroll.
So my question is how to limit the height even after applying display:table.
Have you tried adding a max-height to the div?
div {
max-height: 300px;
overflow: auto;
}
You could then add overflow auto to make the content within the div scrollable.
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;
}
I want to set the height on a div when the div is more than 100px in height.
For example, when the content of the div makes the div's height fill more than 100px, I want it automatically fit to 200 px.
One way you can do this is to make sure there is no "height" attribute in the elements CSS (inline styling is fine). Then, when the content is changed call this function:
if ($('#myDiv').height() > 100) {
// Div is larger than 100px so increase it to 200px
$('#myDiv').css('height', '200px');
}
I think that the min-height CSS property is what you are looking for:
div#myDiv {
min-height: 100px;
height: auto;
display: block; /* float won't work */
}
This should automatically resize your div to wrap its whole content dynamically.
You can just work with min-height and max-height with CSS.
div#myDiv {
min-height: 100px;
height: auto;
max-height: 200px;
}
you could also do something with javascript as said, but with this you can also have the possibility that the height is 150px, or 120px. if you don't want that, You should do it the javascript-way.
You can try
if($("divID").height() > 100){
$("divID").css("height","200px");
}