How would one change the styling of a single component? For example force md styling of searchbar on iOS.
You can set mode attribute to force the Android style regardless of the platform it’s running on.
<ion-searchbar mode="md"></ion-searchbar>
Related
Ionic's component ion-item has different default values for the CSS variable '--inner-padding-end' on iOS and Android.
Padding Android
Padding iOS
On Android its symmetrical and on iOS its asymmetrical.
Can someone please explain me the reason behind this?
It is for the app to have a native touch and feel. Ionic built the default platform style for each platform (Android and iOS). If you don't like the style, you can always apply a custom css or override the default style configuration.
My website's Arabic font letters appears separated from each other which makes it un readable so I want to use a different font that will display only on iPhone & iPad devices in wordpress, I am using Elementor to design the site. Is there's a code or plugin I can use to apply different font for iOS devices?
https://ozaro.com/ar/our-history/
Well you cant do that just using css. You'll need JavaScript too.
Here is an answer on finding if device is iOS or not.
So basically this is what you'll have to do.
Set a unique classname for the parts of your website you need that font to be applied. E.g. "arabicf"
Go to your footer builder and drag drop an html widget.
Inside the widget write your js between script tags.
P.s. the logic behind the js is simple
If ios then "arabicf" style fontFamily = X.
Does anyone know how to place an icon in a toggle?
Is this even possible with the new shadow dom rules?
https://beta.ionicframework.com/docs/api/toggle/
I have tried placing a icon element in the toggle but no succes.
Thanks,
Kelvijn
It's not possible to add attributes to ion components.
Confirmed by admin from the ionic slack.
Going to make my own slider then.
Is it possible to set a single component in a page to a certain platform.
For example, I have an iOS screen and I want the bottom toolbar just for this one page to use the Android Style (material design).
Yes, this is possible every component in Ionic can be configured on 3 levels Global, Platform and Component level. To make that particular Toolbar component use Android Material Design Style no matter what platform it is, you can use the "mode" attribute and set it to md.
<ion-toolbar mode="md">
<ion-title>Scrolls with the content</ion-title>
</ion-toolbar>
You can also configure to Windows with wp and IOS with ios values for the mode attribute.
See http://ionicframework.com/docs/v2/api/components/toolbar/Toolbar/ for more details.
Is it possible to customize the open(-) and close(+) icons of jstree using the types plugin ? I can customize the node icons using types plugin,but was wondering, if I can do something same for expando icons also.
The jstree icons are all css based sprites so you could always include your own CSS after the jstree.css where you have specific rewrites of the ins.jstree-icon instances.