[Solved] Can't remove top border on Footer

ionic-v1
1

Has anyone bumped into this issue? My footer has no top border while testing in a webview, but after moving a build onto my iPhone 5s it gets a mysterious 1px solid white top border.

I’ve tried every CSS manifestation of no border I can think of, yet it remains.

Thoughts?

2

A closer look…

3

This worked for me in my app.css, but I can’t tell if you are using tab or not. May at least give a clue to try adjusting padding instead though.

.tabs{
padding-top:0px;
}

4

Are you testing on Android @daemoncahill

5

I actually found a workaround. I wasn’t applying a footer color class to the div, so I just applied .bar-positive and overwrote the styles, and voila!

Still not sure why the border is applied when no footer class exists on the div.

6

Awesome, glad to know you worked it it. I’m going to marked this as solved.

7

Applying a footer class and set border-top to none still can’t remove the mysterious top border in iOS. ionic version: 1.0.0 beta.5b

8

I still have this problem with the mysterious 1px border-top on iOS. It isn’t visible on desktop. Any suggestions would be awesome.

9

Try this:

.tabs-dark > .tabs {
background:none;
background-color:black;
}

There are some funky background styles on tabs that create a border effect. Not sure why that was done.

2 Likes
10

For anyone that is still having the same problem, and are using Sass. The style in the scss will not work due to when its compiled, however it will work on your style.css/app.css. My solution adding a ‘no-bgColor’ class to the header and footer and placing the code in the style.css:

.bar.bar-header.no-bgColor, .bar.bar-footer.no-bgColor{
border: 0px;
border-color: transparent;
border-top: transparent;
border-bottom: transparent;
background-image: none !important; }
1 Like
11

It works. I just customize the tabs color in my own css. The iOS version still show 1px border even I have already set border: none. And it (background: none) works. Thank you.

12

I found this solution :
.header-md::after, .tabs-md[tabsPlacement=“top”] > .tabbar::after, .footer-md::before, .tabs-md[tabsPlacement=“bottom”] > .tabbar::before {
background-image: none;
}

That removes the top border which is a base64 encoded repeating image.