Border still visible on iOS/Android

ionic-v1
1

I don’t really like the black border that’s between the tab-bar / header and the view. I’m using this CSS (in style.css) to get rid of it:

.bar.bar-dark {
border: none;
}


.tabs-dark > .tabs, .tabs.tabs-dark {
border: none;
}

This works fine when testing locally in Chrome, no borders are shown. However when I install the app on iOS or Android, the border is still there… Any idea what would be causing this? Is there a better way to get rid of the border?

2

Inspect the element in Safari / Chrome when you run the app in the simulator / device and find which CSS rule causes this behavior, then override it in your CSS.

3

Like @coen_warmer has suggested, do some inspection on the elements in the dev tools. Also, which version of ionic are you using, Beta 3?

4

I did, but I couldn’t find anything that adds a border to .bar or .tabs… Again locally on Chrome there are no borders, on Android (Chrome and PhoneGap) there are. Maybe it’s the view that has the borders? I can’t figure it out atm, still new to CSS3…
Using beta3.

This is on Chrome (locally, windows 8.1)

This is on iPhone 4S iOS7
http://i.imgur.com/N5uL3kG.png

The color of the border is #111, which is part of:

  .bar.bar-dark {
    border-color: #111;

But I’m overriding that with border: none; in the style.css, shoudn’t that get rid of it?

Figured it out, it was background-image: linear-gradient(0deg, #111, #111 50%, transparent 50%); Changed those values to #444. Now it works

1 Like
5

Same thing for card. Solution:
.tabs { background-image: linear-gradient( 0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); }