I am struggling with this problem. I have a vertical menu list which is inside a div with overflow set to 'scroll' (I tried with auto as well). If I hover over a item in the menu with the (overflow set to scroll) set, the menu values are not being displayed. Here is the image which is how it is displayed.
Here is the code for the above situation.Not Working
Here is the css part of the code which causes a lot of trouble:
.sidebar{
position: absolute;
top: 0px;
right:0px;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
z-index: 10;
float:right;
margin-right:20px;
height: 100px;
//overflow:scroll; //This is the code to be changed
}
.sidebar ul{
z-index:25;
}
.insideul{
overflow: scroll;
}
#mainist li{
z-index:50;
}
Here is the working image.
Here is the working code if I remove the overflow. working
Can someone help me with the above error.
Thanks.
I just comment out the overflow-x: auto and overflow-flow: auto in the .sideBar class, it works.
https://jsfiddle.net/3z8mq4k3/1/
.sidebar{
position: absolute;
top: 0px;
right:0px;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
z-index: 10;
float:right;
margin-right:20px;
height: 700px;
/*overflow-x: auto;
overflow-y: auto;*/
}
Related
I need my slick slider carousel to be completely centered in whatever browser someone is viewing it in. In other words, whether your viewing it in desktop chrome or an iPhone X Max the slider is positioned in the middle of the viewport. the slider is stuck to the top of the page.
I've tried every solution i could find but whatever i try the carosuel remains stuck to the top of the page.
this is the first method i tried https://github.com/kenwheeler/slick/issues/281
I tried to fiddle with what i found in both slick.css and slick-theme.css and still couldnt figure it out.
.slick-slide.c {
display: inline-block;
vertical-align: middle;
float:none;
}
My current style.css
#wrapper{
width: 100%;
margin: auto;
height: 100%;
background: grey;
}
html, body {
height: 100%;
margin: 0
}
body.Site{
text-align: center;
width: 100%;
outline: 0;
min-height: 100%;
background: blue;
}
main.Site-content{
}
footer {
height: 120px;
background: red;
}
.barcode{
font-family: 'Libre Barcode 39', cursive;
font-size: 2vw;
}
.slider {
display: block;
margin: 0 auto;
text-align: center;
font-size: 17px;
background: green;
}
.player {
width: 80%;
text-align: center;
background: purple;
outline: 0;
}
I expect my slider to remain centered vertically and horizontally within its viewport.
Here is the code you can use to center your slider horizontally and vertically. As there are some issues in adding external libraries in the code snippet, I have created a codepen for you. You can refer to this link:
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true
});
body{
background:#ccc;
}
.main {
font-family:Arial;
width:500px;
display:block;
margin:0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h3 {
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="main">
<div class="slider slider-nav">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
</div>
EDIT NOTE: Please check the codepen link instead of snippet result for the final result.
I am trying to make my page look like the Facebook Android app. The app can be summarized as having a 3 column layout with only the central column having the header (there is no footer, but in my requirement I also need a footer).
This can be shown in the image below
The red and blue div's are the left and right side-bars. The green and purple div's are the center div. The purple div's are the header and footer div's and would be sticking to the top and bottom of the page respectively.
One more requirement is there will be buttons on the header (top purple) to hide and show the left and right sidebars. Initially only the center div will be visible and the rest can be called into view as and when required. Here is my code till now. (I am not able to get the width for the center div)
HTML Code
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="leftBar" class="main">Left Bar</div>
<div id="content" class="inner">
<div id="header">Head</div>
<div id="body">Body</div>
<div id="footer">Footer</div>
</div>
<div id="rightBar" class="main">Right Bar</div>
</div>
</body>
</html>
CSS
body{
margin: 0px;
}
div.inner{
height: 500px;
width: 50%;
background: red;
}
div.main{
background: lime;
height: 200px;
overflow: hidden;
position: relative;
}
#leftBar{
float: left;
}
#content{
position: relative;
height: 100%;
float: left;
}
#rightBar{
float: right;
}
#header{
position: fixed;
top: 0px;
background: blue;
}
#body{
margin-top: 40px;
position: relative;
}
#footer{
position: absolute;
bottom: 0px;
}
I have also added the JavaScript code in the fiddle linked below
http://jsfiddle.net/mv6Bj/1/
The width should be such that the center div is full 100% width of the screen and when the right/left toggles come into the picture they should come to their position and push the center div to the left or right respectively. This is as per the standard Facebook app functionality.
These are the issues I am getting right now
The center div is not 100% and neither does it scale as elements appear and disappear
The height of the center div is not 100% (it is on Chrome, but strangely it is not on JSFiddle)
When I click on left, the leftBar disappears and the content div moves to the left but the header div remains where it is.
As per my understanding, I have updated the fiddle.
Working Demo
I have used display:table propery. You can refer this or this
html, body {
margin: 0px;
min-height:100%;
height:100%;
}
#main {
min-height:100%;
display:table;
width:100%;
height:100%;
}
#leftBar, #rightBar {
background: lime;
width:100px;
display:table-cell;
}
#content {
min-height: 100%;
display:table-cell;
background: red;
}
#header {
background: blue;
height:10%;
}
#body {
min-height:80%;
overflow:hidden;
}
#footer {
background: magenta;
height:10%;
}
Hope this works for you.
you can checkout this fiddle i made some changes in your css accordingly.
body {
margin: 0px;
}
div.inner {
height: 500px;
width: 50%;
background: red;
}
div.main {
background: lime;
bottom:0px;
top:0px;
overflow: hidden;
position: absolute;
width:20%;
}
#leftBar {
float: left;
}
#content {
position: absolute;
height: 100%;
top:0px;
right:0px;
width:60%;
left:20%;
float:left;
}
#rightBar {
float: right;
width:20%;
background: lime;
top:0px;
bottom:0px;
left:80%;
position:absolute;
}
#header {
float: left;
position: fixed;
top: 0px;
margin-left: 0px;
background: blue;
left:20%;
right:20%;
}
#body {
margin-top: 40px;
position: relative;
}
#footer {
position: absolute;
bottom: 0px;
position: fixed;
margin-left: 0px;
background: blue;
left:20%;
right:20%;
}
http://jsfiddle.net/mv6Bj/3/
I have a popup which will get shrink and the content will dislocate on the browser window resize. I am stuck with this
Here is the fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/
and here is the fullscreen fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/show/
Maybe you could view and check resizing the window
HTML
<div id="popup" >
<div id="img-section" >
<img src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/256/single-bird-icon.png" />
</div>
<div id="description">
//text content
</div>
</div>
<div id="fade" class="black_overlay"></div>
click here
CSS
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
min-width: 100%;
min-height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#popup {
display: none;
position: fixed;
top: 8%;
left: 10%;
max-width:1200px;
max-height:600px;
height:auto;
width:auto;
padding: 16px;
background-color: white;
z-index:1002;
overflow:hidden;
}
#img-section {
position:relative;
width:800px;
float:left;
background:black;
cursor:pointer;
height:600px;
padding:5px;
margin-top: -20px;
margin-left: -15px;
margin-right: 10px;
}
#description {
position:relative;
background-color: #fff;
max-width:400px;
overflow-y: auto;
position: relative;
word-wrap: break-word;
max-height:600px;
height:auto;
padding: 20px;
}
#img-section > img {
display:inline-block;
height: auto;
vertical-align:middle;
width:auto;
}
I want the poup to remain as it is, It should not shrink
Thanks in advance
Side scrolling for a popup is horrible, but:
make the popup position: absolute instead of fixed
give the body a min-width of left margin + popup width (currently that would be calc(1200px + 10%)
same for height?
make all max-width => width, because you know how much room you have
Your existing CSS is mighty strange, but this might do it: http://jsfiddle.net/rudiedirkx/ZjdU4/1/
Highlights:
body {
min-width: calc(1200px + 10%);
}
.black_overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#popup, #popup * {
box-sizing: border-box;
}
#popup {
position: absolute;
width: 1200px;
height: 600px;
padding: 0;
}
You are using percentage for your height and width.
The browser change its size on Resize, therefore the value of the percentage depreciates.
Like 10% of 100px differs from 10% of 10px.
Use px to keep your height and width the same size on resize.
Of course depending on what you want neither is better than the other
I have a parent container(like a pop-up), in which I have a child element appended to parent container. The child element is a div which has some text. I want to center the text inside the div, so that the text remains center aligned in the child div, but the text should align itself vertically as it grows beyond 3-4 lines. I am able to align text vertically as it grows, but when it still is a small text it should be center vertically, which is not happening. I have tried lot of css properties in the child class.
Any help will be good.
.parentclass {
position: absolute;
top: 110px;
left: 165px;
width: 470px;
height: 260px;
text-align: center;
background-image: url(../images/Notification_BG.png); }
.childclass {
position: relative;
position: inherit;
width: 430px;
height: 192px;
left: 50%;
top: 50%;
margin-left: -215px;
margin-top: -96px; /* Negative half of height. */
text-align: center;
text-overflow: -o-ellipsis-lastline;
border: 1px solid blue;
font-family: Arial;
font-size: 28px;
color: white; }
Thanks
KK
have u used vertical-align:middle; ?
try this :
.childclass {
display: table-cell;
vertical-align: middle;
text-align: center;
}
This link will definitely help you:
vertically-center-text-in-a-100-height-div
Use your parentclass display as table and the childclass display as a table-cell and vertical-align:middle will work surely
html
<div class='parentclass'>
<div class='childclass'>Text which is more than two or three lines</div>
</div>
Css
.parentclass {
height: 260px;
text-align: center;
display:table;
}
.childclass {
vertical-align: middle;
width: 430px;
top: 50%;
text-align: center;
text-overflow: -o-ellipsis-lastline;
border: 1px solid blue;
font-family: Arial;
font-size: 28px;
color: black;
}
See this fiddle for demo
In this example http://bit.ly/t2ImYS width of wrapper of all elements is fixed 8520px
#scroller {
width: 8520px;
height: 100%;
float: left;
padding: 0;}
I want width dynamic so if i add more elements inside <div id="scroller"> this #scroller should take the width upon elements inside it.
So tried to set width
#scroller {
width: 100%;}
and
#scroller {
width: auto}
but then scroller doesn't work properly.
is there a way to get width in % with properly working scroll?
Set the li elements to display:inline-block; and remove the float:left; (you could also remove the vertical-align, since that will only work on table-cell elements)
Remove the fixed width from the wrapper.
Add white-space:nowrap; to the ul
And you should be fine...
(Except in <=ie7, but I suppose that's no problem in your case?)
#scroller li {
display: inline-block;/* changed */
/*float:left; */ /* deleted */
padding: 0 10px;
width: 120px;
height: 100%;
border-left: 1px solid #CCC;
border-right: 1px solid white;
background-color: #FAFAFA;
font-size: 14px;
}
#scroller ul {
list-style: none;
display: block;
float: left;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
text-align: left;
white-space:nowrap; /* added */
}
#scroller {
/* width: 8520px; */ /* deleted */
height: 100%;
float: left;
padding: 0;
}
If you are using iScroll4 you should refresh the scroller or destroy and recreate it.
Excerpt from here:
"iScroll needs to know the correct dimensions of both the wrapper and the scroller. They are computed the first time at start up but if your code changes the elements size, iScroll needs to be warned that you are messing with the DOM."
Using Display:inline-block
and using percentages worked for me:
#scroller li {
height: 100%;
width: 2%;
display: inline-block;
}
#scroller ul {
list-style: none;
display: block;
float: left;
width: 100%;
height: 100%;
}
#scroller {
width: 5000%;
height: 100%;
float: left;
}
Try calling the iscroll refresh() method after adding dynamic items within the scroller to set the width.
try this css code, it worked for me: http://jsfiddle.net/manseuk/r9VL2/2/
#wrapper {
z-index:1;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
z-index:1;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
}
#scroller ul {
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li
{
background-color: White !important;
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}