I have a problem with the scrollbar in the drop down menu in iOS.
I would like it to stay always visible when I open the menu, but this only works on Android and not in iOS. This is the code I have used
::-webkit-scrollbar {
-webkit-appearance: none;
width: 2px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #E2BC69;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
opacity: 0.5;
}
On CanIUse these properties are available on iOS (tested on iOS 9 and 10). Do you know how to fix this issue?
you could try overflow:visible;
Some html code or even a fiddle can be helpful your question is not clear
Related
I am working on a project with Cordova, Ionic v1, and AngularJS 1.5. cordova-ios v 5
I have a floating button in my project. It works great for everything except when I have a form page with a text input. When the iOS keyboard appears my floating button dissapears. It works fine on Android.
Here is my css:
.floating-button {
position: fixed;
bottom: 20px;
z-index: 9999;
right: 20px;
border-radius: 50%;
height: 60px;
width: 60px;
border: none;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
color: white;
font-size: 22px;
}
You can do something like this to overcome the issue
Use keyboard plugin and on keyboard open and close change the css value of bottom, So on keyboard open it will automatically move floating button to up and on close move to down
cordova plugin add cordova-plugin-ionic-keyboard --save
//Keyboard will be shown
window.addEventListener('native.keyboardshow', keyboardShowHandler);
function keyboardShowHandler(e){
console.log('Keyboard height is: ' + e.keyboardHeight);
$(".floating-button").css("bottom", e.keyboardHeight+"px");
// You can use IONIC properties for this and change value as per your requierment
}
//Keyboard will hide
window.addEventListener('native.keyboardhide', keyboardHideHandler);
function keyboardHideHandler(e){
$(".floating-button").css("bottom", "20px");
}
I was trying to hide scrollbar in for specific ul but wanted to allow horizontal scrolling and I tried below
.ul::-webkit-scrollbar {
display:none
}
it worked for all the browsers and devices except safari and iOS respectively
I've found a work around :
.my-element::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent; // HERE IS THE TRICK
}
So I made a search bar, and everything works fine. Except the css.
This is what it looks like on computers:
Search bar on computer
And this is what it looks like on iOS: (tested on iPhone, iPad, and iPod)
Search bar on iPad
You'll notice that on the iPad, the search text height is greater than the button.
This is my css:
input.searchFormText {
-webkit-appearance: none;
-webkit-border-radius: 0;
padding-left: 2.25px;
border-top-left-radius: 4.25px;
border-bottom-left-radius: 4.25px;
height: 19.5px;
border-color: gray;
border-style: solid;
border-right: none;
border-width: 0.5px;
background-color: white;
font-size: 12.25px;
font-family: "Open Sans";
transition-duration: 0.225s;
}
So I need the search text input height to be less, but only on iOS.
For some reason iOS Safari gives the input element a different default padding than other browsers. Just set the padding-top and padding-bottom of your input and it should have the same height in every browser ;)
I have an iFrame generated by ThingLink that I need to drop into an existing web page and behave responsively.
I would have thought that the usual CSS used to make YouTube or Vimeo iFrames would do the job. Which it does on most browsers, but for whatever reason this does not seem to be the case for Safari on IOS (Safari desktop appears to work). Why is this? Is there something in the Iframe's HTML that is causing an issue?
Here's a Fiddle showing the iFrame in question misbehaving (top) and a sample YouTube iFrame behaving (bottom).
And of course the actual code I am using
HTML:
CSS:
div.iwrap {
width: 100% ;
position: relative;
padding-bottom: 60%;
height: 0;
-webkit-overflow-scrolling:touch;
overflow: hidden;
}
.iwrap object,
.iwrap iframe,
.iwrap embed {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100% !important;
height: 100% !important;
border: none;
}
iframe,
object,
embed {
max-width: 100%;
}
You can see I've tried trying out the absolutely positioning each corner of the iframe, but with no joy.
I should stress that it is only Safari on IOS that it breaks. Safari for desktop and Android for mobile look good.
Any pointers to get that working would be much appreciated, but more importantly, why isn't it.
Using responsive iframe code I devised for myself, and using your src= url, I created and tested this Pen on CodePen.
Using CodePen's CrossBrowser Testing, the Pen displays and functions correctly on Android mobile devices. (With one exception: the embedded Youtube video has no audio in CrossBrowser Testing although in normal view it does.) But on iOS devices it displays only a black square where the content should be.
I'm not certain from your post whether this is the failure you are talking about.
I have other Pens, e.g., Responsive Iframe - Base Code, which function correctly on iOS devices. Just the one using your src= url does not.
This leads me to wonder whether, even though using known responsive HTML and CSS, there is something about the source that's not playing nicely with iOS.
I'm not sufficiently versed in the technology to be able to suggest what that might be, however, I hope I've demonstrated that even with code known to be responsive the source document doesn't display in iOS. Thus, the problem appears not to be with the code but rather some conflict inherent between the source and iOS.
Sorry I couldn't be of more help, but maybe this will help you to rephrase the question and question title more narrowly and specifically so that it will grab another user's attention.
The editor insists that, with a link to CodePen, I must include some code. So, merely to satisfy that requirement, here is my responsive HTML and CSS code.
HTML:
<div id="Iframe-Thinglink"
class="set-margin set-padding set-border set-box-shadow
center-block-horiz">
<div class="responsive-wrapper
responsive-wrapper-wxh-600x480"
style="-webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="//www.thinglink.com/channelcard/632903487365054466">
<p>Error Message Here</p>
</iframe>
</div>
</div>
CSS:
/* CSS for responsive iframe */
/* ========================= */
/* outer wrapper: set the iframe's width and height by setting
max-width & max-height here; max-height greater than
padding-bottom % will truncate to padding-bottom % of max-width */
#Iframe-Thinglink {
max-width: 600px;
max-height: 100%;
overflow: hidden;
}
/* inner wrapper: make responsive */
.responsive-wrapper {
position: relative;
height: 0; /* gets height from padding-bottom */
/* put following styles (necessary for overflow and scrolling
handling on mobile devices) inline in .responsive-wrapper around
iframe because potentially unstable in CSS:
-webkit-overflow-scrolling: touch; overflow: auto; */
}
.responsive-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
}
/* padding-bottom = h/w as % -- sets aspect ratio */
/* YouTube video aspect ratio */
.responsive-wrapper-wxh-650x315 {
padding-bottom: 56.25%;
}
.responsive-wrapper-wxh-600x480 {
padding-bottom: 80%;
}
/* general styles */
/* ============== */
.set-border {
border: 5px inset #4f4f4f;
}
.set-box-shadow {
-webkit-box-shadow: 4px 4px 14px #4f4f4f;
-moz-box-shadow: 4px 4px 14px #4f4f4f;
box-shadow: 4px 4px 14px #4f4f4f;
}
.set-padding {
padding: 40px;
}
.set-margin {
margin: 30px;
}
.center-block-horiz {
margin-left: auto !important;
margin-right: auto !important;
}
I am completely new to IOS development and I have developed an Asp.Net MVC 4 web application.
Now All I wan to do is I would like an app which shows my web site in full screen mode when opened in an IPhone hiding all the status bar, address bars and should ask a user to add the app to home screen when opened in an IPhone for the first time.
My Mobile Styles CSS
#media only screen and (max-width: 850px) {
/* header
----------------------------------------------------------*/
header .float-left,
header .float-right {
float: none;
/*background-color:aliceblue;*/
}
/* logo */
header .site-title {
margin: 10px;
text-align: center;
/*background-color:aliceblue;*/
}
/* login */
#login {
font-size: .85em;
margin: 0 0 12px;
text-align: center;
}
#login ul {
margin: 5px 0;
padding: 0;
}
#login li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#login a {
background: none;
color: #999;
font-weight: 600;
margin: 2px;
padding: 0;
}
#login a:hover {
color: #333;
}
/* menu */
nav {
margin-bottom: 5px;
}
ul#menu {
margin: 0;
padding: 0;
text-align: center;
}
ul#menu li {
margin: 0;
padding: 0;
}
Is there any simple way I can do this?
To make a webapp go full screen in iOS, you just need to add the meta tag:
<meta name="apple-mobile-web-app-capable" content="yes">
But, bear in mind, that if you do this, you are telling iOS that this is actually a web application, not just a mobile-optimized website. You'll be responsible for all navigation (back button, etc.). Basically, your web app should look and function like a native app, just on the web.
As far as adding to home screen goes, you cannot do this programatically. The user must actually manually add to home screen using the UI in MobileSafari. If you just want to prompt them to do that, then all you're talking about is a bit of HTML, styled however you like with some message. Then, you can use the boolean window.navigator.standalone to test whether or not the user is running in web app mode (and thus has already added your app to the home screen) to decide whether to hide or show the message via JS.
Also, bear in mind from a styling perspective, that iOS reports device and viewport width based on a 1x scale. That is to say an iPhone with a retina display has 640 horizontal pixels, but will report 320.
Please follow below links settings, so that when ever you open it looks like native app instead of web browser app in iOS
http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
If it answered , Please check right mark on left side to answered