Bulma: Tabs Border not working right in Chromium

[alexanderwe]

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.3.1]
My browser is: Chromium 53.0.2785.143 (Electron)

Description

I am using Bulma with Electron and React. When I want to use the simple horizontal tabs, a small issue is happening when I set is-active on the first tab. The bottom border seems to be 1px higher than the base border. When is-active is set on the second tab, everything is working fine.

<div class="tabs">
    <ul>
        <li class ="is-active"><a>Pictures</a></li>
        <li><a>Music</a></li>
        <li><a>Videos</a></li>
        <li><a>Documents</a></li>
    </ul>
</div>

This problem also applies to all other tab implementations.

Steps to Reproduce

1. Use Chromium
2. Insert example HTML from http://bulma.io/documentation/components/tabs/

Solution

I changed the CSS for the tabs class from

.tabs ul { align-items: center; ... }

to

.tabs ul { align-items: baseline; ... }

and everything is working as expected.

Is this the expected behavior ? If this is not the case, is it possible to change the CSS according to my solution ?

Thanks in advance. And also thanks for this great CSS framework !

[ilicmarko]

This can't be reproduced, has it been fixed?
Tested in:

• Firefox 50.1.0
• Chrome 55.0.2883.87 m
• Chrome 57.0.2984.0 canary
• Edge 38.14393.0.0
• Opera 42

[alexanderwe]

Maybe the Problem is related specific to Electron or within my Setup.

Yes, it was solved with changing the CSS to

.tabs ul { align-items: baseline; ... }.

[alexanderwe]

I think because it can not be reproduced I can close this issue for now.

[c0ffeeee]

Had the same problem. Issue seems to be when you add tabs inside container with the "content" class:

bulma.css 1690:
.content li + li { margin-top: 0.25em; }

[henriquemattos]

I've the same problem. @alexanderwe 's solution worked for me but I don't think I should overwrite Bulma's CSS. I'm using version 0.5.1. I'm using FirefoxDeveloperEdition version 56.0b4 (64-bit).

[micobarac]

Actually, I am facing the same issue on Windows 10 x64 with the latest Chrome version. Aligning items to the baseline did the trick.

<section class="section content">
  <div class="container is-fluid">
    <h1 class="title">Dashboard</h1>
    <div class="tabs">
      <ul>
        <li class="is-active"><a>Pictures</a></li>
        <li><a>Music</a></li>
        <li><a>Videos</a></li>
        <li><a>Documents</a></li>
      </ul>
    </div>
  </div>
</section>

.tabs ul { align-items: baseline; ... }