I'm working on a music streaming app for that I want to make the sidebar sticky (not fixed) but after lot of research on internet and apply my method still I am failed to fix the bug. Using the "align-self: flex-start; position: sticky; top: 0;" it's working, but still there is a problem. It's working perfectly when we scroll from bottom to top but when we scroll from top to bottom it get fixed and starts scrolling when we scroll up to 50% of body. I want to fix this problem please check while scrolling from top to bottom.
NOTE: I've found some jQuery and JS plugins for sticky sidebars but the problem is that I can't use them in my project because I'm building this project entirely in vanilla JavaScript. So looking for a JS and CSS expert to help me fix this bug.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
header {
width: 100%;
height: 100px;
background-color: blue;
color: white;
padding: 10px 0px 0px 10px;
}
main {
margin: auto;
padding: 10px 0px;
display: grid;
grid-gap: 0px;
grid-template-columns: 70% 30%;
}
.main-content {
background-color: red;
height: 2000px;
margin-right: 5px;
color: white;
padding: 10px 0px 0px 10px;
}
.sidebar {
background-color: green;
height: 1000px;
margin-left: 5px;
color: white;
padding: 10px 0px 0px 10px;
/*----- Not Working Perfectly-----*/
align-self: flex-start;
position: sticky;
top: 0;
/*----- Not Working Perfectly-----*/
}
footer {
width: 100%;
height: 100px;
background-color: blue;
color: white;
padding: 10px 0px 0px 10px;
}
<body>
<header>
<h1>HEADER</h1>
</header>
<main>
<section class="main-content">
<h1>MAIN CONTENT</h1>
</section>
<section class="sidebar">
<h1>SIDEBAR</h1>
</section>
</main>
<footer>
<h1>FOOTER</h1>
</footer>
</body>
I would start by setting the height of the sidebar to 100vh, so it's always as big as the viewport. Right now it is fixed to 1000px.
.sidebar {
height: 100vh;
}
Your .main-content and .sidebar shouldn't have fixed heights, their heights should depend on their content. Replace fixed heights with some text.
When using display: grid on the parent element, all their children are stretched by default (align-items: stretch), their heights depend on the child that has the largest content or height.
To avoid equal heights for children use align-items: start on the parent element or align-self: start on a specific child element (in your case .sidebar).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
scroll-behavior: smooth;
--space-sm: 10px;
--space-md: 20px;
--space-lg: 30px;
--space-xl: 40px;
--text-color: #fff;
--header-bg: blue;
--mainContent-bg: red;
--sidebar-bg: green;
--footer-bg: blue;
}
body {
display: grid;
grid-gap: var(--space-sm);
padding: var(--space-sm);
color: var(--text-color);
}
header {
padding: var(--space-sm);
height: 100px;
background-color: var(--header-bg);
}
main {
display: grid;
column-gap: var(--space-sm);
grid-template-columns: 2fr 1fr;
align-items: start;
}
.main-content {
background-color: var(--mainContent-bg);
padding: var(--space-sm);
}
.main-content p {
margin-bottom: var(--space-md);
}
.sidebar {
position: sticky;
top: 0;
padding: var(--space-sm);
background-color: var(--sidebar-bg);
}
.sidebar li {
list-style: none;
}
.sidebar a {
text-decoration: none;
}
footer {
padding: var(--space-sm);
height: 100px;
background-color: var(--footer-bg);
}
<body>
<header>
<h1>HEADER</h1>
</header>
<main>
<section class="main-content">
<h1>MAIN CONTENT</h1>
<p id="paragraph1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="paragraph2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
ea voluptate velit esse quam nihil molestiae consequatur, vel illum
qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p id="paragraph3">
But I must explain to you how all this mistaken idea of denouncing
pleasure and praising pain was born and I will give you a complete
account of the system, and expound the actual teachings of the great
explorer of the truth, the master-builder of human happiness. No one
rejects, dislikes, or avoids pleasure itself, because it is pleasure,
but because those who do not know how to pursue pleasure rationally
encounter consequences that are extremely painful. Nor again is there
anyone who loves or pursues or desires to obtain pain of itself,
because it is pain, but because occasionally circumstances occur in
which toil and pain can procure him some great pleasure. To take a
trivial example, which of us ever undertakes laborious physical
exercise, except to obtain some advantage from it? But who has any
right to find fault with a man who chooses to enjoy a pleasure that
has no annoying consequences, or one who avoids a pain that produces
no resultant pleasure?
</p>
<p id="paragraph4">
At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
cumque nihil impedit quo minus id quod maxime placeat facere possimus,
omnis voluptas assumenda est, omnis dolor repellendus. Temporibus
autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus
asperiores repellat.
</p>
<p id="paragraph5">
On the other hand, we denounce with righteous indignation and dislike
men who are so beguiled and demoralized by the charms of pleasure of
the moment, so blinded by desire, that they cannot foresee the pain
and trouble that are bound to ensue; and equal blame belongs to those
who fail in their duty through weakness of will, which is the same as
saying through shrinking from toil and pain. These cases are perfectly
simple and easy to distinguish. In a free hour, when our power of
choice is untrammelled and when nothing prevents our being able to do
what we like best, every pleasure is to be welcomed and every pain
avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures
have to be repudiated and annoyances accepted. The wise man therefore
always holds in these matters to this principle of selection: he
rejects pleasures to secure other greater pleasures, or else he
endures pains to avoid worse pains.
</p>
</section>
<section class="sidebar">
<h1>SIDEBAR</h1>
<ul>
<li>Paragraph 1</li>
<li>Paragraph 2</li>
<li>Paragraph 3</li>
<li>Paragraph 4</li>
<li>Paragraph 5</li>
</ul>
</section>
</main>
<footer>
<h1>FOOTER</h1>
</footer>
</body>
Also, you don't need to explicitly declare width: 100% on header and footer elements because they are block-level elements, by default they have width: 100%.
Related
I'm trying to create in div 2 spans that once they fill the available space, they take 2fr and 1fr space... it has few rules:
if there's room, 1st span will fill the available space:
<div>
<span>longgggggggggg</span>
<span>text</span>
</div>
result:
longgggggggggg text
if they overflow, they are seperated to 2fr and 1 fr:
<div>
<span>longgggggggggggggggggg</span>
<span>textttttttttt</span>
</div>
result:
longgggggggg... textt...
if they are short, they float left (also, second part can fill rest, it is limited to 1fr only if first part fills the space):
<div>
<span>short</span>
<span>textttttt</span>
</div>
result:
short textttttt
You can achieve the effect you're trying to do using max-width and min-width. I don't think you can use fr's in this case but you can use percentage to achieve similar effect. You can try copying the code below and adjust the texts' length to see if it performs the way you want it to be.
span{
font-size: 30px;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 1rem;
}
div{
display: flex;
white-space: nowrap;
}
.first{
min-width: 33%;
max-width: 66%;
}
.second{
width: 100%;
min-width: 33%;
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<span class="first">
Cumque iusto nisi inventore. Commodi, neque animi??</span>
<span class="second">2nd text Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime aliquid doloremque recusandae culpa exercitationem at quam, dolores atque sapiente nihil iste nostrum possimus, quibusdam molestias. Laudantium deleniti repudiandae aliquid voluptatibus!
Labore sunt neque laboriosam harum nulla. A itaque pariatur voluptate corrupti quos quia minima? Enim similique, itaque recusandae suscipit maxime facilis magni placeat ipsum quasi dolorem obcaecati dolores velit porro!
Fugiat maxime unde numquam nam esse ab. Similique maxime suscipit nihil qui vitae, quibusdam quae perferendis labore cupiditate laboriosam vel praesentium sed eaque adipisci dolor obcaecati eum? Nisi, ut corrupti?
Numquam esse voluptatibus ducimus quisquam sed aliquid sunt sit voluptatum, eaque adipisci quae ullam, odit obcaecati incidunt dignissimos, quasi cum prov</span>
</div>
</body>
</html>
You can do it using Flex.
<div>
<span class="fist">short</span>
<span class="last">text</span>
</div>
div {
display: flex;
}
div > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div > span.fist {
flex-shrink: 1;
}
div > span.last {
flex-shrink: 0;
max-width: 33%;
}
SOLVED IT WITH GRID! 🔥
.container {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fit, minmax(0, max-content));
}
.first {
grid-column: span 2;
}
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="container">
<span class="fist">short</span>
<span class="last">text</span>
</div>
Thank you guys :)
I am currently working on a web app targeting tablets. I would like to show a modal dialog (titlebar + body) that grows (in height) no bigger than it's content requires, but if the content demands a height that would be bigger than the viewport, the dialog should instead have a scroll bar on the body element and a maximum height of the viewport's/parents height.
Can I somehow achieve this with CSS/JS?
You were so close
Here take a look
i added overflow-y: hidden; to .dialog and it works
.screen {
width: 800px;
height: 200px;
font-family: sans-serif;
display: grid;
place-items: center;
background-color: gray;
}
div.titlebar {
background-color: green;
height: 32px;
display: grid;
place-items: center;
}
div.body {
overflow-y: scroll;
background-color: purple;
/* setting height to 100% (of the parent) */
/* minus the 32px of the header */
height: calc(100% - 32px);
}
div.dialog {
width: 400px;
height: auto; /* auto size ... */
max-height: 100%; /* ... but dont grow bigger than screen */
display: flex;
flex-direction: column;
background-color: yellow;
overflow-y: hidden;
}
<div class="screen">
<div class="dialog">
<div class="titlebar">Title</div>
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error
praesentium aut laboriosam modi eius ex cum, ullam placeat, beatae,
nobis est quasi voluptate alias necessitatibus excepturi? Voluptas,
ut! Maxime consequuntur, quod? Ipsa ullam eveniet, dolore voluptas
eius obcaecati vero sint aut at sapiente! Vel iure distinctio pariatur
maxime, illo ab voluptate veritatis, porro delectus, earum molestiae
at ipsam ducimus dicta. Laboriosam perspiciatis molestias voluptatibus
modi dolorem ea asperiores assumenda alias minus, saepe facilis nam
consequuntur nulla ipsum delectus totam itaque consequatur molestiae.
Quibusdam nam, vero fugit mollitia minima dolor, eveniet obcaecati
sint iste inventore explicabo eligendi ratione harum, tempore quasi.
</div>
</div>
</div>
You could probably just use max-height: 100vh; and overflow-y: auto;.
Feel free to reduce the value of max-height or use calc(100vh - 30px) as a value if you need to remove some margin from the height of the modal.
I have this problem that I can't solve. Basically, I want to do this: my problem
This is a screenshot of me putting the <img> into the p tags, but I am not happy with that solution. For example - What if I don't know the number of lines in my paragraph and I still want to centre the image ...
I tried solving this in css:
.container {display:flex; justify-content:flex-end}
.item {align-self: center}
This doesn't work because the container is also affecting the p element ...
So why don't I just put the img into another div? Well, this doesn't work either...
.img_container {display: flex; justify-content:flex-end; width:100%;}
.item {align-self: center;}
This doesn't work, because of the width of the img_container is affecting the p also and If I don't make the width:100%; than the div is useless and the img will not be at the right side as I wanted it to be ...
I found a lot of "wrapping text around an image" questions and answers that are pointed me to css align property, but I am using html5 and this does not work for me.
I also want to point out that I am not from an English speaking country so searching for topics is hard for me if I don't know the exact name of the topic. So if there is an entire thing based around this topic than please point me into direction of it and I will be happy to read it.
SOLUTION: I solved it with the shape-outside thing, but rather than calculating background I just added an img tag to the div ... it ended like this
img {position: absolute; top:100px;}
Here is an idea using shape-outside but you need to pay attention to browser support:
body {
max-width:600px;
}
p {
text-align:justify;
}
div {
shape-outside: inset(50px 0px 50px 0px);
background: url(https://lorempixel.com/400/200/) 5px 50px/100% calc(100% - 100px) no-repeat;
width: 200px;
height: 200px;
float: right;
}
<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis. Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, m fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit deleeriores unde? Tempora dolorem, ad quidem quis adipisci dolores tempore m fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit deleeriores unde? Tempora dolorem, ad quidem quis adipisci dolores tempore</p>
From your screenshot, which you want to design, I think you had not use the flex property. Instead, you can use simple float: right for img. This floating img will wrapped by paragraph text. I will be happy if this is help you.
I'd like to see a background image (not full screen), previously positioned as "fixed", slowly move toward the top part of the web page and then disappear like happens with absolute positioning, but only after a certain number of pixels.
I used the "addClass" event to change the positioning from fixed to absolute.
Reached the wanted amount of pixels, the image is affected by the new class but instead of starting a smooth movement upwards, it jumps in the position in which it would be if it has always defined by an absolute position. Instead, I like it to start the movement from the position where it is.
This is the Jquery code (the class ".scrolled" just says "position:absolute")
<script>
$(document).on("scroll", function () {
var pixels = $(document).scrollTop()
if (pixels > 350) {
$("img").addClass("scrolled")
} else {
$("img").removeClass("scrolled")
}
})
</script>
UPDATE
In the following, I'll add my HTML and CSS code. I'm sorry guys, I'm a beginner and I didn't wonder that would be fundamental having them to answer my question.
HTML
<div class="grid"> <div class="row"><div class="col-6"><img src="https://www.illibraio.it/wp-content/uploads/2017/09/francesco-carofiglio-1.jpg" alt="FotoPortfolio"></div></div>
<div class="row">
<p class="page">
Hi everybody!<br>
My name is Francesco Cagnola<br> and I'm a communication designer.<br>
Recently, I've graduated at Politecnico di Milano with a degree in Communication Design.
I'm experienced in videomaking and photography but I can do beautiful graphics too.
I'm based in Milan but I'm spending a period in London to breath this vibrant city!
<br><br>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</p>
</div> </div>
CSS
.grid {
width: 100%;
}
.row {
margin-bottom: 1%;
display: flex;
justify-content: flex-start;
}
.col-6 {
width: 50%;
}
body {
background-color: #000000;
color:black;
margin: 0px
}
img { position: fixed;
top:15%;
justify-content: flex-end;
margin-left: auto;
width: 50%;
right:5%;
z-index: 0;
}
.scrolled{
position:absolute;
}
.page {
font-family: 'Roboto', sans-serif;
font-size: 36px;
font-weight: 400;
color: white;
position: absolute;
top: 10%;
padding: 14px 16px;
width: 60%;
float: left;
}
When you are removing class scrolled, you can add another class called for example 'animation'.
And 'animation' will have this in CSS:
.animation {
position: absolute;
animation-name: godown;
animation-duration: ...s;
animation-fill-mode: forwards;
}
#keyframes godown {
0% {
top: 350px;
}
100% {
top: 0px;
}
And this will be jQuery:
if (pixels > 350) {
$("img").addClass("scrolled");
$("img").removeClass("animation");
} else {
$("img").removeClass("scrolled");
$("img").addClass("animation");
}
But scrolled has to have this in CSS:
.scrolled {
position: absolute;
}
I'm on my mobile now so my testing is limited, but it should actually work.
UPDATE:
This is CSS:
.grid {
width: 100%;
}
.row {
margin-bottom: 1%;
display: flex;
justify-content: flex-start;
}
.col-6 {
width: 50%;
}
body {
background-color: #000000;
color:black;
margin: 0px
}
img {
position: fixed;
top:15%;
justify-content: flex-end;
margin-left: auto;
width: 50%;
right:5%;
z-index: 0;
}
.scrolled{
position:absolute;
animation-name: godown;
animation-duration: .5s;
animation-fill-mode: forwards;
}
.page {
font-family: 'Roboto', sans-serif;
font-size: 36px;
font-weight: 400;
color: white;
position: absolute;
top: 10%;
padding: 14px 16px;
width: 60%;
float: left;
}
#keyframes godown {
0% {
top: 350px;
}
100% {
top: 0px;
}
And this is JS:
$(window).scroll(function(){
$(document).on("scroll", function () {
var pixels = $(document).scrollTop()
if (pixels > 350) {
$("img").addClass("scrolled");
} else {
$("img").removeClass("scrolled");
}
});
});
And it works fine, when you scroll 350px from top, img goes smoothly to position absolute.
2nd update:
You can "simulate" position: fixed in jQuery. Just like this:
$(window).scroll(function () {
var pixels = $(document).scrollTop()
if (pixels < 350) {
$('img').css(
'top', $(this).scrollTop() + "px");
} else {
$('img').css(
'top' : '0px',
'transition' : '.5s');
}
});
And CSS:
img {
position: absolute;
}
Then put a position relative on the CSS for images without top, left, right, bottom and it'll be alright.
Don't really know if you don't put your HTML and CSS
Working on a jScrollPane. I've installed on my server exactly as stated through the jScrollPane site. The content seems to scroll but the default window scrollbar is showing up and the styled jScroll Vertical bar and drag bar don't scroll at all.
I've read about some issues with it not scrolling on the latest jquery so I also tried using an older version but still no luck.
I've made a quick fiddle that shows the issue.
Any help would be appreciated. I've been stuck on this for a few days now.
html -
<div id="subpanel" class="nav_dialog displayed" style="height: 560px; left: ; display: block;">
<div class="close_link">
Close (x)
</div>
<div class="scrollpane jspScrollable" id="subpanel_content" style="overflow: hidden; padding: 0px; width: 475px;" tabindex="0">
<div class="jspContainer" style="width: 475px; height: 520px;">
<div class="jspPane" style="padding: 0px 65px 0px 0px; top: 0px; width: 396px;">
<p><img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt=""></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>-</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> </p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p> </p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>-</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p>
</div>
<div class="jspVerticalBar">
<div class="jspCap jspCapTop"></div>
<div class="jspTrack" style="height: 600px;">
<div class="jspDrag" style="height: 300px; top: 0px;">
<div class="jspDragTop"></div>
<div class="jspDragBottom"></div>
</div>
</div>
<div class="jspCap jspCapBottom"></div>
</div>
</div>
</div>
</div>
CSS -
#subpanel {
position: absolute;
z-index: 10;
}
.nav_dialog {
position: absolute;
font-family: 'Inconsolata',verdana;
display: none;
float: left;
background-color: rgba(255, 255, 255, 0.75) !important;
color: #111 !important;
padding: 10px;
z-index: 10;
width: 495px;
color: white;
min-height: 306px;
font-size: inherit;
line-height: inherit;
margin-top: 2px;
}
.nav_dialog .close_link {
text-align: right;
margin-bottom: 10px;
}
.nav_dialog .scrollpane {
overflow: auto;
min-height: 270px;
margin: 0px 8px 0px 15px;
padding-right: 65px;
width: 410px;
}
.jspContainer
{
overflow: auto;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #dde;
position: relative;
}
.jspDrag
{
background: #bbd;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}
Let the jscrollpane to generate the class in javascript.
Also, include the jscrollpane library in your document.
<!-- Jscroll pane library -->
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<!-- Mousewheel -->
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<div id="subpanel" class="nav_dialog displayed" style="height: 560px; left: ; display: block;">
<div class="close_link">
Close (x)
</div>
<div class="scroll-pane">
<p><img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt="">
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
-
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
<p>
</p>
<p>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
<p>
-
</p>
<p>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
</div>
</div>
Give to the element .scroll-pane overflow:hidden and height:300px or the desired height.
I've created fiddle so you can see result
http://jsfiddle.net/8zk4E/1/