I am using very wide shapes as the background on my website (to create a certain visual effect) and am not able to prevent the horizontal scrolling. Is there any other way to achieve that besides the overflow property which doesn't seem to work for me? http://tinyurl.com/kahfjha
in your css #contact-shape and #design-shape Are width:5000px remove that and it works fine.
#design-shape {
background: none repeat scroll 0 0 #e98e82;
position: absolute;
transform: rotate(-45deg);
height: 1040px;
top: 1200px;
left: 0;
width: 100%;
z-index: 6;
}
#contact-shape {
background: none repeat scroll 0 0 #000;
position: absolute;
transform: rotate(-45deg);
height: 1460px;
top: 2757px;
left: 0;
width: 100%;
z-index: 1;
}
Update: I changed the css a bit now its keeping the backgrounds in place as well.
Use overflow-x: hidden instead of overflow: hidden on the body element and it will work:
body {
overflow-x: hidden;
}
Related
I am attempting to make a coloured "blob" with a parallax scroll in the background. This is my current CSS, and the blob (an empty with class name "blob"), remains fixed as you scroll down the page:
.blob1 {
background: #FFFAD1;
border-radius:40%;
transform: rotate(-130deg);
width:40%;
top:10%;
right: -20%;
position: fixed;
height: 20em;
overflow: scroll;
}
I have no idea where that little box/border at the end is coming from though. Has anyone seen something like this before?
Bonus round: I have got the scrolling with the page (position: fixed), but what I really want is for it to slowly move upwards as I scroll down. How might I achieve something like that?
Code
.blob1 {
background: #FFFAD1;
border-radius: 40%;
transform: rotate(-130deg);
width: 40%;
top: 40%;
right: -20%;
position: fixed;
height: 20em;
overflow: scroll;
}
<div class="blob1"></div>
If you change overflow: scroll; to overflow: auto; or : hidden or remove it completly. then the border will disappear.
To get rid of the scrollbars, you need to hide the overflow with overflow: hidden;.
When you use position:fixed; the element stays fixed without consuming space.
So I added 2 other divs. The first is bringing some space between the two, the second is a background that gets over blob1. To do that, you need to play with z-index. You need to position:relative; the other div and since blob has the default z-index you can assign at the background div a z-index: 1;.
.blob1 {
background: #FFFAD1;
border-radius: 40%;
transform: rotate(-130deg);
width: 20%;
top: 20%;
right: 50%;
position: fixed;
height: 10em;
overflow: hidden;
}
.spacer {
min-height: 300px;
}
.get-over-blob {
min-height: 600px;
background: darkorange;
position: relative;
z-index: 1;
}
<div class="blob1"></div>
<div class="spacer"></div>
<div class="get-over-blob"></div>
I formatted blob1 values for a better representation, be sure to change them back to yours.
I have a fixed position tooltip that works in all browsers except Safari. In safari, the tooltip is being cut off by the parent's container which has properties of overflow: scroll
Any ideas on how I can fix this?
This is the screenshot of how it's supposed to look like:
This is how it looks on safari:
These are the properties for the tooltip:
.announcement {
position: fixed;
width: 3.1rem;
height: 3.1rem;
background-image: url("./../assets/icons/announcement-alert-right.svg");
background-size: cover;
margin: 0 0 0 -2.8rem;
z-index: 1;
&:hover {
margin: -3.6rem 0 0 -14.8rem;
width: 15.3rem;
height: 6.7rem;
background-image: url("./../assets/icons/announcement-profile.svg");
}
#media screen and (max-width: $desktop) {
display: none;
}
}
This is the parent's perspective:
.profile {
position: fixed;
z-index: map-get($zindex, sidebar);
right: 0;
width: 15%;
height: 100%;
transition: 0.5s;
padding: 3rem;
box-shadow: 0 1.5rem 3rem $color-shadow;
background-color: $color-white;
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
I've tried several different fixes such as:
-webkit-transform: translateZ(0); transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); z-index:9999 !important) and none of them works.
Any help would be much appreciated!
Thanks!
Without knowing your html code i speculated that the parent container and the tool tip element are not at the same level so even if you increase z-index value it won't change.
Place the element at the same level that would work.Something like this
<parent-container>
//parent content
</parent-container>
<tooltip-element>
//tooltip-content
</tooltip-element> //same level
Check the parents' properties and the overlapping element's properties. Some of them has a position or a z index value that is blocking it from your desired behavior
I bet is that maybe you will need to split up the position: fixed and overflow tags across two nested div classes in Safari? I know this could be a bit annoying and inconvenient, but then that way - I don't think that the z-index will be blocked off...
HTML:
<div class="wrapper1">
<div class="wrapper2">
<div class="inner">
/* Stuff inside here */
</div>
</div>
</div>
CSS:
.wrapper {
...
position: fixed;
...
}
.wrapper2 {
...
overflow: hidden;
position: absolute;
...
}
I wouldn't have thought that the overflow: scroll would affect any of the z-index properties but we'll see. Good luck on finding a solution, hopefully I've somewhat helped!
I'm creating a horizontally scrolling div of music albums and want to have a fade on the right hand side of the div to help convey that the list scrolls horizontally.
I've almost cracked it, but can't quite understand why I can't get it exactly the way I want.
Here is a codepen of what I have so far... The fade (red for the sake of the example) works perfectly if the position is set to absolute but fails when set to fixed - which is what I need.
CodePen link
Attach the fade to the .artist__media not to .content.
Like this:
.artist__media {
margin-top: 50px;
position: relative;
&:after {
content: "";
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 15px;
pointer-events: none;
background-image: linear-gradient(to right, rgba(255,255,255,0), red 85%);
width: 15%;
}
.content {
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
}
See the fiddle.
Is that what you wanted?
How can I extend background color outside div?
My code:
.content-right{
background-color: blue;
padding: 40px;
position: relative;
}
.content-right:after{
position: absolute;
top: 0;
right: calc(1px - 100%);
width: 100%;
height: 100%;
background-color: red;
content: "";
}
jsfiddle
The problem is that I'm getting scroll (horizontal) and I don't want that... What I want is that red part to be extended after that black so it reaches the edge of the screen on any resolution but without scrolling... If I add overflow: hidden, it doesn't solve the problem.
Any ideas?
Thanks.
Move the pseudo to the left, and make the width of this 1000px.
Set a shadow on it to the right, with 1000px offset, and color red
.main{
background-color: #000;
height: 500px;
}
.content-right{
background-color: blue;
padding: 10px;
position: relative;
height: 100px;
}
.content-right:after{
position: absolute;
top: 0;
right: 0px;
width: 1000px;
height: 100%;
background-color: transparent;
box-shadow: 1000px 0px red;
content: "";
z-index: -1;
}
fiddle
Note: now the pseudo element will be probably outside of bounds, but to the left. Elements going outside of bounds to the left or upper side do not generate scrollbars.
On the other side, the shadow extends to the right. But the shadow is not taking into account when computing the layout, so this won't generate scrollbars either.
Quick Fix, but essentially I made the document have a overflow-x value of hidden so it will NEVER produce a horizontal scroll bar. If this is a problem, I can try to think of a better solution, but this is what I have so far.
JSFiddle: https://jsfiddle.net/m4f4x3bt/3/
html, body{
overflow-x: hidden;
}
I have setup a fiddle to reproduce this issue. Only in android native browser, the scroll is working for the element beneath absolute positioned element. It doesn't seem to respect the z-index for scrolling.
html, body {
height: 100%;
overflow: hidden;
}
#scroll {
height: 100%;
overflow: scroll;
}
.overlay {
height: 100%;
width: 100%;
background-color: #333;
opacity: .4;
position: absolute;
z-index: 4;
left: 0;
top: 0;
}
Code: http://jsfiddle.net/s4vPV/5/
Result: http://fiddle.jshell.net/s4vPV/5/show/
Give your #scroll div a position:relative, and set the z-index:3 or something less, so that the browser respects what is on top of what.
I made some minor changes to your CSS, which solved the issue you are running into:
On your #scroll element, you are not defining the positioning, but you are defining the position on your .overlay element with absolute. This, plus apply the z-index property with a value of 4 to the .overlay element causes the overlay to stack on top of the #scroll element. Since the overlay has a height and width of 100%, you are causing the #scroll element to become inaccessible, due to the .overlay element covering it entirely.
#scroll {
height: 100%;
overflow: scroll;
}
.overlay {
height: 100%;
width: 100%;
background-color: #333;
opacity: .4;
position: absolute;
z-index: 4;
left: 0;
top: 0;
}
Basically, if the browser were sheets of paper that were perfectly stacked upon one another, you wouldn't be able to read "access" at the bottom of the stack.
If you are trying to style your scroll bars, I would recommend looking into styling them directly. If not, all you have to do is place a position: relative on the #scroll and a z-index: 5; which will solve this issue.
Here is a jsfiddle with the solution: http://jsfiddle.net/dmidify/s4vPV/10/