How to show my div inner overflow scroll? i need show this div. I did position absolute and z index but not showing div. it is showing inner parent div. Someone help me? Thanks a lot :)
<div class="otobus_alan">
<div class="otobus">
<a href="" class="koltuk">Koltuk
<div class="ekstra_div">
Test
</div>
</a>
</div>
</div>
.otobus_alan {
width:600px;
height:200px;
overflow-x:auto;
position:relative;
margin-top:100px;
z-index:1;
}
.otobus {
float:left;
display:block;
width:1000px;
height:180px;
background:red;
position:relative;
z-index:1;
}
.ekstra_div {
position:absolute;
display:none;
z-index:2;
padding:25px;
background:blue;
width:50px;
height:50px;
top:-40px;
left:100px;
}
.koltuk {
float:left;
background:white;
}
.koltuk:hover .ekstra_div {
display:block;
}
https://codepen.io/musti_nation/pen/RyZBoe
Related
I am facing a problem. I am trying to create something similar to this:
<div id="wrapper">
<div id="a" class="panels">FIXED PANEL</div>
<div id="b" class="panels">Scrolling-Panel 1</div>
<div id="c" class="panels">Scrolling-Panel 2</div>
<div id="d" class="panels">Scrolling-Panel 3</div>
</div>
html,body {
padding:0;
margin:0;
background:black;
}
#wrapper {
position:absolute;
height:100%;
width:100%;
}
.panels {
position:relative;
height:100%;
min-height:100%;
width:100%;
z-index:1000;
}
#a{
background:#eee;
position:fixed;
color:red;
top:0;
z-index:-99;
}
#b{
margin-top:100%;
background:yellow;
}
#c{
background:pink;
}
#d{
background:green;
}
When I put this code inside ion-content, it simply doesn't work. I just see the first div, but I can't scroll to see the rest.
I am trying make it as a name of table besides table name red color dashes is there i want to append this dashes dynamically based on screen size . on both sides of my text . sorry for my bad English. give me a Suggestion how to make it ?
.container{
width:100%;
height:30px;
background:blue;
text-align:center;
}
.container span{
color:#fff;
}
.container .dashes{
display:inline-block;
width:5px;
height:5px;
background:red;
vertical-align:middle;
}
<div class="container">
<div class="dashes"></div>
<span>Name</span>
<div class="dashes"></div>
</div>
Just set the .dashes width as per your screen size using media-query.
.container{
width:100%;
height:30px;
background:blue;
text-align:center;
padding-top: 10px;
}
.container span{
color:#fff;
}
.container .dashes{
display:inline-block;
width:200px;
height:0;
background:red;
vertical-align:middle;
border: 2px dashed blue;
}
<div class="container">
<div class="dashes"></div>
<span>Name</span>
<div class="dashes"></div>
</div>
I have an img inside a div container which has some background color. I want the image to overlay on top of the div container and cross it's height beyond the div's height, without any scroll bars.
A fiddle related to this http://jsfiddle.net/mLtfcm6n/2/
Fiddle code:
<div class="container">
<img class="image" src="https://cdn1.iconfinder.com/data/icons/prettyoffice9/256/triangle.png"></img>
</div>
.container {
background-color:red;
height:100px;
position:relative;
overflow:hidden;
}
.image {
position:absolute;
left:40px;
height:256px;
}
I can't set overflow-y to hidden and overflow-x has to be hidden
The end result should be like this fiddle: http://jsfiddle.net/mLtfcm6n/3/
CSS for it is(only change is removal of overflow property):
.container {
background-color:red;
height:100px;
position:relative;
}
.image {
position:absolute;
left:40px;
height:256px;
}
Help!
.container {
background-color:red;
height:100px;
position:relative;
overflow:hidden;
}
.image {
position:fixed;
left:40px;
height:256px;
}
<div class="container">
<img class="image" src="https://cdn1.iconfinder.com/data/icons/prettyoffice9/256/triangle.png"></img>
</div>
I made a menubar using a <div> tag. When it is clicked the <div> below it slides down, and another content below those two <div>'s should stay in its place, but it goes down too.
You can see picture here
As you see in this picture when I click to slide down <div> , the other <div> in bottom of that goes down too. How to fix it?
HTML
<div id="slide">click to slide down</div>
<div id="panel">Hello! this is my first slide down example.</div>
<div>this is another div</div>
CSS
#slide{
text-align:center;
border:solid 1px #101010;
width:500px;
height:30px;
background:#cccccc;
}
#panel{
text-align:center;
border:solid 1px #101010;
width:500px;
height:200px;
display:none;
background:#ff0000;
}
jQuery
$(document).ready(function(){
$('#slide').click(function(){
$('#panel').stop().slideToggle(570);
});
});
You can make a few position changes in your CSS, and place your second <div> inside your first. top:100% mean's that your second div will animate from the bottom of your first div:
HTML
<div id="slide">click to slide down
<div id="panel">Hello! this is my first slide down example.</div>
</div>
<div>this is another div</div>
CSS
#slide{
text-align:center;
border:solid 1px #101010;
width:500px;
height:30px;
background:#cccccc;
position:relative;
}
#panel{
position:absolute;
top:100%;
box-sizing:border-box;
text-align:center;
border:solid 1px #101010;
width:100%;
height:200px;
display:none;
background:#ff0000;
}
JSFiddle
Try this:
HTML
<div id="menu_container">
<div id="slide">click to slide down</div>
<div id="panel">Hello! this is my first slide down example.</div>
</div>
<div>this is another div</div>
CSS
#menu_container { position:relative; }
#panel { position:absolute; top:100%; left:0; }
Replace your code with this
#panel{
text-align:center;
border:solid 1px #101010;
width:500px;
height:200px;
display:none;
background:#ff0000;
z-index: 10;
position: absolute;
}
I have copied the javascript of iscroll-lite from here
html code
<div id="wrapper" class="wrapper">
<div id="wrapper-container" class="wrapper-container">
<div id="header" class="header">
<div id="header_title" class="header_title"> </div>
<div id="abc" class="abc"><img src="img/abc.png""/> </div>
</div>
<div id="images" class="images"><img name="slide" src="img/abc.png" width=100%; />
</div>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
</div>
</div>
<div id="footer" style="background-image:url(img/bar.png);" class="footer">
<div id="footer_text" class="footer_text">footer_text</div>
<div id="image" class="image noSelect"><img src="img/info.png" onclick="info()"/></div>
</div>
</div>
The content of desc tag is going to overflow
CSS
.wrapper
{
position: absolute; width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_other
{
width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_container
{
width:100%; margin:0 auto; font-family:Arial, Helvetica, sans-serif;
}
.header
{
float:left; height:100%; min-height:100%; margin:0%; width:96%; padding:3% 2% 0;
}
.header_title
{
float:left; padding:0%; margin:0%; height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight: bold; width:80%;
}
.images
{
position:relative; width:100%;
}
.description
{
float:left; width:100%; overflow:auto; height:100%;
}
.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}
.desc
{
width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px; padding:0px 0px 40px 0px;
}
.desc p
{
margin-top:0;
}
.footer
{
width:100%; position:absolute; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
text-indent:1%; float:left; text-align:center; width:75%; margin-top:2%;
}
.info
{
width:25%; float:right; padding-top:1%;
}
USING iscroll
<script type="text/javascript" charset="utf-8" src="iscroll.js"></script>
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script>
var myScroll;
document.addEventListener("deviceready", onDeviceReady, false);
function scroll()
{
myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});
}
----
----
function onDeviceReady()
{
scroll();
----
----
On scrolling,I just get the following
W/webview(3101): Miss a drag as we are waiting for WebCore's response for touch down.
PROBLEM:
It is is not scrolling.If at all it does after great effort on it but,it scrolls only once.I go back to the main page and return it does not scroll at all.
I have tried implementing the iscroll java script for my application as a remedial process for the CSS position:fixed that does not work in android 2 and 3 versions using cordova 2.1.0
Please,Guide me!!
This is answered here.
The concept was implementing with the tags such as <ul> and <li> within the <wrapper> and <scroller> div.
Excellent answer!