I made a webpage with a sticky header that works fine on a desktop but not so well on mobile. For example, on an iPhone, if you turn your phone on to landscape mode, safari's tool bar will cover my sticky header. Similarly opening a link to my page on instagram will result in the same issue (instagram header will cover mine).
Heres's the HTML
<div id="container">
<div id="infotab-mobile">
<div id=rosemenu>
<div id="rose">
<img class="inforose" id= "roseimg" src="images/rose.png">
</div>
</div>
</div>
and the CSS:
#infotab-mobile{
display: initial;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
position: fixed;
z-index: 999;
}
#rosemenu{
position: fixed;
width: 100%;
height: 20%;
display: inline-block;
}
#rose{
position: relative;
width: 100%;
vertical-align: top;
text-align: center;
background: rgba(232, 232, 232, 0.96);
padding-top: 2%;
padding-bottom: 2%;
}
#roseimg{
margin: 0 auto;
text-align: center;
display: -webkit-box;
}
I've also noticed that using -webkit-overflow-scrolling: touch; disables an ios feature that allows you to scroll to the top of a web page by taping the safari tool bar. Has anyone discovered any work arounds?
Related
I have a webpage Find a walk which uses Leaflet to enable site visitors to find a walk in the British Isles from a specific location.
The page generates a search box and map.
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search by city, town or village" />
<div class="result" ></div>
</div>
<div id="walkingBritainMapDivWrap">
<div id="walkingBritainMapDiv" class="walkingBritainMapDiv"></div>
</div>
For all browsers except IOS the lists of results from the search are displayed in front of the map. However with IOS the list of results is hidden behind the map.
I have tried using z-index on the relevant divs but this has no effects. I understand that Laeflet uses z-indez to add layers to the map which m,ight complicate the issue.
The CSS for these divs is :-
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
margin-bottom: 12px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid red;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
background-color: white;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
.walkingBritainMapDiv {
padding-top: 75%;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: rgb(0, 0, 0);
z-index: 0;
}
Any help would be appreciated to solve this problem.
I am trying to achieve CSS only scroll-snap behaviour in an app but see that it doesn't work as expected in iOS. Here is link to CodePen that demo the case.
The code is enclosed below
body, html {
height: 100%;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.panel-container {
width: 100%;
height: 50%;
border: 2px solid lightgray;
box-sizing: content-box;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-snap-type: mandatory;
scroll-snap-points-x: repeat(100%);
scroll-snap-destination: 0 0;
}
.panel {
scroll-snap-align: start;
border: 2px solid;
box-sizing: border-box;
min-width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.one {
border-color: red;
}
.two {
border-color: blue;
}
<div class="panel-container">
<div class="panel one">
One
</div>
<div class="panel two">
Two
</div>
</div>
I included a few redundant CSS rules that I've learned in corresponding MDN page, nut I also tried without them with no luck.
I suspect that there the issue is caused because of combination of flex and scroll-snap but I'm not sure that it is the case.
PS: There are a few threads in SO discussing scroll-snap issues. One of them combines JS + CSS which is not exactly what I'm trying to do.
The container needs -webkit-overflow-scrolling: touch and the children overflow:visible (which they already have in your case).
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
tried with this code, still not working. It's fine on every other devices, it's fine in MAC as well, only the problem is on ios responsive devices.
You need to add overflow-scrolling to parent div. Check the below demo
.wrap {
width: 320px;
height: 500px;
position: relative;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch !important;
overflow-y: auto !important;
border: 2px solid #ddd;
margin-bottom: 20px;
}
iframe {
width: 100%;
height: 100%;
border: none;
display: block;
position: absolute;
}
<div class="wrap">
<iframe class="iframe" src="https://theimpossiblecool.tumblr.com/"></iframe>
</div>
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 5 years ago.
If we open this in genymotion it works fine.
But if we open this is safari ios device mobile the width of the element is wrong(The width of this element having this selector .main-container > .item-1)
The width of the flex-container is not equal to sum of child (which is fine in chrome in genymotion).
Same issue is appearing even in the safari browser in many cases.
.main-container {
display: flex;
flex-flow: row wrap;
width: 350px;
height: 46px;
border: 1px solid red;
}
.main-container>.item-1 {
display: flex;
width: auto;
flex-flow: column wrap;
border: 1px solid blue;
}
.main-container>.item-2 {
display: flex;
width: auto;
margin-left: auto!important;
border: 1px solid green;
}
.header_left {
display: flex;
width: auto;
flex-flow: row wrap;
border: 2px solid red;
}
<div class="main-container">
<div class="item-1">
<div class="simple_list1">
<div class="header_left">
<div class="it-1">Predictive analysis</div>
<div class="it-2">Cool idea</div>
</div>
</div>
<div class="simple_list2">Current Analysis</div>
</div>
<div class="item-2">Java</div>
</div>
https://codepen.io/vish123/pen/OgmvWz
Try changing flex-flow:column wrap to simply
flex-direction: column;
to .main-container > .item-1. You don't need wrapping it since it will already position the items below each other due to direction: column.
I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox), however, on the iPhone/iPad there is a tiny gap/space between the IMG and right box.
It works fine in Firefox. What is the problem?
Here's an inline link to JsFiddle.
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/>
<div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
#wrapper {
border-top: 8px solid #457b91;
max-width: 488px;
margin: 0 auto;
overflow: hidden;
}
#wrapper img {
width: 32%;
float: left;
}
#subject {
background-color: green;
float: right;
width: 68%;
padding-bottom: 32%;
position: relative;
}
#subject_wrapper {
padding-top: 12%;
position: absolute;
height: 100%;
width: 100%;
}
#subject span {
font-family: Thonburi;
font-size: 34px;
color: #ffffff;
display: block;
padding: 0 20%;
}
#subject span:nth-child(2) {
font-size: 18px;
line-height: 8px;
}
I don't have an iPd or iPhone to hand to check this, but try commenting out the space between your elements, thus:
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/><!--
--><div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
It's a pretty ridiculous fix, but it work for inline block elements, like menus made up of LIs.