How to Disable horizontal scrolling?
overflow-x: hidden, doesn't work for me. I wanna drag the lightblue square into the pink field and I need vertical scrolling, but when I enable it the draggable get's caught in the left div.
Here's a fiddle which shows my Problem:
https://jsfiddle.net/2hzxpm3y/
<div class="left">
<div class="draggable"></div>
</div>
<div class="right">
</div>
.draggable {
width: 50px;
height: 50px;
background-color: lightblue;
}
.left {
float: left;
width: 20%;
height: 100px;
overflow-y: scroll;
}
.right {
float: right;
width: 80%;
height: 100px;
background-color: pink;
}
Thanks!
Try this:
.left {
float: left;
}
here is jsfiddle
Related
So I can't figure this out.
I'm trying to get a red vertical box to display in middle of page. I've set the div's margin to auto.
And then there's another div that holds a centered text.
Setting margin auto on both.
They are both stacking on top of eachother fine in middle of page.
However I want it to be responsive to all heights. Right now it's just responsive to the x-axis and not the height.
HTML & CSS:
.parentDiv {
position: relative;
width: 250px;
height: 450px;
margin: auto;
}
#RedBox {
width: 250px;
height: 450px;
background-color: #FF0000;
margin: auto;
}
#CSText {
position: absolute;
top: 45%;
width: 250px;
color: black;
text-align: center;
}
<div class="parentDiv" style="margin-top: auto;">
<div id="CSText" class="TextAlignCenter">
</div>
<div id="RedBox">
</div>
</div>
flexbox would be a great solution to this:
.container {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.red-box {
background-color: red;
padding: 100px;
color: white;
}
<div class="container">
<div class="red-box">text</div>
</div>
I did this for you.
https://jsfiddle.net/95ssv6q1/
HTML
<div class="parentDiv">
<div class="inner">
<div id="RedBox">
</div>
</div>
</div>
CSS
.parentDiv {
display:table;
width: 100%;
height: 100%;
position: absolute;
}
.inner{
display: table-cell;
vertical-align:middle;
}
#RedBox {
width: 250px;
height: 450px;
background-color: #FF0000;
margin: auto;
}
I am trying to drag-scroll a div containing floated elements. You can play with it here
The intent is that dragging the grey area should drag the pane. I have applied suggestions from similar "expand div to floated content" questions. This is my best effort - vertical overflow looks good but horizontal scroll does not.
added a clear element to the end of the floated elements
added "overflow: hidden;" to parent of floated elements
tried floating the parent div but this didn't seem to fix it
Setting a fixed width works but the content is dynamic.
Code
<div class="title">Tall elements - ok</div>
<div id="wrapper">
<div id="scroller">
<div id="items">
<div class="item-tall">hi</div>
<div class="item-tall">ho</div>
<div class="item-tall">off</div>
<div class="item-tall">...</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="title">Wide elements - not ok</div>
<div id="wrapper2">
<div id="scroller2">
<div id="items2">
<div class="item-wide">hi</div>
<div class="item-wide">ho</div>
<div class="item-wide">off</div>
<div class="item-wide">...</div>
<div class="clear"></div>
</div>
</div>
</div>
$('#wrapper, #scroller').dragscrollable({
dragSelector: '#items',
acceptPropagatedEvent: false
});
$('#wrapper2, #scroller2').dragscrollable({
dragSelector: '#items2',
acceptPropagatedEvent: false
});
#wrapper {
width: 220px;
height: 200px;
overflow: auto;
border: 1px solid #ff0000;
background-color: lightgray;
cursor: all-scroll;
}
#scroller {
height: 100%;
}
#wrapper2 {
width: 220px;
height: 200px;
overflow: auto;
border: 1px solid #ff0000;
background-color: lightgray;
cursor: all-scroll;
}
#scroller2 {
height: 100%;
}
#items {
overflow: hidden;
}
#items2 {
height: 100%;
/* width: 500px; this will fix it */
overflow: hidden;
}
.item-tall {
width: 30px;
height: 500px;
float: left;
background-color: white;
cursor: default;
}
.item-wide {
height: 30px;
min-width: 1000px;
float: left;
background-color: white;
cursor: default;
}
.clear {
clear: both;
}
.title {
padding: 20px;
}
References
Horizontal scroll in a parent div containing floated child divs
Floating elements within a div, floats outside of div. Why?
So, What do you want?
Horizontal scroll bar should not appear in your second item?
For that don't assign width in the second wrapper.You have assigned width:220px;, in the second wrapper but only one child has width:300px ,i.e greater than parent width that's why the horizontal scroll bar is coming.
Don't use width for wrapper2....
#wrapper2 {
height: 200px;
overflow: auto;
border: 1px solid #ff0000;
background-color: lightgray;
cursor: all-scroll;
}
I hope this works.
maybe it´s a tricky question, maybe not. I have a grid layout with floating divs. I would like to build a responsive design. When you adjust the size of the browser window the divs will float in the hidden area. This is easy.
BUT what i try is that the last "more" div will always be the last div in the grid.
Heres the example code
HTML
<div class="bar">
<div id="1" class="square">1</div>
<div id="2" class="square">2</div>
<div id="3" class="square">3</div>
<div id="4" class="square">4</div>
<div class="more">more</div>
</div>
</div>
CSS
div.more {
width: 60px;
height: 60px;
background: red;
color: #000;
text-align: center;
float: left;
}
div.container {
position: relative;
width: 100%;
height: 60px;
}
div.square {
position: relative;
background: green;
width: 60px;
height: 60px;
float: left;
margin-right: 5px;
}
div.bar {
width: 100%;
height: 60px;
background: #000;
overflow: hidden;
}
Here i have a simple fiddle Demo. When you adjust the grid, the divs are floating. But the last more div is also floating, which is not what i need here.
fiddle demo
Can this be done by pure css or is js needed? Thank you for any help.
Ruven
I would use media queries like this http://jsfiddle.net/DIRTY_SMITH/2s4zr470/4/
HTML
<div class="bar">
<div id="one" class="square">1</div>
<div id="two" class="square">2</div>
<div id="three" class="square">3</div>
<div id="four" class="square">4</div>
<div class="more">more</div>
</div>
</div>
CSS
div.more {
width: 60px;
height: 60px;
background: red;
color: #000;
float: right;
text-align: center;
float: left;
}
div.container {
position: relative;
width: 100%;
height: 60px;
}
div.square {
position: relative;
background: green;
width: 60px;
height: 60px;
float: left;
margin-right: 5px;
}
div.bar {
width: 100%;
height: 60px;
background: #000;
}
#media (max-width: 340px){
#four{display: none;}
}
#media (max-width: 280px){
#three{display: none;}
}
#media (max-width: 220px){
#two{display: none;}
}
#media (max-width: 160px){
#one{display: none;}
}
I'm trying to make a fixed box with 980px width and 500px height scrolling inside a div with 100% width and 1500px height, but it is not working at all.
That's what I did: https://jsfiddle.net/zjuyuhmz/2/embedded/result/
The box is moving when the page scrolls, and I want to make scroll only if the mouse is inside of the div.
Is this possible??
Html:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
Css:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 940px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -480px;
background: black;
}
You need to write javascript code, where you can get cursor position and depending on that enable scroll event.
Replace the css for .test for this:
.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}
.test:focus {
position:fixed;
}
This means: when the element with id "test" has the focus on, make it's position fixed. If not, make it's position absolute.
Well i have the following: http://jsfiddle.net/a9VDa/12/
I am trying to make the jquery tree fill the remaining contents of the div "a" but also include a scroll if there isn't enough space.
<div class="a">
<div class="b"></div>
<div class="c" id="tree"></div>
</div>
My suggested solution: http://jsfiddle.net/Bt2sL/2/
Without orange part scrolling.
HTML
<div class="b"></div>
<div class="a">
<div class="c" id="tree"></div>
</div>
CSS
.a {
height: 60px;
background-color: red;
height: auto;
overflow: scroll;
height: 200px; // adjust this to your need
}
.b {
height: 22px;
background-color: coral;
}
.c {
background-color: lightblue;
}
Can you just make div b fixed and add some padding to a with overflow scroll set?
.a {
height: 60px;
background-color: gray;
position: relative;
overflow: scroll;
padding-top: 22px;
}
.b {
position: fixed;
top: 0;
height: 22px;
background-color: coral;
}
.c {
background-color: lightblue;
height: auto;
overflow: scroll;
}