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;
}
Related
I migrated my WP website to another domain, I am using an animation I made on Animate CC and used and Iframe to placed it. I am working with DIVI and Elementor.
Now, when I click from the animation, I get a double nav bar and I have no idea why. But when I go from the menu, everything is fine.
Does someone know how to fix this? I have tried uninstalling and reinstalling DIVI, elementor and other plugins but nothing works. I have also changed the links of the animation.
This is the website:
https://psychotherapie-couple-famille-lausanne.ch/accueil/
I appreciate any help, thank you in advance.
Because you are loading that page in an iframe.
for example, by clicking an image it opened this page https://psychotherapie-couple-famille-lausanne.ch/therapies/therapie-individuelle/ in iframe.
Edit that page and hide header for that page from divi settings or put this CSS code for that page. you will see custom css option on that page.
div#page-container {
padding-top: 0px !important;
}
header#main-header {
display: none;
}
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 } ">
Has anyone tried changing the CSS in the new Facebook Page plugin? Old plugin used to provide some options such as being able to select a color scheme. However, the new plugin it's white all around and it does not seem to accept my custom CSS. Example:
._h7l {
background: transparent !important;
border: none !important;
}
Any ideas how we can get some custom CSS to work?
You cannot modify the CSS. The content of the plugin is displayed inside an iframe so there is no way you can change CSS or override any javascript method.
There are different options provided by this plugin you can customize. Please take a look into the docs:
https://developers.facebook.com/docs/plugins/page-plugin/
I hope it helps.
Yes you can, but not without using a little bit of jQuery and you site must use an https protocol (https). Both protocol must match...
Start by adding this awesome plugin: jquery.waituntilexists.js
And then play with your Facebook iframe by adding your css in it:
$(".fb-page iframe").waitUntilExists(function(){
$(".fb-page iframe").contents().find('head').append('
<style>._h7l {
background: transparent !important;
border: none !important;}
</style>
');
});
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;
}
My goal is to style a kendo-ui mobile app in Icenium to look the same on each device it's used on. Current targets include Android and IOS.
My stylesheet is the last link in the head section, to ensure that it overrides any other styles in the app. It hasn't helped, though, as telerik's specificity nightmare has me jumping through an insane number of hoops and getting very little accomplished.
I am at my wits end- I have followed the tutorial on http://www.icenium.com/mobile-app-platform/videos-demos/video/kendo-ui-mobile-and-icenium, and so far, have been able to override very few styles.
for instance:
.km-ios #tabstrip-scan .km-navbar
{
background-image:none;
}
should be all I need to override for the default ios titlebar, according to Telerik's tutorial. However, it gets rid of the background image, but leaves me with a background color, which it will not allow me to override (it also will not allow me to alter the text color). In other words:
.km-ios #tabstrip-scan .km-navbar
{
background-image:none; // works
background-color: #d9d1ba; //doesn't work
color: #333333; //doesn't work either
}
I have the same problems with their button classes:
.km-ios .km-button
{
height: 32px; // works
width: 100% // doesn't work;
background-image: none; // doesn't work
}
and with inputs:
.km-ios input[type=text]
{
width:100% // doesn't work
border-radius: 3px; // doesn't work
-webkit-border-radius: 3px // also doesn't work;
}
At one point, I even commented out the entire kendo default stylesheet, and was still getting the kendo default styles when I ran the app in the virtual machine.
How can I override the kendo-ui-mobile defaults and style the app how I want it to look (the same on every device), rather than how Telerik thinks it should look (closer to native ui)?
Force the platform to a specific one and style it with the Kendo UI Mobile ThemeBuilder here:
http://demos.kendoui.com/mobilethemebuilder/index.html
You might reference my post here Kendo mobile template styling/formatting not working - i was having a similar issue and my post might help.