How to remove white line on top and bottom

1

Hello, I have a white line on top and bottom of the app. How do I remove that? I am using Android 4.0.3.
Does anybody else have that problem?

2

I have that on android 4.1, I think its a cordova issue though. Best thing would be to report the issue to cordova

3

Same issue, has this been solved?

4

Still not solved, any updates on this?
It seems to be specific to non-chrome based implementations, in other words < android 4.4 specific.
It looks like the same issue than the one reported on side menus that also display white borders that become visible if you try to use xxx-dark on any elements, issue that can be minimised (but not completely solved) by applying the following style:

.grade-b .menu-content, .grade-c .menu-content {
	border-right: 1px solid #777; // or none for that matter
	border-left: 1px solid #777; // or none for that matter
}

However, the white bar on top and bottom still remain, forcing us developers to keep light headers and footers, and ban any other colour.

Ionic team, is there any workaround similar to the one mentioned above specific for the page top and bottom white lines?

Michael

5

Hi Guys,

anyone workaround / fix for this issue?

Thanks!

6

Hi,

I managed to remove the white line when activating a tab.

Try this css code:

.tabs-striped.tabs-positive .tab-item.tab-item-active, .tabs-striped.tabs-positive .tab-item.active, .tabs-striped.tabs-positive .tab-item.activated { margin-top: 0px !important; color: #fff !important; border-style: none !important; border-width: 0 0 0 0 !important; border-color: #0E8CCD !important; /* This is the color of my tab. You might want to change it to yours */ }

I hope it will work on you. :slightly_smiling:

7

Maybe worth sharing: I have found out that this bug just appears if you have a “tabs-striped” class in your tab footer. Removing this class has removed the white line underneath the footer.