I am currently working on a project using Google's Polymer project. The issue that I am having occurs only in Safari on iOS. In the current chat view that I am working on, when a user scrolls through the chats everything works great. It is when the user taps on the keyboard there is then this gap that sticks and is difficult to get rid of.
Please see the images below and if anyone could point me in the right direction it would be greatly appreciated.
I have several more pictures but I am unable to post due to my reputation being less than 10. Thank you to everyone in advance for any help.
Here is what happens after the keyboard has been opened and put away. You can see in the image that there is now a gap.
Here is the CSS for the container
.message-sender-container {
#apply --layout-horizontal;
#apply --layout-center;
#apply --layout-around-justified;
background: white;
border-radius: 5px;
max-width: 400px;
margin: auto;
position: sticky;
position: -webkit-sticky;
overflow-y: scroll;
height: 100%;
-webkit-overflow-scrolling: touch;
bottom: 2%;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
HTML:
<div class="message-sender-container">
<paper-textarea id="message" label="Message..."></paper-textarea>
<paper-button id="image-btn" on-tap="_onTapImageBtn" class="flex" dialog-confirm autofocus raised type="submit"><iron-icon icon="custom-icons:insert-photo"></iron-icon></paper-button>
<paper-button id="send-btn" on-tap="_onTapSendDialogBtn" dialog-confirm autofocus raised type="submit"><iron-icon icon="custom-icons:send"></iron-icon></paper-button>
</div>
Related
I have searched and tried every possible example I can find. Here is my goal. I have a starter template for tabs. Each tab will open an page that will load a different path from a remote domain (using https) via an iframe. In android, it works as I would hope. In IOS, from what I have read, the iframe "height:100%" actually goes to the height of the content in the iframe, instead of the viewable area on the app, so the fixed header scrolls with the page, because for all it thinks, is that you have a really tall screen. What I need to happen is when you scroll, the fixed header stays at the top. Here is the code:
Component for Tab HTML
<ion-content >
<div class="iframe-fix">
<iframe
[src]="myurl"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
</div>
</ion-content>
From the forums I found a few tricks that should work, and created this css file that I include in the index.html:
.iframe-fix iframe {
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
width: 100%;
height: 100%;
border: none;
margin-top: 40px;
}
.iframe-fix {
overflow: hidden;
width: 100%;
height: 100%;
border: none;
background-color: #fff;
}
Would appreciate any help/suppport. Thanks!!
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
Jssor slider:
Is it possible to move the social links div above the image, while keeping it responsive with the image. The demos have the social bar on top of the image. I have done this & it appears to work correctly in all current browsers, with the exception of resizing issue only in IE. Can it be done?
I noticed that it doesn't display in ie 8;
Please set z-index 10 for share button navigator as follows,
<div u="any" style="position: absolute; display: block; top: 6px; right: 16px; width: 280px; height: 40px; z-index: 10;">
I am trying to finish my first website and thought it was pretty much finished but am having an issue with viewing some page layouts on an iPhone 5 (S and C). On my 4 it's fine and on an iPad I tested it on. Also fine on Android.
The issue is the fixed navbar (bootstrap) is bouncing around on the galley pages (it's a photography site) which have a horizontal scrolling div but it's ok on standard page layouts. I have disabled a mouse wheel plugin it's running to check if it's that and it has no effect on the iPhone 5 issue. Normal layout pages are fine.
the url is: http://www.pjrundle.co.uk
The problem occurs on any of the photography pages.
Sorry if this is a really obvious newbie question. Here is the css for the div containing the side scrolling gallery. I tried removing absolute positioning and no effect.
.scroll {
white-space: nowrap;
background-color: white;
padding-top: 73px;
position: absolute;
left: 0px;
}
Any advice greatly appreciated.
Thanks.
Thanks mijopabe, I fixed it in the end by adding:
.scroll {
white-space: nowrap;
background-color: white;
padding-top: 73px;
position: absolute;
left: 0px;
width: 100%;
overflow: auto;
}
Not really sure why it worked without this on other browsers to be honest but fixed anyway.
Cheers.
I'm trying to get custom jQuery mobile navbar icons and it's not working. I know the question has been asked before and I think I am doing it right can someone look at my code and see if they can see the problem please.
.ui-icon-directions {
background-image:url("http://c9.io/mbochicchio/tradingpost/workspace/img/mobilephotos/directions.png") 50% 50% no-repeat;
background-size: 20px 20px;
box-shadow: none;
-webkit-box-shadow: none;
margin: 0 !important;
}
http://jsfiddle.net/ragingnomad/NHC9p/5/
In jQM 1.4.x, background image is applied to the :after pseudo-selector:
.ui-icon-directions:after {
background-image:url("http://c9.io/mbochicchio/tradingpost/workspace/img/mobilephotos/directions.png");
}
Here is your updated FIDDLE