I have a problem using the bar-header component of the ionic-framework. I always have a padding-top of a few pixels (see screenshot). I'm using the cordova plugin org.apache.cordova.statusbar to hide the status bar like this:
if(window.StatusBar) {
StatusBar.hide();
StatusBar.overlaysWebView(false);
}
Any help will be highly appreciated.
If you installed the plugin correctly it should be enough to just call
ionic.Platform.fullScreen();
right after you hide the statusbar.
This should probably remove the space at top of your app.
Overwrite these ionic css rules in your main.css. This fixed the problem for me:
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper {
margin-top: 0px !important;
}
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
margin-top: 0px;
}
Related
I'm in the process of coding a sticky notification bar seated at the bottom of a mobile screen. I want the bar to be stuck at the bottom of the users screen until the user has reached the scroll position of where the bar is actually positioned in the code (which is just before the footer of the page).
I have pretty much copied the "doctor" example from this page: https://alligator.io/css/position-sticky/
My problem is: On my page, the bar works fine when using Android Devices or when simulating a mobile device by adjusting the Browser width on my Desktop Computer. However, on iOS, the bar is not sticky, i.e. it just sits at its position and doesn't stick to the bottom of the screen until reached. This applies to both Safari and Google Chrome.
The weird thing is: On the previously mentioned alligator.io page, it works just fine on my iOS device.
I suspect this is some kind of Webkit problem having to do with the code surrounding the bar, but I cannot isolate it. I have tried debugging by adjusting my code as far as possible to the example from alligator.io, but I cannot get it to work. I have also tried looking for any overflow:auto in parent elements - without success. I have been trying to fix this for several hours and am sick and tired of the problem and could use another pair of eyes to help me find what I'm overlooking.
#jobalarm_mobile {
display: table;
font-size: 18px;
width: 100%;
height: 40px;
background: #ff8400;
color: white;
font-weight: 400;
text-align: center;
position: -webkit-sticky;
position: sticky;
bottom: -50px;
align-self: flex-end;
}
<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
<i class="fa fa-bell"></i>
<span>Jobalarm aktivieren</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</a>
You can visit the live page I am working on at (hidden on request of the customer, please contact me privately).
Simply start any (suggested) search and the bar will pop up (or not, if you are using iOS...)
Thanks in advance for your help.
I feel like an idiot for answering my own question, but I figured out what is causing the problem.
I hope this will help developers facing the same problem because I could not find anywhere defining this behavior.
As you can see, in my code, there is a wrapper (specifically a link) around the element, on which I use my position:sticky:
<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
<i class="fa fa-bell"></i>
<span>Jobalarm aktivieren</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</a>
For some reason, this is not a problem for Chrome or Firefox on Desktop as well as Android, as they seem to ignore this container, probably because it doesn't define any positioning behavior. This is why it works on other devices. However, iOS does not ignore the container and therefor positions the div relative to its parent container, which is the link. After removing the link for test purposes, it worked on all devices.
This is the real answer
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
and works!!!
Some of the tips in my answer here may help, notably adding display: block to your container may do the trick.
For me nothing worked except jQuery/javascript in this way: give the element you need to be sticky position:absolute and left: 0, then use javascript to calculate offset of the window to the left, and add that offset to the left property of your element:
#stickyElement {
position: absolute;
left: 0;
}
function scrolling(){
$('.someElementScrollingLeft').on('scroll', function() {
let offset = $(this).scrollLeft();
/* For me it only didn't work on phones, so checking screen size */
if($( window ).width() <= 768)
{
let stickyElement = $('#stickyElement');
stickyElement.css("left", offset);
}
});
}
In my case in full screen menu it was overflow-y: auto. I eliminated this issue by adding: overscroll-behavior: contain.
I visited a website and may be I found solution for you.
Try this it may can help you:
#jobalarm_mobile {
display: none !important;
}
and then place your notification <a> tag at the end (after <footer> tag)
//write this css
.jobAlertToggle{
display: none;
}
#media (max-width: 767px)
.jobAlertToggle{
display: block;
width: 100%;
position:sticky;
position:-webkit-sticky;
bottom:-50px;
}
#jobalarm_mobile {
display: table;
font-size: 18px;
width: 100%;
height: 40px;
background: #ff8400;
color: white;
font-weight: 400;
text-align: center;
-webkit-align-self: flex-end;
align-self: flex-end;
}
For my problem it was:
I had { contain: paint; } in ancestor (container above inside-container).
Changed it to { overflow: clip; }
Sticky would not work if contain: paint was present regardless of having overflow: clip.
This was tested on Iphone 15.4.1. Other tested devices didn't break with contain: paint (tested on chrome, ipad, android)
I had so many problems with this issue as well. The sticky position wouldn't work on my phone - not in Safari or Chrome.
I tried placing the element that I wanted sticky in the top of the surrounding wrapper - it worked! Apparently the sticky position can't really work if there is something above it inside the same parent-wrapper. You don't have to change your order or design, you can just create a wrapper that's around the content, with the sticky element in the top.
<div class="container">
<p>Some text above the sticky element</p>
<div class="inside-container">
<div class="sticky-element">
<p>This is sticky</p>
</div>
<p>Some more text, that scrolls past the sticky element.</p>
</div>
</div>
I think the Problem is, that Safari (the Browser of iOS) does not support position: sticky properly. See this Article (https://caniuse.com/#feat=css-sticky). Read the Known Issues Section to find aut more. Maybe, you have to deactivate it for iOS and show a note on your Page, that its not working properly.
I hope, I could help you.
Use for ios position: -webkit-sticky and for other case position: sticky
How to change the application font size in brackets?
I want to change the font size of the side menu, menu bar, bottom bar and title bars of the editor which is very small. [ctrl] + [+] will only change the editor font size.
Temporary fix
File -> Extension Manager -> search for "UI too small" and add an extension to make the font larger.
Find more details on - https://github.com/adobe/brackets/issues/8059.
Work is in progress to fix this issue and it will be fixed in the next release. Track the progress - https://trello.com/c/WRhZ0xvj/969-high-dpi-support-on-windows-and-linux.
This has worked out for some people in my case the UI is not much responsive. Therefore waiting for the new release.
As Shanika suggested, "UI too small" allows you to control the size of the side/Menu fontSize, but it doesn't answer to Ctr + or -.
Nevertheless, you can still do it manually by changing directly the main.js under Brackets->extensions->user->ui-too-small->main.js Or by clicking on the menu Help then Show Extensions Folder, and click on main.js under user/ui-too-small.
Open main.js and change the fontSize you want in font-size: 22px
It's 5/2019 and still this is a problem.
Issue was opened at 2014.
Think about, there is kind a populer code editor and even if you want to increase font size of file tree which is really small, you can't without an extension (UI too small).
Weird.
You can change the setting for the ui-too-small plugin For windows trough:
Help > Show Extensions Folder > Navigate to user > Navigate to ui too small > open main.js
I personally like the following settings (Material design):
define(function (require, exports, module) {
"use strict";
ExtensionUtils.addEmbeddedStyleSheet("#sidebar *, #main-toolbar *, #titlebar *, #problems-panel *,"+
"#find-in-files-results *, #e4b-main-panel *, #status-bar *,"+
"#main-toolbar *, #context-menu-bar *, #codehint-menu-bar *,"+
"#quick-view-container *, #function-hint-container * { font-size: 16px !important;"+
" line-height: 30px !important; }"+
".sidebar li { min-height: 30px !important;}"+
".sidebar-selection, .filetree-selection { min-height: 30px !important; margin-top: 5px;}"+
""+".jstree-icon{margin-top:10px !important} .filetree-selection-extension{margin-top: 5px; height: 30px !important;} .jstree-rename-input{ margin-top: 2px !important; height: 30px !important; padding-bottom: 0px !important;} "
);
});
I'm trying to create a simple mobile nav menu. It looks fine on desktop Chrome, but I have noticed a couple of issues on my iPhone 6 Plus:
Safari: When tapping the hamburger to open the menu, the cross is moving when it should be in the same place as the hamburger.
Chrome: Above issue isn't present, however I have noticed an intermittent issue where the hamburger/cross get mixed up and show at the wrong time (eg: cross showing when menu closed).
I presume I've done something fundamentally wrong here - can anyone please help? :)
Codepen: https://codepen.io/sad_muso/pen/pbkLNW
I presume it may be related to this CSS that is applied when menu is open:
ul.topnav.responsive li a {
position: relative;
display: block;
text-align: center;
margin-top: 10px;
padding: 10px 5px;
}
Thanks
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
I'm trying to prevent my button from flashing blue after clicking, anyone know what class causes this change? so I can override it
Cheers!
For anyone landing here and wondering what to do with .ui-btn-active, I'd like to build on sqlisers answer with:
.ui-btn-active
{
color: #2F3E46 !important;
background: none !important;
background-color: #eee !important;
text-shadow: 0 /*{a-bup-shadow-x}*/
1px /*{a-bup-shadow-y}*/
0 /*{a-bup-shadow-radius}*/
#ffffff /*{a-bup-shadow-color}*/;
}
Just change the color values to whatever you like.
If this happens on your mobile, I'd suggest adding this to your stylesheet:
* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
This will remove the default tap-highlight function of the webkit browser (on any mobile). Seems to work mostly on Android phones, but it does have affect on iOS devices as well.
The class you're looking for is
.ui-btn-active