Following a previous question - Overflow issue in a fixed position sidebar - I have a list of links with a fixed div showing on li:hover
http://codepen.io/anon/pen/RNxyVP
This works great on all the windows browsers - Chrome, Firefox, Explorer, Opera, and old windows Safari. However on the latest edition of Safari (on Mac) and by extension on iOS the fixed div reveal stays in the grandfather fixed div, and doesn't float over the rest of the page. This also happens on android chrome.
Is there a way to have the fixed div float over the page, and not be restricted to the wrapper - on these browsers?
The other factors such as the wrapper div being scrollable (currently through overflow-x: hidden;) would also have to be kept/
because you set your sidebar-wrapper 'position:fixed', in Mac's webkit browser, if an fixed element has a fixed overflow:hidden parent, this element will be hidden.
please check this
#sidebar-wrapper {
width:200px;
background-color:#396DA5;
position:fixed;
height: 100%;
}
#menu ul ul {
display: none;
list-style: none;
}
#menu ul li:hover > ul
{
display: block;
}
#menu ul ul {
padding:50px;
position: absolute;
left: 150px;
background:#f00;
margin-top:-20px;
}
Related
I'm having a weird rendering issue on iOS devices
this is the website -
http://dev.makeyourownbottle.com
Relevant CSS:
.bottle-images {
display: inline-flex;
}
.bottle-images img {
width: auto;
}
.bottle img {
width: 100%;
padding: 0;
position: relative;
}
.bottle p {
position: absolute;
font-family: 'Caveat', cursive;
font-size: 30px;
top: 19%;
color: #006699;
font-weight: 700;
padding-left: 2px;
margin-top: 2.4em;
}
.bottle {
margin: 0 2px;
}
Relevant HTML:
<div class="bottle-images"><span class="bottle"><img src="/images/first-b.png"><p>1</p></span><span class="bottle"><img src="/images/second-b.png"><p>5</p></span><span class="bottle"><img src="/images/third-b.png"><p>7</p></span></div>
I'm having a problem where the numbers that rendered in front of the bottle images are not consistently showing on top of the bottles
I've tested various phone models through browser stack and it's definitely an iOS issue , it's not happening on android, it's not happening on windows or MacOS
Note that the website was tested in apple stores using different devices mid-late July 2018 - where we didn't have this issue at all - it just suddenly propped up now
On the iPhone X - it sometimes fixes itself after the CSS loads
(after about 1-2 seconds) , sometimes it doesn't. - as shown in the image, I just loaded the site and it rendered correctly, other times it does not.
As shown in the image for iPhone 8, the numbers are out of place on initial load, on iOS Chrome, moving up and down the screen immediately corrects it, on Safari it does not - this is consistent for iOS 7,8,8 Plus that I have tested - iPhone X sometimes displays correctly on initial load.
Opening Dev tools on browser stack immediately fixes it - so I don't know what to check ( as soon as tools window opens, it aligns properly )
Sometimes clicking refresh on the browser fixes it for subsequent re-loads, other times it keeps messing the numbers on each reload
I have moved the CSS around, moved the classes to the top of the CSS to see if that has any impact, it didn't change anything
I cannot determine the cause for it because as soon as I open developer tools , it just fixes itself - seems like some internal rendering bug in iOS ?
I'm unable to determine the cause / reason for this - anyone has any suggestions ?
I think this might be caused because of the inline-flex option.
Try this:
.bottle-images {
/* display: -ms-inline-flexbox; */
/* display: inline-flex; */
width: 84px;
margin: auto;
}
.bottle-images:after {
content: ' ';
display: block;
clear: both;
}
.bottle {
margin: 0 2px;
float: left;
}
Just update your css like this and let me know if this worked. Hope this helps.
My issue only happens on iOs (on both Safari and Opera), works fine in Chrome, Firefox and even Opera on Windows and Android.
I have the following situation:
<div class="flex-box-parent">
<div class="group01">
<div class="fixed-element">
This element has a position: fixed and z-index: 100
</div>
</div>
<div class="group02">
On iOS, fixed-element does not cover this part
</div>
</div>
I need the fixed element to appear above everything else on my website, as it is a modal with a full-screen backdrop.
Unfortunately, all the content of fixed-element that is bigger than group01is not displayed.
Neither group01 or group02 have a z-index specified. It works perfectly fine on Windows/Android, but on iOS, group02 is always above.
CSS
.flex-box-parent{
position: relative;
display: flex;
flex-direction: column;
}
.fixed-element{
z-index: 100;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
.group01{
position: relative;
flex: 1;
overflow: auto;
}
.group02{
display: flex;
flex-direction: column;
position: relative;
}
MORE INFO #1
As a test, I removed every single reference to z-index in my css, except for the fixed-element. Still not working on iOs (working on everything else)
MORE INFO #2
It seems the problem is that fixed-element cannot go outside the border of its parent on iOS.
It seemed to me that group02 was above fixed-element, but in fact, fixed-element simply cannot go full screen if it means getting bigger than group01. I am still looking for a solution to this issue.
In html you shared div tag is not closed for class .fixed-element. Please fix that and check
I'm working on embedding a very quick survey on my site and after page one, there is just description text for page 2 and 3. So how do I a) make the iframe responsive to the number of questions or b) get rid the other ugly gray bottom when the description text appears? I don't mind the scroll bar but in a dream scenario what I would like is no scoll bar - all 4 questions fit on the page and then the continue button on page 2 shows up with no grey box.
The iframe code I have on the page is:
with the following CSS:
<style>
.survey-container {
position: relative;
}
iframe {
border-style: none;
background-color:transparent;
min-height: 400px;
max-height: 600px;
overflow: hidden;
}
</style>
http://i.stack.imgur.com/WP1dZ.jpg
Using the embed script provided by Surveymonkey, I was able to make the embedded survey width:100% by nullifying the max-width property through CSS:
.smcx-embed {
max-width: none !important;
}
.smcx-embed iframe {
max-width: none !important;
}
Why does this jsfiddle page appear so far zoomed out when viewed on Mobile Safari on iOS 6.1? I'd expect it to take up the entire width, but it zooms way out instead. I have pretty boring CSS as follows, but I'm missing something.
.foo {
overflow: auto;
overflow-y: hidden;
height: 100px;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.foo ul li {
display: inline-block;
border: 1px blue solid;
max-width: 100px;
overflow: auto;
white-space: normal;
}
Add
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
inside the <head>
Working example (standalone)
Working example (jsfiddle)
Background: By default, mobile Safari displays pages with a canvas width of 980px (see this answer), the 'width' parameter overrides this and 'device-width' automatically sets it to whatever size (or portrait/landscape orientation) you're using. It was initially introduced by Apple but pretty much everything now supports it.
For this to work in jsFiddle, you need to add the meta tag to the CSS pane but wrap it in a </style> / <style type="text/css"> tags so it appears in the head. Also, the ordinary embed sharing link won't work, as everything is wrapped in an iframe, so you need to break out the contents of that directly: .../show/light/
(If you have a Mac, the iOS Simulator is handy for this kind of thing - requires installing XCode. Also Chrome Dev Tools > Settings (cog icon, bottom right) > Overrides > Device Metrics)
I am using jQuery Autocomplete on my jQUeryMobile application. It works perfect. Now I'm trying to show vertical scrollbar to scroll through the list of looked up items. The scrollbar shows up on desktop safari, but not on iPAD safari. my css looks like this:
<style>
.ui-autocomplete
{
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
max-width:70%;
}
</style>
Can someone help, thanks!
Add this to your style:
-webkit-overflow-scrolling: touch;
Put the above style in CSS document of class body.....