I have a modal div on my page, which grays out the background. If I set the height of overlay div to 100%, it works fine on IE (desktop), but on iPad Safari, the complete height is not grayed out. What exactly is the issue? Is it to do with fixed position/viewport? Please help. Below is the CSS for the same;
#TB_overlay {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
.TB_overlayBG {
background-color: #000000;
opacity: 0.4;
}
Hi the easiest way and that's how I do it is to give maximum height width to the overlay. Like:
.overlay{
position: fixed;
display: none;
top: 0;
left: 0;
z-index: 99;
width: 10000px;
height: 10000px;
opacity: 0.5;
background: #ccc;
}
You can put this at the bottom i.e. before body tag and change its display to block whenever you want to gray out the background. Obviously whatever you want to show on top of it must have a greater z-index. Hope this helps. Let me know if you don't understand.
The device height and width need to be set, you can use iPad specific styles to achieve this, so that it doesn't break your other browsers.
Reference: http://css-tricks.com/snippets/css/ipad-specific-css/
Without seeing the it, its hard to say exactly what the problem is but try using the above css to apply specific css to iPad Safari.
Your issues:
Most mobile browsers ignore position:fixed
Window sizes and viewport sizes are handled differently, so the position:absolute;... trick doesn't work also -- you have to dynamically size your div in script by reading the size of the viewport, or make it large enough to cover all potential page sizes
Related
There are multiple places on our website where we are using .svg's with the background image rule to create shapes.
For example:
&:before {
bottom: auto;
height: 4rem;
content:'';
display: block;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-image: url('img/layout/press-before.svg');
background-size: 100%;
background-repeat: no-repeat;
#media screen and (max-width: $viewport-xs) {
height: 2rem;
}
#media screen and (max-width: $viewport-sm) {
top: -.1rem;
}
}
This works well on desktop on all resolutions.
But on several mobile devices using chrome there is an issue when the adjected block has the same color.
There seems to be 1 or several pixels which are being interpolated incorrectly which leads to an edge of the underlying element showing.
Things I've tried:
+ use png, jpg instead of .svg to see if the problem relates to the rasterisation of .svg (problem persisted without difference)
+ moving the image up sligthly (line remained)
+ making it slightly larger (line remained)
For reference, see the following images.
issue example 1
issue example 2
Any suggestions are greatly appreciated!
The solution for me was to move the image up a little by adding top: -1px to the pseudo-element.
I tried this before I posted this question here and it didn't work.
This was related to the fact that the parent of the pseudo element was using overflow-x: hidden and because of this the overflow-y was automatically also hidden (I'm adding this for anyone having a similar issue).
Of course this means I need to tweak the shape of the svg's a little because it has moved up 1px.
I have followed the instructions at floating-div-over-an-image, and while things are working ok, I am trying to better control the behavior of the search box and the button. You can see the page I am working on here
There is a search box on the header image towards the upper right. The CSS for the search box div as follows
.search-box{
z-index: 500;
width: 50%;
border: 0px none;
top: 0px;
float: right;
left: 40%;
position: absolute !important;
}
You'll see that there is a search button to the right of the search box. When the browser window is made narrower, that search button jumps below, even when there is space to the right. I am trying to force that button to stay to the right.
Any tips on how you would achieve the behavior I described? I have tried variations of the float property in the CSS above, but that is not getting me what I need. Maybe I am not applying the correct CSS selector?
Regards
Just change your .search-box css for property width:100%
It is WORKING
.search-box {
width:100%;
}
let me know if it is helpful
In class (.search-box) the width was 40% so it was not getting enough room for the search box and button to display in line.
You Just need to replace the below css and it will work in all resolution.
.search-box{
border: 0 none;
position: absolute !important;
text-align: right;
width: 100%;
z-index: 500;
}
The #k2ModuleBox125 div has a 40% width which is causing the search button to wrap to the next line when the search bar increases in size.
You can easily fix this by looking into the style rules of the #k2ModuleBox125 div.
this is happening because .search-box has its width in % give it minimal width, and position it to the right instead of left, and you should be just fine.
.search-box {
min-width:XXpx;
right: 0;
left: auto;
}
The title says it all. I have an image with height: 100% inside each of a couple display: inline-block <li> elements. When their container is position: static. All is peachy. But when I change it to position: absolute/fixed, the <li> elements get width of the original image, not the scaled down width even though the image itself has correct dimensions.
This behaves as expected in Chrome, but breaks in Firefox.
Did anyone encounter this behaviour? More importantly, is it possible to fix it without JS?
Background: I am making a responsive position: fixed gallery that fits the screen with image thumbnails covering bottom 20% of the viewport.
Isolated Demo (click the button to toggle position: static/fixed ):
http://jsfiddle.net/TomasReichmann/c93Xk/
Whole gallery
http://jsfiddle.net/TomasReichmann/c93Xk/2/
I finally got it working. It seems that when you declare something with
Position:fixed, left: 0; top: 0; right: 0; bottom: 0;
Only chrome recognizes that as "explicitly defined dimensions". Once I added height: 100%; Other browsers caught up. Fortunately the height 100% didn't break the layout even when the content underneath overflowed viewport.
http://jsfiddle.net/c93Xk/3/
It still breaks uniformily across all browsers when you try to resize the window. I guess, I'll have to calculate the widths by hand with JS
DEMO
Check the demo, is that what you are looking for?
I have added these 2 lines of css to make it work like that:
/* Keep Position fixed at bottom */
#gallery:not(.toggle) { width: 100%; bottom: 0; top: auto; height: 20%; background: transparent; }
#gallery:not(.toggle) .gallery-thumbs{ height: 100%; }
I’m embedding a youtube video via the iFrame API.
The video itself is square–shaped and it’s width and height depend on the container’s size (a square as well, with fluid dimensions) — I’m using CSS to achieve that.
Everything works more or less okay, but in the beginning and the end of the video (before starting and after stopping), the content is displayed with reduced width, revealing black side bars:
Any idea why this happens or what to do about it? Has someone made a video with irregular shape work in context of a responsive layout?
Update
It seems that setting the width and height to 101% helps. Not sure yet how consistently, though.
<div class="video_iframe_wr">
<iframe/>
</div>
.video_iframe_wr {
height: 0;
padding-bottom: 100%; /* that makes height = width */
position: relative;
}
.video_iframe_wr > iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width:100%;
height:100%;
}
Is there anyway to make a a child element 100% width of the screen while it's parent is only 50%?
For example, I need to make the black footer for this site extend the full width of the screen while maintaining the integrity of the rest of the site. msdnw.com/
I created my custom div of #blackback and have tried various ways to make it work and just can't. Any ideas? P.S. Yes I've already tried placing the div below the footer code as apposed to wrapping the footer. But perhaps the code I was using was not working how I needed.
Thanks for any help :)
Update your #blackback css to:
#blackback {
width: 100%;
height: 300px;
background-color: #000;
position: absolute;
left: 0;
}
should do it.
You want to go and use Absolute positioning:
.child {
left: 0;
right: 0;
position: absolute;
}
hope that helps