So I've been setting up my own streaming page with VideoJS, all I want now is to have a chat, in this case, a Twitch chat iframe, side by side. This is what I have now.
The problem is the video element going under the chat frame. I want it to end where the chat frame starts, so they both line up nicely. If anyone could help me with this I'd be truly grateful.
Since Stackoverflow is forcing me to also put code in this post, here goes I suppose..
HTML:
<head>
<link href="//vjs.zencdn.net/4.9.0/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.9.0/video.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js"></script>
</head>
<div id="sidebar-wrapper">
<iframe frameborder="0" scrolling="no" src="http://twitch.tv/test/chat?popout=" height="100%" width="350">
</iframe>
</div>
<div class="wrapper">
<div class="videocontent">
<video id="videostream" class="video-js vjs-default-skin vjs-big-play-centered vjs-fullscreen" controls width="auto" height="auto">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
</video>
<script>
videojs("videostream", {}, function(){
// Player (this) is initialized and ready.
});
videojs('videostream').ready(function() {
this.hotkeys({
volumeStep: 0.1,
seekStep: 5,
alwaysCaptureHotkeys: true
});
});
</script>
</div>
</div>
CSS:
.video-js {padding-top: 56.25%;
margin-right: 20px;
}
.vjs-fullscreen {padding-top: 0px}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 10000;
position: fixed;
right: 250px;
width: 0;
height: 100%;
margin-right: -250px;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 350px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
#content
{
top: 0;
bottom: 0;
left: 0;
display: hidden;
}
You have set the width of your video container to 100% so it is taking the 100% of the width of its container (the webpage).
You can use calc function to get the behaviour intended because you have to rest the width of the chat(350px) from the 100% of the width of the container.
#videostream{
width: calc(100% - 350px) !important;
}
Updated Codepen.
Related
I want to make a header appear to have an animated underline when the parent element is hovered. Right now it is very close but I can't seem to position it correctly so that its width grows in both directions from its center, which is what I want it to do. Does someone know what I'm missing or need to add to my code to make this happen? The code below is what I think is relevant to fixing the situation. The entire project can be viewed via this CodePen as well. Thanks in advance! (The underlining is only applied to the first header when hovering).
HTML:
<div class="row flex-row">
<div id="top-image" class="image-block">
<h3>Fish Tail</h3>
<div class="underline"></div>
<img class="flex-image" src="https://source.unsplash.com/KSHq0VSqLMA">
</div>
<div class="image-block">
<h3>Swallow Tail</h3>
<img class="flex-image" src="https://source.unsplash.com/U--hvQ5MKjY">
</div>
<div class="image-block">
<h3>Directional</h3>
<img class="flex-image" src="https://source.unsplash.com/F3ePNdQb_Lg">
</div>
</div>
CSS:
.image-block:hover > h3{
letter-spacing: 8px;
transition: all .3s ease-in-out;
}
.underline {
visibility: hidden;
background-position: center;
background-color: white;
position: absolute;
top: 60%;
margin: 0;
width: 10px;
height: 10px;
border-radius: 5px;
transform: scaleX(0);
webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.image-block:hover .underline {
visibility: visible;
transform: scaleX(1);
width: 100%;
height: 10px;
transition: all .3s ease-in-out;
}
Edit:
I am trying to use the same ideas from someone else's Underlining Effect CodePen. The biggest difference is I don't want to have an <a> inside my header.
If you apply width: 100% to the .underline rule it begins the animation from the center.
.underline {
visibility: hidden;
background-position: center;
background-color: white;
position: absolute;
top: 60%;
margin: 0;
width: 100%; /**** Change this to 100% ****/
height: 10px;
border-radius: 5px;
transform: scaleX(0);
webkit-transition: all .2s ease-in-out;
transition: all .3s ease-in-out;
}
Adjusting the width of the line
To adjust the width of the line you can change the following:
.underline{
margin: 10% /*<== Set to half of 'what's left' in this case half of 20% is 10%*/
width: 80%;
}
.image-block:hover .underline {
width: 80% /*<== Set to match the .underline width */
}
* {
box-sizing: border-box;
}
.row {
min-width: 100%;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.image-block {
position: relative;
width: 33.33%;
float: left;
margin-top: 0;
z-index: 5;
}
.image-block:hover {
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
.image-block h3 {
position: absolute;
text-align: center;
font-family: 'Roboto', sans-serif;
color: white;
top: 40%;
width: 100%;
font-size: 48px;
letter-spacing: 5px;
margin: 0;
transition: all .3s ease-in-out;
}
.image-block:hover>h3 {
letter-spacing: 8px;
transition: all .3s ease-in-out;
}
.underline {
visibility: hidden;
background-position: center;
background-color: white;
position: absolute;
top: 60%;
margin: 0;
width: 100%;
/**** Change this to 100% ****/
height: 10px;
border-radius: 5px;
transform: scaleX(0);
webkit-transition: all .2s ease-in-out;
transition: all .3s ease-in-out;
}
.image-block:hover .underline {
visibility: visible;
transform: scaleX(1);
width: 100%;
height: 10px;
transition: all .3s ease-in-out;
}
.flex-image {
width: 100%;
height: auto;
display: flex;
}
#media all and (max-width: 1200px) {
.image-block {
width: 33.33%%;
}
}
#media all and (max-width: 1660px) {
.navbar a {
padding: 14px 14%;
}
}
#media all and (max-width: 1035px) {
.navbar a {
padding: 14px 12%;
}
}
#media all and (max-width: 880px) {
#top-image {
margin-top: 150px;
}
.image-block {
width: 100%;
margin: 0;
}
.navbar a:not(:first-child) {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive {
position: relative;
}
.navbar.responsive .icon {
position: fixed;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar a:hover {
transform: scale(1);
}
}
<div class="row flex-row">
<div id="top-image" class="image-block">
<h3>Fish Tail</h3>
<div class="underline">
</div>
<img class="flex-image" src="https://source.unsplash.com/KSHq0VSqLMA">
</div>
</div>
I have a button that, when pressed, is supposed to expand the element behind it (.nav which contains .work and .contact) out in both directions. However, I can't seem to keep the button in the center.
$(function() {
var nav = $('.nav');
var button = $('.nav button');
button.on('click', function(){
nav.toggleClass('active');
if(nav.hasClass('active'))
button.text('');
else
button.text('');
});
});
html {
background: #f1f1f1;
}
.nav {
display: block;
margin: auto;
margin-top: 80px;
margin-bottom: 200px;
background: #ccc;
color: black;
text-align: center;
width: 350px;
height: 330px;
transition: width 0.5s;
}
.nav.active {
width: 1000px;
transition: width 0.5s;
}
.navigation button {
position: absolute;
width: 350px;
Height: 350px;
margin: 0 auto;
display: block;
background-color: #2e0513!important;
background: url(TransplantAltFontbackgroundvector.png) 12px 15px;
background-repeat: no-repeat;
background-size: 325px 325px;
border: none;
transition: 0.5s ease-in-out;
}
.navigation.active button {
transform: scale(1.1);
transition: 0.5s ease-in-out;
}
.navigation:hover button {
box-shadow: 0px 0px 20px black;
transform: scale(1.01);
transition: 0.1s ease-in-out;
}
.navigation.active:hover button {
box-shadow: none!important;
transform: scale(1.1)!important;
transition: 0.5s ease-in-out;
}
.navigation button img {
position: relative;
right: 30px;
bottom: 40px;
}
.work,
.contact {
position: relative;
visibility: hidden;
}
.work a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.contact a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.nav.active > .work {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: left;
left: 125px;
top: 150px;
}
.nav.active > .contact {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: right;
right: 125px;
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
<div class="nav">
<button>
</button>
<div class="work">
work
</div>
<div class="contact">
contact
</div>
</div>
</div>
Give the nav a style of position: relative. Then, toggle a class (or just add the styling, should work as well) to the button on click that does the following:
button.my-pressed-class {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
This should keep it in the middle.
Edit: Keep in mind you already have a transform set on the button on hover. Just, add the translateX to hover when the button has the aforementioned class, to avoid it from moving around on hover.
add postion relative to .navigation and position absolute to .nav with left value
$(function() {
var nav = $('.nav');
var button = $('.nav button');
button.on('click', function(){
nav.toggleClass('active');
if(nav.hasClass('active'))
button.text('');
else
button.text('');
});
});
html {
background: #f1f1f1;
}
.navigation {
position: relative;
}
.nav {
display: block;
margin: auto;
margin-top: 80px;
margin-bottom: 200px;
background: #ccc;
color: black;
text-align: center;
width: 350px;
height: 330px;
transition: width 0.5s;
position: absolute;
left: 100px;
}
.nav.active {
width: 1000px;
transition: width 0.5s;
}
.navigation button {
position: absolute;
width: 350px;
Height: 350px;
margin: 0 auto;
display: block;
background-color: #2e0513!important;
background: url(TransplantAltFontbackgroundvector.png) 12px 15px;
background-repeat: no-repeat;
background-size: 325px 325px;
border: none;
transition: 0.5s ease-in-out;
}
.navigation.active button {
transform: scale(1.1);
transition: 0.5s ease-in-out;
}
.navigation:hover button {
box-shadow: 0px 0px 20px black;
transform: scale(1.01);
transition: 0.1s ease-in-out;
}
.navigation.active:hover button {
box-shadow: none!important;
transform: scale(1.1)!important;
transition: 0.5s ease-in-out;
}
.navigation button img {
position: relative;
right: 30px;
bottom: 40px;
}
.work,
.contact {
position: relative;
visibility: hidden;
}
.work a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.contact a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.nav.active > .work {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: left;
left: 125px;
top: 150px;
}
.nav.active > .contact {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: right;
right: 125px;
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
<div class="nav">
<button>
</button>
<div class="work">
work
</div>
<div class="contact">
contact
</div>
</div>
</div>
My question is rather simple,
text-decoration:none - is not working in this example when a user hovers over an <a> tag. Where is my mistake?
I have provided the whole project to help you understand what I'm trying to achieve. There is a code snippet below that displays my code with the current problem.
Thanks in advance guys.
* {
font-family: "Helvetica Neue";
font-size: 22px;
text-decortion:none!important
}
.container {
color: #a2abbd;
width: 100%;
height: 100%;
background-color: #21212b;
}
.radio-container {
overflow: hidden;
position: relative;
margin: 7% auto;
height: 504px;
width: 320px;
background-color: #2c2c37;
border-top: 1px solid #f1be81;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
border-radius: 25px;
-webkit-box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
}
header {
text-align: center;
vertical-align: middle;
line-height: 79px;
height: 79px;
background-color: #edae61;
color: white;
font-weight: bold;
}
header a {
display: block;
position: absolute;
width: 60px;
height: 80px;
}
header .arrow {
left: 0;
top: 0;
}
header .arrow img {
margin-bottom: 5px;
}
header .on-off {
right: 0;
top: 0;
}
header .on-off img {
margin-bottom: 10px;
margin-right: 7px;
}
section {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul {
position: relative;
padding: 0;
margin: 11px 23px 0px 23px;
line-height: 1.364;
}
section ul li {
border-bottom: 1px solid #40404a;
list-style-type: none;
overflow: hidden;
}
section ul li:last-child {
border: none;
}
section ul li a {
display: block;
padding: 18px 0px 14px 0px;
cursor: pointer;
width: 100%;
height: 100%;
color: #a2abbd;
text-decoration: none;
}
section ul li a:hover p {
color: #848b9b;
}
section ul li a p {
display: inline;
}
section ul li a p strong {
float: right;
clear: both;
}
section ul li a p img {
padding-right: 0.5em;
padding-bottom: 0.2em;
}
section ul .dribbleFM {
position: relative;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul .dribbleFM .dribble-anchor {
position: absolute;
top: -200px;
z-index: 1;
}
section ul .dribbleFM .dribble-anchor:target {
top: 18px;
margin-bottom: 18px;
position: relative;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul .dribbleFM .dribble-anchor:target + .dribble-button1 {
display: none;
}
section ul .dribbleFM .dribble-anchor:target ~ .dribble-button2 {
display: block;
}
section ul .dribbleFM .dribble-anchor .volume {
pointer-events: none;
position: relative;
}
section ul .dribbleFM .dribble-anchor .volume a {
position: relative;
display: inline;
pointer-events: auto;
z-index: 100;
}
section ul .dribbleFM .dribble-anchor .volume .img-main {
margin-left: 33px;
margin-right: 33px;
padding-top: 40px;
padding-bottom: 40px;
}
section ul .dribbleFM .dribble-anchor .volume .clickable {
padding-top: 5px;
padding-bottom: 8px;
}
section ul .dribbleFM .dribble-button2 {
display: none;
}
footer {
position: absolute;
bottom: 0;
height: 79px;
width: 100%;
background-color: #22222b;
border-top: 1px solid #4d505c;
text-align: center;
vertical-align: middle;
line-height: 79px;
cursor: default;
}
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatibile" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="netguru recruitment task">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="radio-container">
<header><img src="https://imageshack.com/i/id8QV4sap">
<p>
STATIONS
</p><img src="https://imageshack.com/i/idUebcAVp">
</header>
<section>
<ul>
<li><a href="#">
<p>
Putin FM<strong>66,6</strong>
</p></a></li>
<li class="dribbleFM">
<div id="dribble-anchor-on" class="dribble-anchor">
<div class="volume"><img src="https://imageshack.com/i/exjVsiWzp"><img src="https://imageshack.com/i/ipxUWXkvp"><img src="https://imageshack.com/i/idsjoKxsp"></div>
</div><a href="#dribble-anchor-on" class="dribble-button1">
<p>
Dribbble FM<strong>101,2</strong>
</p></a><a href="#dribble-anchor-off" class="dribble-button2">
<p>
Dribbble FM<strong>101,2 </strong>
</p></a>
</li>
<li><a href="#">
<p>
Doge FM<strong>99,4</strong>
</p></a></li>
<li><a href="#">
<p>
Ballads FM<strong>87,1</strong>
</p></a></li>
<li><a href="#">
<p><img src="http://imageshack.com/a/img661/6406/acyLmg.png">Maximum FM<strong>142,2 </strong></p></a></li>
</ul>
</section>
<footer>
<p>High quality</p>
</footer>
</div>
</div>
</body>
</html>
By defualt, you have already set the text-decoration:none for anchors. But text-decoration is not acting on hover for anchors because you have not specified it for :hover state.
For :hover, Try this,
section ul li a:hover{text-decoration:none}
Hope this help.!
The solution already post should work fine. By the way, why are you keeping your styles first and then the bootstrap styles. You should keep your styles next to the bootstrap styles. Otherwise, whatever you will loose the impact of your styles overridden by bootstrap styles.
I have collapsible sidebar with two tabs in my angularjs page but it is not working scroll is not visible on overflow.Requirement is scroll bar is not visible on sidebar overflow i gave scrollbar height to auto and overflow-y to scroll but not running.Does anyone know how to do this ?
Here is my Code:
CSS
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
/*margin-top: 57px;*/
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
/* disini agar ketika di kecilkan tidak hilang semua default 0*/
height: auto;
margin-left: -250px;
overflow-y: hidden;
/* overflow-y: auto, changed to Hidden By VIKAS GAYAKWAD */
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
/*width: 100%;*/
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
.fixed-brand {
width: auto;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
height: 100%;
top: 0;
width: 250px;
overflow-y: scroll;
margin: 0;
padding: 0;
list-style: none;
margin-top: 2px;
}
.sidebar-nav li {
text-indent: 15px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
border-left: red 2px solid;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
.no-margin {
margin: 0;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
.fixed-brand {
width: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#wrapper.toggled-2 #sidebar-wrapper {
width: 50px;
}
#wrapper.toggled-2 #sidebar-wrapper:hover {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
padding-left: 250px;
}
#wrapper.toggled-2 #page-content-wrapper {
position: relative;
margin-right: 0;
margin-left: -200px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
}
.media-body {
height: 100%;
padding: 4px;
/*margin-top: 5px;*/
/*background:green;*/
}
.media.contact-card {
font-size: 11px;
padding: 5px;
border-bottom: 1px solid #3071a9;
/*color: lightcyan;*/
}
.hr {
border-bottom: 1px solid #e1e1e1;
}
/*slider tab end*/
/* Scrollbar */
.scrollbar {
overflow-y: scroll;
height: auto;
}
Html
<tabset justified="true">
<tab heading="CONTACTS">
<div class="tab-content">
<div>
<div class="pull-right">
<a class="" ui-sref=".client"> <i class="glyphicon glyphicon-plus"></i> Add Contact </a>
</div>
<div class="clearfix"></div>
</div>
<div class="scrollbar">
<!--Start SCROLL BAR, Div Added/Edited by VIKAS GAYAKWAD -->
<div class="hr"></div>
<ul class="media-list">
<contact-card data-client="client" ng-repeat="client in clientList"></contact-card>
</ul>
</div>
<!--End SCROLL BAR--->
</div>
</tab>
<tab heading="RECENT">
<div class="tab-content">
<div ng-repeat="client in clientList">
{{client.firstName}} {{client.lastName}}
</div>
</div>
</tab>
</tabset>
The main problem is probbaly that the scrollbar-<div> has no "Visible" contents except for a <hr>.
Because it is empty except for some unsuported (?) HTML tags, it will show up as a short greyed scrollbar (there simply is nothing to scroll through).
Also, when you do not set the height of the scroll-<div>, the scrollbar will be useless as the DIV stretches along with the content.
You didn't set any max-height for the scrollbar to work. And there's no content inside the .scrollbar element.
Your css for .scrollbar should be like this:
.scrollbar {
overflow-y: scroll;
height: auto;
max-height: 400px;
}
For the scrollbar to appear add this:
.media-list {
height: 450px;
}
Note: The latter isn't necessary if you have contents added, this is just to show you that empty div won't show the scrollbar.
Fiddle
I'm trying out the Simple Sidebar Demo . However after changing the sidebar title it messes up:
How do I fix it so that:
The menu items are pushed down instead of being overwritten
There is not all that whitespace between the two rows of the title
Here is a cut down version of the demo that still shows the problem:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Sidebar - Start Bootstrap Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
This title does not appear to word-wrap properly
</a>
</li>
<li> Dashboard </li>
<li> Shortcuts </li>
<li> Overview </li>
</div>
<div id="page-content-wrapper">
<div class="container-fluid"> <div class="row"> <div class="col-lg-12"> Bla bla
</div> </div> </div> </div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This is simple-sidebar.css:
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
Fixing the Wrapping:
You are setting two properties here:
line-height and text-indent:
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
Removing those two properties here makes the text wrap properly.
Perhaps you are looking for margin-left to push the entire element, and not just the first line?
Fixing the "pushing":
You are also fixing the list-item height, while your child <a> of your header list item has two lines, which make the <a> element go outside the bounding box you set.
Removing that height from this code:
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
(or making it min-height) will make it push the other list items down.
Perhaps you are looking for padding-top and padding-bottom to add some spacing to the entire element, rather than to each line?
Here's a total adjustment that makes use of the suggestions I just offered you
margin-left:
.sidebar-nav li {
margin-left: 20px;
line-height: 40px;
}
box-sizing, padding, and not line-height:
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: initial;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding-top: 15px;
padding-bottom: 15px;
}