I have a project since today. I have an ionic project who comes from a Windows and I can't scroll the view in my web browser.
But when I create a project in Mac OSX I can scroll like a charm with maintaining my left click mouse and scroll (like it would be tactile).
So can someone help me to make this new project scrollable in Mac OSX please ?
Many thanks.
I have added to my ionic projects that do not need Cordova plugins the platform "Browser" to be able to deploy rapidly a nice webapp.
I faced the same issue and had to add this CSS property :
.isBrowserView {
overflow-y: auto !important;
}
On my app.run(), I have add the following code :
var deviceInformation = ionic.Platform.device();
if (deviceInformation.platform === "browser"){
$rootScope.isBrowser = true;
}else{
$rootScope.isBrowser = false;
}
Finally, I add this ng-class condition on my ion-contents
<ion-content ng-class="{ isBrowserView : isBrowser== true } ">
Related
I have a weird issue on iOS safari or chrome, when trying to select an option from a select input, when i touch the selector, it shows the options correctly on first tap, but then when i try to select an option, i have to tap twice to make it work, this is my actual scenario:
"element-ui": "^2.13.1", "vue": "^2.6.11"
Here is my select input:
<el-select class="select-danger"
placeholder="Language / Idioma"
v-model="locale">
<el-option v-for="option in selects.languages"
class="select-danger"
:value="option.value"
:label="option.label"
:key="option.label">
</el-option>
</el-select>
watch: {
// watch for locale changes
locale: function (value) {
alert("selected")
}
},
This issue seems to happens only on iOS, i tested on android chrome browser and works flawless.
Any ideas of what could be causing this issue?
After looking around for a while i found a workaround in Element UI Github issues, right here:
Element UI Github Issue
Appearently it has to do with the hover state that it's not well managed on iOS, and it's a well known issue, for the case the solution seems to be adding the following SCSS to App.vue :
.el-scrollbar {
> .el-scrollbar__bar {
opacity: 1;
}
}
But somehow in my case this didn't work, so i did it with just css:
/*Fixes double tap on iOS*/
.el-scrollbar__bar {
opacity: 1!important;
}
And that was it, this solved the double tap issue with Element UI.
Hope this helps someone else.
I’m using split-pane component and want to change the min-width and max-width of the left panel according to my requirements .
For this I’m changing the the provided sass variables for SplitPane from ionic docs in the variables.scss file.
but the change is not reflected in the main.css file after doing ionic serve.
First I thought it could be problem with sass but I changed another variable called #background-color and it worked .
Please can anyone help with this?
Here is the ionic info
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
local packages:
#ionic/app-scripts : 1.1.4
Ionic Framework : ionic-angular 2.2.0
System:
Node : v6.11.1
npm : 3.10.10
OS : Windows 10
Misc:
backend : legacy
Thanks.
According to the documentation here
By default, SplitPane will expand when the screen is larger than 768px. If you want to customize this, use the when input. The when input can accept any valid media query, as it uses matchMedia() underneath.
<ion-split-pane when="(min-width: 475px)">
<!-- our side menu -->
<ion-menu [content]="content">
....
</ion-menu>
<!-- the main content -->
<ion-nav [root]="root" main #content></ion-nav>
</ion-split-pane>
You can also customize it in your code
<ion-split-pane [when]="shouldShow()">
...
</ion-split-pane>
class MyClass {
constructor(){}
shouldShow(){
if(conditionA){
return true
} else {
return false
}
}
}
I've fouded this plugin to get the Immersive Android view on a Hybrid app (GitHub)
But the navbar is attached into the StatusBar
i've tried with css ..
.platform-android.has-translucent-status-bar.app-header-bar{ padding-top:25px!important; }
Any suggestion?
If you want to completely hide the status bar:
$ionicPlatform.showStatusBar(false);
Make sure to inject $ionicPlatform to the service/controller. Also make sure to install the Cordova Statusbar Plugin.
ionic plugin add cordova-plugin-statusbar
If you only want to push the content down a bit, you can do this:
body {
padding-top: 25px !important;
}
When working with a web application after having installed it to 'home', it seems like a most recent update to iOS has caused the usual black status bar to go transparent and float above the web content below it.
Also, not pictured, is a horizontal bar at the footer of the app that pushes my fixed footer about 20px up.
I don't expect to always be serving this application via iPad (most clients would opt for the lesser expensive Android option), however it is very common for my associates to be demonstrating the application with their own iPads...
What options do I have here? Will I need to do some 'sniffing' and shift the application down just for this device/version? If so, what is the best way to do this without introducing more libraries? I'm currently using the latest Angular framework + .NET 4.5.1.
Thanks.
Well, since there was obviously a whole lot of interest in this question, I have since found an answer to the problems.
In the root of the application I created the test for modern iOS 8
var userAgent = navigator.userAgent;
$rootScope.isIOS = ( userAgent.match(/(iPad|iPhone|iPod)/g) && userAgent.match(/(OS 8_0_)/g) ? true : false );
In the primary wrapper before the navigation element I conditionally place a block
<div ng-if="isIOS" class="isIOS"> </div>
Then I have the sass class
.isIOS {
position: fixed;
z-index: 10000;
top:0;
width: 100%;
height: 23px;
background: $fooColor;
& + div {
margin-top: 25px;
}
}
and the TOP is taken care of...the status bar has a background that stays fixed and scrolling through any of the pages looks great.
The space I encountered at the bottom was a little different and required the following meta-data in the base layout.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
Anyways...all is good now. If you came here and found this and it helps, awesome. If you never came here it all then it really doesn't matter a whole bunch, now does it?
I've setup a new ASP.NET MVC website, using the defaults in Visual Studio 2013. I've updated all the libraries being used so that I have the latest version of bootstrap and other CSS, JavaScript and MS libraries installed.
What I've found is that if you add basic form with validation, the Bootstrap navigation bar doesn't stay on top, it falls to the middle of the screen on an iPhone. Here is a screenshot:
You'll notice the menu is the middle of the screen, instead of being on top.
To duplicate, open the URL on an iPhone just click submit which will cause the a validation error and display the UI issue.
Note, I have removed the bundling so that we can see the individual links. I also put them all in the header for convenience, not something that we would do in production.
What is the solution to anchoring the navigation bar?
With help of a skilled CSS programmer, I was able to resolve with the following updates:
Run the following JavaScript after bootstrap:
var is_ios = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
if(is_ios) {
$(document)
.on('focus', 'input, textarea', function(e) {
$('body').addClass('fixfixed');
})
.on('blur', 'input, textarea', function(e) {
$('body').removeClass('fixfixed');
});
}
Added the following CSS updates:
.form .form-control {
font-size: 16px;
}
.fixfixed .navbar {
position: relative;
top: auto;
}