Problem
I have two divs with overflow scrollbars. Both have the same width. Still, they get different width.
It's a CSS problem but I added some JS. It makes it possible to drag the bottom scrollbar to affect the top scrollbar.
I only expect it to work with webkit browsers like Chrome.
Jsfiddle: http://jsfiddle.net/jedrga5w/3/
HTML
<div class="mmt">
<div class="mmt-scrollbar">
<div></div>
</div>
<div class="mmt-cropped">
<div>Content2</div>
</div>
</div>
CSS
.mmt-cropped {
height: 200px;
background: #eee;
}
.mmt-cropped,
.mmt-scrollbar {
overflow-x: auto;
width: 532px;
}
.mmt-cropped div,
.mmt-scrollbar div {
width: 770px;
}
.mmt-cropped::-webkit-scrollbar,
.mmt-scrollbar::-webkit-scrollbar {
-webkit-appearance: none;
}
.mmt-cropped::-webkit-scrollbar:horizontal,
.mmt-scrollbar::-webkit-scrollbar:horizontal {
height: 11px;
}
.mmt-cropped::-webkit-scrollbar-thumb,
.mmt-scrollbar::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white;
background-color: rgba(0, 0, 0, .2);
}
.mmt-cropped::-webkit-scrollbar-track,
.mmt-scrollbar::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
.mmt-scrollbar,
.mmt-scrollbar div {
height: 11px;
}
JS - Not required
Just to connect the bottom scroll to the top scoll. Not required but it makes it easier to spot the problem.
jQuery(window).load(function($) {
$('.mmt-cropped').scroll(function(){
$('.mmt-scrollbar').scrollLeft( $('.mmt-cropped').scrollLeft() );
});
});
Demo
css
.mmt-scrollbar,
.mmt-scrollbar div {
height: 11px;
overflow-y:hidden; /* add this as there is a vertical scrollbar bar which is occupying some space */
}
you can find the scrollbar by giving some height to (Demo)
.mmt-scrollbar,
.mmt-scrollbar div {
height: 100px;
}
Notice: the vertical scrollbar to the right of .mmt-scrollbar div after giving it some height.
Related
I want to hide my vertical scrollbar, but still be able to scroll both vertically and horizontally.
I have tried using
overflow-y: hidden; overflow-x: scroll;
But it removes the ability to scroll vertically.
I have tried styling the scrollbar with
html .example-container {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
and
html .example-container::-webkit-scrollbar { /* WebKit */
width: 4;
height: 0;
}
It makes both scrollbars hidden, and it is important for the horizontal scrollbar to be visible.
Example of all three methods tried:
https://stackblitz.com/edit/angular-gyq9ub
If you stylize your horizontal scrollbar then your vertical scrollbar somehow disappears and you are still able to scroll vertically as you asked. But it's unclear to me why it works
.example-container::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.example-container::-webkit-scrollbar-thumb:horizontal {
background: #a1a1a1;
border-radius: 3px;
background-clip: padding-box;
}
/* Track */
.example-container::-webkit-scrollbar-track:horizontal {
background-color: #dbdbdb;
border-radius: 3px;
background-clip: padding-box;
}
Create a wrapper div for your inner div and then set inner div overflow = auto. And the outer div overflow to hidden.
For example;
<div class="wrapper-div">
<div class="example-container">
<p class="content">
Start editing to see some magic happen :)
</p>
---
</div>
</div>
CSS:
.example-container {
height: 100px;
overflow: auto;
max-height: 100%;
margin-right: -100px;
padding-right: 100px;
}
.wrapper-div {
overflow: hidden;
}
Thats it! Please check this answer for better understanding.
I have a banner that I am trying to add a text to the bottom portion of it. I got the text centered and how I want to be, but when I want to move the text to the bottom of the page, the picture moves too.
HTML
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
CSS
.art-banner { background-image: url("graphics/art_banner.jpg"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { text-align: center; padding-top: 10px; font-family: "Bender";}
.art-banner-text span { color: #eb6623; }
JSFiddle
Presuming you're trying to use margin-top to move the art-banner-text down, you're running into the collapsing margin problem: the margin is shared between the inner div and the outer one, meaning the outer one gets the margin too.
So the solution is not to use margins, but position:relative for the outer div and position:absolute for the inner one, with bottom:0 to position it at the bottom of the outer one.
.art-banner {
background-image: url("https://photos-2.dropbox.com/t/2/AAAtS4UXAnyf0x4vH0ty5lE779vFfS2smjUWyJFsFwnMPg/12/18401260/jpeg/32x32/1/1437685200/0/2/art_banner.jpg/COyP4wggASACIAMgBCAFIAYgBygBKAIoBw/L9JVtmzn-g-n3CMbDujkZkXxzuwR9ntwvtEoBLNl_4g?size=1024x768&size_mode=2");
height: 150px;
position: relative;
}
.art-banner-text {
width: 940px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
}
.art-banner-text h2 {
text-align: center;
padding-top: 10px;
font-family: "Bender";
margin: 0;
}
.art-banner-text span {
color: #eb6623;
}
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
(Note that I had to change the URI for the image, to make it show up. What you had was the URI for the dropbox page that displays the image, not the image itself.)
You need to have the outer container ( which is .art-banner-text) set to position:relative; and set the inner div or element to absolute to place it where you want. https://jsfiddle.net/2ryrnxz7/
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
css
.art-banner { background-image: url("https://www.dropbox.com/s/migdkqlmse8ym0t/art_banner.jpg?dl=0"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; position: relative; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { font-family: "Bender"; margin: auto 0; padding:0px; bottom:0px; position:absolute; left:35%}
.art-banner-text span { color: #eb6623; }
You can set the left to whatever % you want to push towards the middle. This won't work for mobile as it is set and won't reposition itself with the page. But if you just need it to work for desktop, this is how to do it.
It sounds like you might want to use CSS positioning. For example .art-banner {position: relative;} .art-banner-text {position: absolute;} You can then position, move, or animate the text in the inner div without affecting the outer div.
Is there any solution how to avoid 1px "border" issue gap in Chrome and Firefox ? I have a grid by 4 columns each column is 25% inside is image that is fitting 100% width of parent div. When you changing a viewport and resizing browser sometimes you see on certain size 1px white gap. Probably it's because of wrong calculation percentage by browser. Did somebody solve this issue?
What you can do is put a wrapper around the elements inside of the div and set the width to 101% and then on the parent div (the original wrapper) you can set it to overflow: hidden like so:
HTML
<div class="big-poppa"> <!-- Original Wrapper -->
<div class="little-momma"> <!-- New Wrapper -->
<div class="this-little-piggie market"></div>
<div class="this-little-piggie home"></div>
<div class="this-little-piggie roast-beef"></div>
<div class="this-little-piggie none"></div>
</div>
</div>
CSS
.big-poppa { width: 100%; border: 1px solid black; overflow: hidden; }
.little-momma { width: 101%; }
.this-little-piggie { width: 25%; float: left; height: 40px; }
.market { background: #eee; }
.home { background: #999; }
.roast-beef { background: #666; }
.none { background: #333; }
Here is the fiddle: http://jsfiddle.net/YLJmE/
I have two div tags parent and child. child tag has position fixed with width 100%. Parent has padding of 10px as show in this jsfiddle code. The issue is that when I give width of 100% to child tag then its right side moves out of parent div tag. I know that is because it has padding. One way to solve this is to give child tag a width of 90%. But is there a better way than this so that child tag appears exactly inside parent tag?
UPDATE
I want to keep position: fixed for child tag
.parent {
height: 300px;
padding: 10px;
border: 1px solid red;
}
.child {
position: fixed;
height: 100px; width: 100%;
border: 1px solid black;
}
jsfiddle.net/q4ffs/3/ DEMO
If you are comfortable with a little use of jQuery then this should fix your issue. CSS still have some limitations but this little line of javascript may serve you well.
$(function (){
$('.child').each(function (){
$(this).css('width', $(this).parent('div').width());
})
});
Thanks
Place the absolute div inside another div which is placed inside the parent div.
<div class="parent">
<div class="newDiv">
<div class="child">
</div>
</div>
</div>
The other div will get the position:relative;.
.newDiv
{
position:relative;
height:100%;
}
.child {
position: absolute;
height: 100px; left:0; right:0;
border: 1px solid black;
}
DEMO
Make the Postion to relative see the output
.parent {
height: 300px;
padding: 10px;
border: 1px solid red;
}
.child {
position: relative;
height: 100px; width: 100%;
border: 1px solid black;
}
You can also adjust its padding if padding is the problem
give class padding to child
and append the code
.padding /*for box padding ie padding inside the box*/
{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
it dont let the child to maximize her width with padding
Hey you can use width is 100vw and set margin-left:-10px ; on the child.
Cheers
My css looks like this
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
}
div#header {
background-color: #969696;
height: 80px;
}
div#mid-bar {
background: url(images/home.jpg) left no-repeat #6f6565;
height: 200px;
}
#searchbox {
background-color: #c1c1c1;
width: 200px;
height: 180px;
margin: 10px 20px 10px 350px;
}
and my html
<div id="header">
</div>
<div id="mid-bar">
<div id="searchbox">
</div>
</div>
you can see the problem. the space between header and mid-bar which is created due to the margin given in the searchbox div.
i want this margin for searchbox within the mid-bar div... and not from header div.
I's a known bug: would use padding instead of margin. so:
div#mid-bar {
background: url(images/home.jpg) left no-repeat #6f6565;
height: 200px;
padding-top: 10px;
}
#searchbox {
background-color: #c1c1c1;
width: 200px;
height: 180px;
margin: 0px 20px 10px 350px;
}
Give padding to #mid-bar instead of searchbox margin
I have seen this happen when you don't give margins to parents and the first element, even a child that you give margin to, causes gaps in the parents by creating margins. One way I've overcome this is by using paddings on the parent containers instead of margins.
See your example here with paddings: http://jsbin.com/ememi3
If you are intent on using margins, try setting margin:0; in #mid-bar. Otherwise give #mid-bar a padding-top:10px; and remove top margin from #searchbox.
Everyone seems to agree on this one, padding will work much better then margins will. I looked into it a little and it seems Pixeline is right, it's a known bug in Firefox, hopefully they will fix it in 4.