Navbar linear gradient and button backgrounds

1

Hi does anyone know how to achieve a navbar like this with Ionic? I can change the navbar background to a single color with scss but I need gradient and for buttons I need a background color like in the image below

1 Like
2

Youā€™ll need to use css gradients for that.

3

Yes I know. but where shall I assign it? And how can I modify those buttons so they have background like that?

4

You should use button-clear so there is no background on them.

5

Thank you for the replies but there is still gradient background behind the buttons in that codepen youā€™ve sent.

6

So you donā€™t want the gradient on the button??

The codepen has been updated with that.

7

how we can set gradient color on header-bar?
i did it by CSS style, but it donā€™t accept and in the device shows only one color, but in computer browser works correct.

8

Are you trying this in ios or android? Can you remote inspect to see what lines of css arenā€™t being applied?

9

@mhartington
iā€™m working on ā€˜wwwā€™ folder. (not in the platform folder and not on the specified platform).
in browser (windows 7 - firefox, chrome,ā€¦), itā€™s ok. but when i installed it on android and run it (via ionic run command) it show only one color! (android ver4.2)
app run in device and i canā€™t debug it.

10

Hmm got this too, on a 4.3 and below. So after some research, it seems that 4.3 and below only have partial support for gradients, so it will be hit-or-miss for support

1 Like
11

I ran into this issue when I wanted to apply gradient on the navbar. It fails with a plain color. I think thereā€™s a bug somewhere because the gradient works elsewhere within the ion-content. But once applied on the navbar, it gets replaced with a plain color that is just a mix of the two colors. Iā€™ve tried to inspect and see where the css gets mixed up but have not been able to. I wish someone from ionic checks for us.

12

Iā€™m thinking the issue is due to the webview on older android devices.
You may want to check out this.

13

Itā€™s not a thing about the webview. Thereā€™s support for it. The gradient applies very well when withing But fails if applied to the header bar. I didnā€™t try footer bar though. But I believe thereā€™s an overriding css somewhere, or something I canā€™t explain. Itā€™s definitely not a support thing. The android webview supports it well. Itā€™s simply failing when in a navbar or header bar.

14

Hi @peterrobot,

If there is overriding CSS styling, setting ā€˜!importantā€™ flag should take care of that.
Did you try Crosswalk build?

15

I tried !important still no luck. Iā€™ll share a screen from my app with details but for the mean time, Iā€™ll ry Crosswalk and see.

16

So I can confirm that issue is with the webview.
I tried this on a vanilla cordova project and still had issues with the gradient rendering.
It would always use the fallback background color.

17

I have tried crosswalk; the gradient issue was resolved, native ā€œselectā€ input renders well but I wasnā€™t really satisfied on the all. I just donā€™t know why. The generated apk is too large, scrolling is not as fluid, there are always some dots and lines on the screen during scrolls. The splash screen is white, ā€¦etc.

I just had to reverse to the default webview and look for alternative ways around those issues encountered with the default webview, for now. I wonā€™t like my users to be downloading a very big file during app upgrades.

18

Well the splash screens have been fixed

Just it hasnā€™t been published by the cordova team.

As for the scrolling, can you give the nightly builds a try, weā€™ve android to use native-scrolling isntead of js scrolling.

And again, for the file size, this should be fixed with the latest release of the cli, 1.3.10.

19

Just ran into the same problem (wanted gradient in header). After lots of try-and-error I came up with this, seems to be the easiest solution:

`

`

css-class should have width: fill;height: SOMETHINGpx; and any gradient you want.