--offset-top: 88px, causes my "ion-content", to not display properly with the header, is there a way to removed this, i have tried "--offset-top: 0px important;" but its not working. Have anyone also experience this?[![enter image description here][1]][1]
Just remove the style attribute in the ion-content tags.
Related
I am developing an app, and it works 100% in android. In IOS I have 2 issues:
refresher does not work
<ion-refresher slot="fixed" #ionRefresh="doRefresh($event)">
there is a flicker when I touch the screen (may be related to background? I read some old posts about that)
ion-content.background{
--background: url(/bg.png) 0 0/100% 100% no-repeat;
}
I don't believe its relevant to this issue, but I am using vuejs.
I tested in various desktop browsers and it works as well.
So, we had 2 things here, and I thank #johnborges for following up
it was necessary to add the pullingIcon
link for Ionic docs
and the relevant paragraph
Using the iOS native ion-refresher requires setting the pullingIcon
property on ion-refresher-content to the value of one of the available
spinners. See the Spinner Documentation for accepted values. The
pullingIcon defaults to the lines spinner on iOS. The spinner tick
marks will be progressively shown as the user pulls down on the page.
the flicker, based on this link from stackoverflow I added a CSS DIV element instead of styling ion-content. It worked. I had to do a secodn CSS trick because one of my pages had fullpage slides and padding, but after that it worked
I am using the Leaflet map api and I downloaded and installed the 'leaflet-routing-machine' plugin just yesterday. The problem is the square window on the right has only white text so nothing can be read in the route directions. Has anyone else experienced this with this plugin?
How would you change it?
I tried re-linking the librairies and everything seems linked correctly.
I expect the routing instructions to appear in black font color instead of white is all, so that they can be read.
Thanks,
Les
Try adding this to your CSS:
.leaflet-right {
color: #000000;
}
You may also try this:
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
color: #000000;
}
Depending on what is overlaying the white text styles you might need to use !important in the given code.
I'm working on updating an Ionic 3 application to Ionic 4. I'm having an issue with the app css not working. I copied everything within app.scss from the original application to global.scss in the new application.
When I load up the first page of the app it looks nothing like the original application. I thought this part was more or less copy/paste but I may be wrong. One thing I experimented with was a line of css I have that looks like:
ion-input.input {
margin-bottom: 0;
border: 1px solid lightgrey;
}
and changed it to
ion-input {
margin-bottom: 0;
border: 1px solid lightgrey;
}
The new application then seems to take the border into account. Is there some major css changes needed in this conversion? or am I missing something?
Yes there are major changes. Now that Ionic 4 is based on web components the insides of them are encapsulated.
This is so they can be dropped into any page and look how the developer expects it to look, rather than being messed up by the pages styles.
The web components expose certain settings that can be styled. These are listed at the end of each documentation page. For example with ion-input:
ion-input - custom css properties - Ionic Documentation
Here is a solution for the border, and here is a solution for margin. Unfortunately the reason this has to be changed in Ionic 4 is because the Shadow DOM is now being implemented. Here is more info on that. Cheers :)
I tried teh jScroll plugin by Kelvin Luck. First of all its a wonderful script. Its working fine with text, ie text as contents, in all browesers. But when we insert images in that the scroll is not working in Safari and Chrome... please help me. Am a beginner in javascrpt...:)
Retheesh
Another way of doing it is to initialise the plugin once the entire page is loaded
$(window).load(function(){
$('.scroll-pane').jScrollPane();
})
Ok, this way late, but I just spent most of the day figuring this out.
It's actually quite simple and also sort of explained in the jScrollpane Demo pages...
Since I am using the Wordpress plugin, using the the workaround Dann provided seemed a bit to complicated. The solution here is setting the image height in your CSS file for this specific page instead of (or on top of) declaring them inline.
So basically if you have
<div id="mydiv">
<img src="...." height=200px"/>
>/div>
jScrollpane won't recognize the height of the pictures and count them for your div height. So you need to add a class to your div and define the img height in your CSS:
#mydiv .newclass img {
height: 200px;
}
and it will work fine!
I had a similar problem.
Reinitialising the panel seemed to work.
I used this script:
$('.image_class').load(function () {
$('.scroll-pane').jScrollPane();
});
Dann
It's a known issue, but Dann's workaround is effective. I ended up testing for the presence of troublesome images, since they weren't always present on the page and affecting the scroll area size:
$(function() {
if($('.image_class').size()) {
$('.image_class').load(function() {
$('.scroll-pane').jScrollPane();
});
} else {
$('.scroll-pane').jScrollPane();
}
});
The iPhone is admittedly not the best platform for viewing code, but I'd like to optimize the mobile portion of my web site for the device as best I can. I'm having trouble getting code (Java code, in this case) to display properly.
I'm using <pre> tags, along with some CSS to render a nice little background for the code. This looks OK:
However if you scroll to see the rest of the code, you get this:
The text inside the <pre> is rendered properly, but the background color stops at the width of the device. I have tried this in the simulator, in a 3G device running 3.0, as well as in a 3G running 3.1-beta and they all behave this way.
It does render fine in Safari on the Mac; just not on the iPhone.
Here is the HTML:
<pre>
String input = readUserInput(); // assume defined elsewhere
int i;
try {
i = Integer.parseInt(input);
} catch (NumberFormatException exception) {
System.err.println("You entered an invalid integer: " + exception.getMessage());
}
</pre>
And the CSS:
pre {
font-weight: bold;
border: 2px solid green;
background: #669999;
padding: 5px;
}
What a curious bug! I'm able to reproduce it on a real live iPhone. I'm guessing it's caused by something about how iPhone processes the viewport settings. One thing you should clarify is what viewport setting you have in your page (via a meta tag). Your screenshot suggests it's something smaller than the default 980 pixel size. I tried tinkering with the viewport in various ways but couldn't stop this bug from occurring.
I have one workaround, which is to set a width parameter on the pre block. Ie:
<pre style="width: 50em;">
This is a bad solution for several reasons; it makes a fixed width block, it screws up your border, etc. But it does result in a coloured background block that's wider than the viewport. Maybe it's acceptable to you or maybe it's the basis of a real solution.
Have you tried setting a width or min-width for your pre block? Or perhaps trying a different position or display attribute for the block. Could try floating it or display: table. Just some ideas.
I'm not sure if pre accepts the overflow attribute but I'd try setting that, if not, wrap it in a div and do the background there, will give you slightly more freedom in your formatting options. (for instance if you wanted to have several blocks of code with "captions" underneath each part)