.item together with .tabs inside a .card results in no border bottom

[skulptur]

It is visible in the css docs in the cards section. It is hardly noticeable if you use the default colours but becomes really noticeable if you change to something more contrasty.

See for yourself comparing http://ionicframework.com/docs/components/#card-images with http://ionicframework.com/docs/components/#card-showcase (no border bottom on the latter, tested with up-to-date chrome).

Ok, ok... not such a big deal in those examples but in my current design it really sticks out and it might be the case of others in the future so please give it a look. I can take some screenshots if needed...

Thanks in advance

[skulptur]

By the way, it is caused by .tabs having border-bottom: none !important;. I hope there is a good reason for the !important statement because the solution was override with .item.tabs{ border-bottom:1px solid $button-light-border !important; } (that would get it back to default looks, but screw inheritance).

[perrygovier]

Hey @Spredemann, can you provide an example of where it's a problem? We should probably avoid the use of !important tags wherever possible, but I suspect a change here would break quite a few people's apps, so I'd want to be sure of the problem.

[skulptur]

I set the border color red so it is noticeable but it's the same in the docs. In the second card the tabs border top is also looking weird (thinner and darker?). Oh and in case it matters I am on a mac retina display...

<ion-view title="Card">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <div class="row">
      <div class="col">
        <div class="list card">
          <div class="item item-avatar"><img src="http://tutupash.com/site/assets/nin_logo.jpeg"/>
            <h2>Pretty Hate Machine</h2>
            <p>Nine Inch Nails</p>
          </div><a href="#" style="border-color:red" class="item item-icon-left assertive"><i class="icon ion-music-note"></i>Start listening</a>
        </div>
        <div class="list card">
          <div class="item item-avatar"><img src="http://ionicframework.com/img/docs/mcfly.jpg"/>
            <h2>Marty McFly</h2>
            <p>November 05, 1955</p>
          </div>
          <div class="item item-body">
            <p>
              This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
              the content is from a card-body consisting of an image and paragraph text. The footer
              consists of tabs, icons aligned left, within the card-footer.
            </p>
            <p><a href="#" class="subdued">1 Like</a><a href="#" class="subdued">5 Comments</a></p>
          </div>
          <div style="border-color:red" class="item tabs tabs-secondary tabs-icon-left"><a href="#" class="tab-item"><i class="icon ion-thumbsup"></i>Like</a><a href="#" class="tab-item"><i class="icon ion-chatbox"></i>Comment</a><a href="#" class="tab-item"><i class="icon ion-share"></i>Share</a></div>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>

[skulptur]

Just to complement it a little more. I mentioned above that the border top of the second example tabs also looked strange and I just came across it by chance... It is somehow getting the value of $button-stable-border so if I happen to change that var it looks really disconnected as the rest of the card borders will still look light grey.

In this shot I've already applied the fix mentioned in my second comment, but I changed $button-stable-border to red so you guys can see what I'm talking about. I hope it helps...

[perrygovier]

Hey @Spredemann, I spoke to @adamdbradley who initially put that border-bottom tag in, and he believed it was marked !important to fix a specific device bug, but couldn't remember which. I'd like to take a stab at removing it, but I'm going to proceed very cautiously, and wait until the next beta release before committing this fix.

There's a good chance fixing this will break something else on that unknown device, so waiting until the next beta means we get a week or so of nightlies to correct that new device bug before it winds up in a beta.

[perrygovier]

fixed in bf1c1bc97151e3c25345b5ba9024015ef9865879

[skulptur]

thanks :D

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.