Programmer 400 Programmer 400 - 4 months ago 20
Javascript Question

Small strange rendering bug

There are two small "bugs" when I render my CSS tabs. If I press the third tab then the vertical line to the left disappears. In the example in the manual from it doesn't happen and the line is there when I press "third". I wonder what can be wrong with the code.



$(function () {
$('.menu .item').tab();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<div class="ui top attached tabular menu">
<a class="item active" data-tab="first">First</a>
<a class="item" data-tab="second">Second</a>
<a class="item" data-tab="third">Third</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
Second
</div>
<div style="margin-right:0px;margin-left:0px" class="ui bottom attached tab segment" data-tab="third">
Third
</div>





If you compare pressing "second" to "third" then the vertical line to the left disappears which it should not do. Can you find the error?

Answer

If you look at the .ui.attached.segment class form semantic.min.css , it has a margin: 0 -1px which adds a margin left and right of -1px.

For the second tab, this margin seems to be overriden by .ui.tabular.menu+.attached:not(.top).segment+.attached:not(.top).segment whereas its not overriden for the third one.

A simple fix would be to add a margin-right/left of 0px to the third tab