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.
Related
I have a page layout with a sidebar alongside a main-content div. Partway down the page, I have a div (parent) inside of a div (child). The child div needs to be horizontally centered relative to the screen instead of the parent.
<div class="sidebar"></div>
<div class="main-content">
<div class="parent">
<div class="child"></div>
<div class="other-stuff"></div>
</div>
</div>
<style>
.parent{
width: 100px;
}
.child{
width: 200px;
}
</style>
My first thought was using absolute positioning with something like this:
.child{
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
}
The problem I faced here was that I had to make up for the extra space due to the child being taken out of document flow. "Other-stuff" wanted to move up to fill the gap left behind.
Is there a better way to accomplish this beyond just pushing the div around with absolute positioning and adding extra margin/padding to make up the space so the lower content doesn't come up?
I'm open to abandoning absolute positioning — that was just the first thing that came to mind.
You can use a flexbox to position multiple items in one container and knock the children out of the parent div so it's not affected by whatever positioning you do with that.
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
}
.parent {
border: 1px solid black;
width: 100px;
height: fit-content;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
gap: 2px;
}
.child {
display: block;
border: 1px solid black;
width: 200px;
height: fit-content;
}
.other-stuff {
display: block;
border: 1px solid black;
width: 200px;
height: fit-content;
}
<div class="sidebar"></div>
<div class="main-content">
<div class="parent">
I'm the Parent
</div>
<div class="container">
<div class="child">I'm the Child</div>
<div class="other-stuff">I'm the Other Stuff</div>
</div>
</div>
I have three divs in the following manner: outermost div then inside it the middle div and then inside it the innermost div.
like this ...
.outer{
width: 100%;
height: 110vh;
background-color: red;
overflow: hidden;
}
.middle{
width: 100%;
height: 100vh;
border: 3px solid black;
overflow: scroll;
}
.inner{
width: 100%;
height: 102%;
background-color: cyan;
}
<div class="outer">
<div class="middle">
<div class="inner"></div>
</div>
</div>
what I want to know is, when I scroll inside the innermost div then it scrolls and if it is scrolled completely then it stops, and then when I stop the scroll of the mouse wheel and start again then the window scrolls ...But what I want is, to scroll in one go.. like if I'm scrolling the inner div when it is completely scrolled then the window scroll should start immediately without actually stopping the mouse wheel and starting again.
Is it even possible?
Give this a try. I wouldn't recommend using view height especially if you want scroll to function as intended.
html,
body {
height: 100%;
width: 100%;
}
.outer {
width: 100%;
height: 100%;
background-color: red;
overflow: hidden;
}
.middle {
width: 100%;
height: 100%;
border: 3px solid black;
overflow: scroll;
}
.inner {
width: 100%;
height: 100%;
background-color: cyan;
}
<div class="outer">
<div class="middle">
<div class="inner"></div>
</div>
</div>
I'm trying to position a "seeker" in a div element that has other elements in it. I want the seeker to be able to move on top of the content div, without pushing other content around, while also following the scrollbar. The area is resizable so I can't use constant width/height. Like the seeker in a video editor would.
This is what I've gotten so far
#container {
width: 200px;
height:100px;
background-color: gray;
overflow: scroll;
}
#content {
width: 300px;
height: 120px;
}
#box {
width: 40px;
height: 40px;
background-color: green;
}
#seekerContainer {
position: relative;
width: 100%;
height: 100%;
}
#seeker {
width: 4px;
height: 100%;
position: relative;
background-color: blue;
left: 10%;
}
<div id="container">
<div id="content">
<div id="seekerContainer">
<div id="seeker"></div>
</div>
<div id="box"></div>
</div>
</div>
And I've tried different combinations having the seekerContainer and seeker be position absolute/relative, but either the seeker wont follow the scrolling, or it extends the height of the div.
Any pointers to fix this?
I think this is what you are looking for:
.container {
width: 200px;
height: 100px;
background-color: gray;
overflow: scroll;
}
.content {
height: 500px;
position: relative;
}
.box {
width: 40px;
height: 40px;
background-color: green;
}
.seeker {
width: 4px;
height: 100%;
position: absolute;
background-color: blue;
left: 10%;
top: 0;
}
<div class="container">
<div class="content">
<div class="seeker"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Also, you don't want to put id on every element and use id for styling. You should use classes for that. ID of the element has to be unique for the page so it's not very useful when you need to apply the same styling to more elements.
I want to make a dropdown list looking under the list but it automatically creates scroll bar and inproper height for the list.
Though there are 5 elements on the list, it just shows one and the other ones are not shown because of the inproper height, I guess.
This is the css codes;
NOTE: Please inform me if anything is needed
The containing element probably has the default value (overflow: auto), so it will create a scroll bar when the content is bigger than it's size.
Just make sure your containing element has overflow: visible.
.div1 {
overflow: hidden;
}
.div2 {
overflow: visible;
}
.div3 {
overflow: scroll;
}
.div4 {
overflow: auto;
}
.inner {
height: 200px;
width: 50px;
background-color: red;
color: white;
}
body {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.space {
width: 80px;
height: 100px;
border: 1px solid black;
background-color: blue;
}
<div class="space div1">
<div class="inner">hidden</div>
</div>
<div class="space div2">
<div class="inner">visible</div>
</div>
<div class="space div3">
<div class="inner">scroll</div>
</div>
<div class="space div4">
<div class="inner">auto</div>
</div>
I want to hide that red marked scrolling element, but scroll bar should be the there !
<div class="parent">
<div class="child">
</div>
</div>
Css
.parent{
position: relative;
width: 300px;
height: 150px;
border: 1px solid black;
overflow: hidden;}
.child{
height: 150px;
width: 318px;
overflow-y: scroll;
}
apply css accordingly
Check it on following link
http://jsfiddle.net/nikkirs/c11khcak/3/