I'm working on an iOS/PhoneGap project. I have a weird overlap issue in iOS (screenshot from iPad):
The "Select Status" popover is position: absolute, z-index: 35. The website link is doesn't have a position specified (so static) and no z-index specified.
It makes no matter if the address link is random text with no link, or a link (as captured), it still happens.
Here's what it looks like in Chrome (as expected) (taken on a retina Mac, so it's huge):
I have tried tweaking the z-indexes all day long in Safari's console on the iPad with no effect. It does not seem to be a "simple" z-index issue. So please don't just say "adjust z-index."
[edit] To be specific, I have tried setting the z-index of the popover to 5000 and the web address to -10 (giving it several different positions), and I have checked every ancestor of both elements to make sure none of them have z-indexes (and they didn't). I even tried giving a couple of the ancestors of the popover positions and z-indexes. Nothing ever changed. (And lest it is brought up, I did try changing colors and stuff, just to make sure my changes were making it to the page.)
Thanks.
So this has been plaguing our project for about a month, but I think I solved it. I haven't thoroughly tested the theory, but it has solved all of our issues so far.
If you remember way back in the days of IE7, there was a weird z-index bug, and the only way you could fix it was to find ancestors of the offending elements that were siblings and adjust their z-indexes.
For example, let's say this is my markup:
<div class="container">
<div class="header">
<button>
Click Me
<div class="dropdown">
<ul>
<li>This</li>
...
</ul>
</div>
</button>
</div>
<div class="content">
<div class="col1">...</div>
<div class="col2">...</div>
<div class="col3">www.example.com</div>
</div>
</div>
and like in my images, it looks correct in Chrome, but in iOS, www.example.com is above .dropdown.
Their ancestors that are siblings are .header and .content. If I adjust the z-index (while setting the position to relative, of course) of .header to be higher than .content, it fixed the issue.
Hope that makes sense and helps anything that might come to this page...
Related
CodePen https://codepen.io/david263/pen/zYNaoRQ shows an example simple home page layout that fits the browser viewport perfectly and centers some div content (choose Change View > Full Page View in CodePen to see the page clearly). But note the CSS style elements used to set div heights and the many Bootstrap 5 classes used to achieve vertical centering. It took several days to get this working, but it fails to use only simple Bootstrap 5 classes.
<header id=jumbo class="px-5 d-flex justify-content-center align-items-center bg-dark" style="height:70vh">
<div class="row col-12 text-center text-light">
<h1 class="font-weight-bold display-4">Vertically Centered Jumbo Content</h1>
<h3 class="font-weight-bold">A great starter layout for a landing page</h3>
</div>
</header>
My attempt to use the usual container, row, and col classes (see https://codepen.io/david263/full/xxgzLPj) failed to achieve the full height demonstrated by the first example.
<header id=jumbo class="container-fluid bg-dark">
<div class="h-50 row align-items-center col-12 text-center text-light">
<div class="col py-auto">
<h1 class="font-weight-bold display-4">Vertically Centered Jumbo Content</h1>
<h3 class="font-weight-bold">A great starter layout for a landing page</h3>
</div>
</div>
</header>
And these difficulties were encountered before adding a background image, which doesn't seem possible in Bootstrap 5 at all.
Don't get me wrong; I'm not opposed to using CSS when necessary. It's just that it's hard to tell exactly what the limits are for Bootstrap 5 so that custom CSS becomes necessary.
Many websites have a home page containing a large photo or video in the background, with text centered horizontally and vertically in the foreground, so this example represents something that is very often used. Surely such a frequent layout must be possible in Bootstrap 5.
Bootstrap isn't a silver bullet - its a framework (think of it as a chassis that you need build on top of). Bootstrap offers a few "helper" classes so that one does not need to add a whole bunch of repetitive CSS .. but that's all it can do. A clear understanding of CSS helps a lot too in using Bootstrap.
For example, the h-50 class is only height: 50%; in CSS. That's 50% of it's parent .. but your <header id="jumbo" does not have a height .. so 50% of what .. 0 .. is unknown?? (This may vary from browser to browser)
It's not clear what you're trying to achieve - but if you head on over to https://getbootstrap.com/docs/5.0/examples/ you'll see a whole bunch of examples and starting points for you to get to where you need to be. I think the Cover example is a good spot to land on. (Once there, right click and "view page source" ...)
When I access at this link from iOS the button with the symbol of the clock needs to be tapped twice in order to show the opening hours. This problem affects also the other buttons.
The first tap is handled like a mouseover event.
How can I fix this problem?
This is the code of the button with the clock:
<li><a href='#openinghours' data-toggle='tab' title='Opening hours'>
<span class='round-tabs four'><i class='fa fa-clock-o'></i></span>
</a></li>
<div class="tab-pane fade" id="openinghours">
<!--html content of the opening hours-->
</div>
On the desktop version of the website everything is working well.
I don't have enough rep to comment, but I would clear all your JS errors on your page before you start to debug this. You seem to have around 6 console errors and 2 warnings.
I've tried this in my Simulator, and it behaves as you say - however the W3C Bootstrap 4 Nav Tabs are fine. Therefore, I'd suggest looking at the difference (as well as seeing if any errors are interfering)
Link to w3 Schools:
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_nav_tabs_toggleable&stacked=h
I am using Framework7 for the first time in a Cordova iOS application and I really like the look of the UI but I have run into an issue where the page will not scroll vertically that I can not figure out. I have attempted to debug the code by replacing 'overflow:hidden' in places with 'overflow:auto' but that does not seem to resolve the issue.
Has anyone else run into this before? Any help wuold be greatly appreciated as I am really stumped on this one.
EDIT: I think I have narrowed down the issue to the overflow:hidden CSS attribute on the .view and .pages classes. If I remove that attribute the page scrolls, but now the header and footer are not attached to the top and bottom of the app.
I was able to figure out that the issue was caused by missing the page-content div. I added this div just after the data-page="index and it started to scroll.
Example:
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page"> /* this is what I was missing */
<div class="page-content">
/* content here */
</div>
</div>
</div>
I've been struggling with this one for a while. I'm using skrollr on a new site, and it is working great on the desktop. However, the content is getting cut off on ipad and android touch devices after turning the device from either landscape to portrait or vice versa. It is very similar to the problem described here : Skrollr cutoff on iPad, but the solution they recommended there is not fixing the problem for me.
This can sort of be fixed by adding padding to the bottom of the skrollr-body div, but the amount needed changes between portrait and landscape. The page seems to need a refresh when that is changed, so CSS and media queries aren't cutting it for me at the time.
Any ideas? Really digging Skrollr otherwise, but this is driving me crazy.
Here is the link for viewing :
http://rweststaging.com/stackoverflow/test.php
Here is the basic code :
// Top fixed section
<div id="animation"
data-0p="position:fixed; top:0%;"
data-100p="position:fixed; top:0%;"
data-120p="position:fixed; top:0%;"
data-210p="position:fixed; top:-130%; opacity:1; display:block;"
data-220p="opacity:0; display:none;"
>
</div>
//lower content section
<div id="skrollr-body"
style="position: absolute; top: 220%; width: 100%;"
data-top="" data-bottom=""
>
//content sections go here
</div> // end skrollr body
//skroller init
skroll = skrollr.init({
// mobileCheck:function(){return false;},
forceHeight:false,
smoothScrolling: true,
smoothScrollingDuration: 600
});
I've experienced issues putting by not having the #skrollr-body div independent (as this inherits a new function when detecting mobile).
So try wrapping your #skrollr-body div around your div with sections -
// Top fixed section ...
<div id="skrollr-body" style=""> // no styles
<div class="nonfixed" style="position:absolute; top:220%; width:100%;">
// all non-fixed elements
</div>
</div>
This is going to be fairly hard to explain, so I've put together a JsFiddle to help demonstrate. http://jsfiddle.net/j5TKr/
I've tried to include everything that I require without complicating it too much. The overall aim is to have a list of li's which can be selected (single click, ctrl-click, shift-click) or double-clicked to be opened. The selected li's can be dragged around (so that they can be moved into other folders). The JsFiddle doesn't have the li's being grouped together correctly, but I'm not worried about that as it is actually working correctly.
The problem that I have is that in Google Chrome and IE (and possibly other browsers - not Firefox) you can't drag the li's around using the image within the anchor. Or more specifically, in Chrome it doesn't drag until you release the mouse button. If I remove the image (the "This one works" text link) it works. If you drag using the image information below the actual anchor, it works as well.
I gather it's a problem to do with me wanting to be able to click and select li's without actually opening the links.
Sorry if this is all a bit confusing. I'll answer any questions that come up.
Here’s an HTML workaround effective in IE and Google Chrome.
Instead of marking your draggable elements up like so:
<div class="icon">
<a title="assets" href="[link]">
<img src="[image]" />
</a>
</div>
Mark them up like so:
<div
class="icon"
style="width: 90px; height: 90px; background: url('[image]')">
</div>
(You could, of course, separate the added CSS from the HTML.)