Joak
September 29, 2020, 4:16pm
1
Hi guys.
My app (cordova/F7) works fine on the browser & Android platform , on iOS the NavBar component look different
On the browser and Android looks like this
On iOS looks like this
But not only looks different but also works different, when “click” on continue("Continuar) appears the Safary navigation bar like this
Could you help me please?
It looks different because you didn’t change Navbar bg color properly, it should be done via CSS variables --f7-navbar-bg-color
and --f7-navbar-bg-color-rgb
(used by iOS theme)
Joak
September 29, 2020, 4:36pm
3
thank you … about the Safary navigation bar, is the same?
This is how Safari works itself when you tap close to the url bar, it is not possible to do something with it
Joak
December 7, 2020, 3:32pm
6
Hi Vladimir
I just added to the css file …
.ios{
--f7-navbar-bg-color: orange ;
}
and index.js file …
theme: 'ios',
But I continue with looks diferent Android and ios device
Could you help me please?
Look at my comment, iOS theme uses also --f7-navbar-bg-color-rgb
variable
Joak
December 7, 2020, 4:25pm
8
nolimits4web:
–f7-navbar-bg-color-rgb
OKS
Now the code …
.ios{
--f7-navbar-bg-color: orange ;
--f7-navbar-bg-color-rgb : orange;
}
Looks with the same problem
I’m deleted history and data (safari browser) each try.
orange
is not a proper RGB value, should be something like:
--f7-navbar-bg-color-rgb : 255, 0, 0;
Joak
December 7, 2020, 5:16pm
10
You right !!
For last, I have seen the same issue (looks different android & ios devices) with the type font on the NavBar, is there another “parameter” that …
--f7-font-family: 'DS-POINT', 'Roboto', system-ui, Noto, Helvetica, Arial, sans-serif;
ios show with another font and in the middle the “title”
Andoid looks ok