.ui.container & .right.menu: no right border

[louwers]

  <div class="ui fixed icon menu">
    <div class="ui container">
      <a class="item"><i class="chevron left icon"></i></a>
      <a class="item"><i class="chevron right icon"></i></a>
      <div class="right menu">
        <a class="item"><i class="info icon"></i></a>
        <a class="item"><i class="archive icon"></i></a>
      </div>
    </div>
  </div>

As can be seen here, the last item of the right menu does not have a border on the right:

The use of .ui.container to reduce the size of a menu is shown in one of the sample layouts, so I felt like reporting it here. Thanks. :+1:

See also: http://jsfiddle.net/2nsp71f7/3/

[louwers]

Quick fix:

.ui.menu .item:before,
.ui.menu .right.menu .item:last-of-type:after { /* this line is the quick fix */
  position: absolute;
  content: '';
  top: 0%;
  right: 0px;
  height: 100%;
  width: 1px;
  background: rgba(34, 36, 38, 0.1);
}

For a more permanent solution, I think this needs to be taken a look at.

[daltones]

I'm having this problem too.

[frickenate]

Indeed, the first left item in a menu places a border to the left of the item in addition to the one that gets placed to the item's right. But if you float the last menu item to the right, it simply repurposes the right-sided border by repositioning it to the left, leaving the right side of the item naked.

Very odd. I can tell already that I will prefer semantic-ui over bootstrap, but struggling on the very first component I touch - the menu - is a little disconcerting.

In version 2.2.4, here is the block in question that adds the left border to the first menu item. I added the following in my custom css to perfectly match the logic for adding the equivalent border on the last right item:

@media only screen and (min-width: 768px) {
    .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item.right:not(.borderless):last-child {
        border-right: 1px solid rgba(34, 36, 38, .1)
    }
}

[louwers]

@frickenate Last issue I brought up here was fixed in a day. Don't be discouraged. 😉

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[louwers]

Still a problem stale bot.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[louwers]

Not fixed.

[khimsh]

Still not fixed.

[lubber-de]

Implemented in Fomantic-UI by https://github.com/fomantic/Fomantic-UI/pull/480