I'm looking for a way to remove margin around an ion-card. It seems like the ionic framework suggested way to do this is by using global variables in a theme file, such as the default theme > variagles.scss
Using the suggested variables yields no change in margin:
$card-md-margin-left: 0;
$card-ios-margin-left: 0;
However, using the ion-card tag instead works:
ion-card {
margin-left: 0;
}
I'm not sure if this is a change in ionic3 vs ionic4, but I'm having a hard time finding any ionic4 related documentation about theme variables.
Are you viewing the changes VIA the ionic serve command in your web browser?
the MD and IOS style tags you reference, are specific to the ANDROID/IOS platforms, so you are not likely seeing these in the web browser for that very reason.
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’m new with Ionic React and I’m looking for the correct way to integrate custom fonts and a custom icon set into my project, so that it’s working on all platforms as intended.
Custom Icon set
My goal is to make my custom icons work with IonIcon so that I can use the default styling options like “size” and the CSS variables (e…g --ioinc-stroke-weight).
What I did so far:
I added the icon set (all icons are svgs) into “public/assets/customicons/”
I imported IonIcon into my components where needed
Integrated the (e.g. )
So far the icons are displayed as intended and custom attributes “size” is working.
But, I’m not able to set the icon color or stroke-width programmatically. All the icons have set a default attributes (e.g. < g fill=“none” fill-rule=“evenodd” stroke="#092A5E" stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“8” >). Even if I remove those default attributes, I’m not able to set them via CSS variables
Question 1: Is “public/assets/customicons/” the correct folder to store the icons?
Question 2: How can I make it work that I can change the color of the icon via CSS?
Custom Font
Goal: I want that the custom font is shown on all platforms
What I did so far:
Added the custom fonts in “src/assets/fonts/”
Created a “fonts.css” in “src/theme/” where I integrated the font via “#font-face”
#font-face {
font-family: ‘FONTNAME’;
src: url(’…/assets/fonts/FONTNAME.ttf’);
font-style: normal;
font-weight: 400;
font-display: swap;
}
assigned the font to differnet elements
Question 1: Is this the correct folder to store the custom fonts? (I wasn’t able to do the same when the custom font was saved under “public/assets/fonts/” like the icon set)
Unfortunately, I wasn’t able to find any docs, tutorials or posts on any of these topics.
Thanks for your help!
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've set a custom class .categories e in my Ionic2 app in order to style it with a custom background. The CSS for the background is:
.categories {
background: url('../../assets/img/dark.jpg');
background-size: cover;
}
Everything works just fine in Chrome (using ionic serve), but when I build and run on device, all I see is a plain white background.
I've tried adjusting the path for the background image to assets/img/dark.jpg but no luck. If anyone could possibly help me I'll appreciate your help.
Thank you in advance
alright i think all what you have to do is to change the URL to
background-image: url('../assets/img/dark.jpg');
Background information on the background-image problem
Ionic seems to take all your scss-files, transpile and merge them into one giant css-file
(main.css) which is stored in the {project}/www/build/ directory.
If your background images originally reside in the {project}/src/assets/img/ directory, they are copied to {project}/www/assets/img/.
So regardless of where, or how deep, in the src directory tree your source scss-files are (commonly {project}/src/pages/{pagename}/{pagename}.scss) you need to consider that the paths of referenced images need to be relative to the build directory, not the directory of your scss-file.
When testing the app on a desktop browser using >ionic lab, absolute paths will also work, for example:
background-image: url('/assets/img/dark.jpg');
But in my experience this will not work on actual devices nor in emulators. So don't use it.
As Bouzafour Mohamed mentioned, you need to use the following format to reference your background image.
background-image: url('../assets/img/dark.jpg);
Link will be not like you used
it has to be like relative path to your file
such as your file is on
src > pages > example >example.scss
then you must use image path as
.categories {
background: url('../../assets/img/dark.jpg');
background-size: cover;
}
I am searching for a way to use custom icon fonts already in the Fiori Launchpad.
I found one way using the UI theme designer: https://blogs.sap.com/2015/12/19/custom-icons-in-fiori-launchpad/. But as I understand these icons are only available with a custom theme.
I am searching a way to register my own font so that the icons are available similar as the Fiori launch icons.
Looks like they are stored here: /UI5/sap/ushell/themes/base/fonts/ and referenced by the default themes, like here: /UI5/sap/fiori/themes/sap_bluecrystal/library.css
#font-face {
font-family: 'Fiori2';
src: url("../../../../../UI5/sap/ushell/themes/base/fonts/sap-launch-icons.eot");
src: url("../../../../../UI5/sap/ushell/themes/base/fonts/sap-launch-icons.eot?#iefix") format('embedded-opentype'), url("../../../../../UI5/sap/ushell/themes/base/fonts/sap-launch-icons.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
The icons are also available in the "Icon" selector of Fiori Launchpad Designer (FLPD) by name. So the questions are:
Is it possible to use own fonts similar to existing fonts?
If so, where and how should the font be placed?
If so, where and how should the icon names be defined, so that they can be used like this: "sap-icon://myNameSpace/iconname"?
I know already how to do it inside my own apps using sap/ui/core/IconPool (For reference: https://ui5.sap.com/#/topic/21ea0ea94614480d9a910b2e93431291). But how to do it in a standard theme inside the Fiori Launchpad / Fiori launchpad Designer?
Fiori design guidelines explicitly warn not to use custom icons inside Fiori launchpad e.g. Tiles:
We have decided to stop unique launch icons being created for individual apps. Creating a unique icon for every app was and is not scalable in terms of iconography and production [...].
Projects without a SAP Fiori ID do not get an individual icon.
Do not develop your own icons or use custom icons.
As such, there is currently no public APIs or documented solutions to provide custom icons for FLP.
Update: found the Note 2411631 which says pretty much the same thing:
There is currently no officially supported method for adding custom icons to the Launchpad for use with tile creation.
As well as the statement by Thorsten Dencker:
Changing the Icon Font is officially not supported by the SAP Theme Designer.
[...] Issue coming up with custom CSS cannot be handled by the normal support process.