New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Menu with specified number of items is one pixel off when attached to a segment #5073

Closed
lucapette opened this Issue Feb 23, 2017 · 2 comments

Comments

Projects
None yet
2 participants
@lucapette

lucapette commented Feb 23, 2017

Hi!

I think I ran into a bug. CSS is not my strongest suit so I apologise in advance in case this is intended behaviour.

Here is the code I'm using:

<div class="ui attached segment">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don&#x27;t look even slightly believable. If you are going to use a passage of Lorem
    Ipsum, you need to be sure there isn&#x27;t anything embarrassing hidden in the middle of text
</div>
<div class="ui bottom attached item two menu">
    <a class="active item">Section 1</a>
    <a class="item">Section 2</a>
</div>

As you can see in this jsfiddle, the menu is 1px off from the attached segment on the right side.

I ran into the bug using with the React Menu component with the widths prop. Not sure if that's relevant but I thought it was worth mentioning. I looked at existing issues here on github and I found #1557 and #1587 which seem related but my CSS knowledge is too limited for me to connect the dots. So sorry if that's misleading.

This code (which I added as a comment in the jsfiddle in case you want to give it a quick try):

.ui.attached.menu {
  max-width: calc(100% + 1px);
}

fixes the problem but I doubt it's an adequate solution. I wish I could open a PR with a fix but, once again, I don't have the knowledge to fix it on my own. And I'm still not 100% sure it's a bug. Maybe I'm doing something wrong.

Thank you very much for this awesome project!

@Banandrew Banandrew added the Duplicate label Feb 24, 2017

@Banandrew

This comment has been minimized.

Show comment
Hide comment
@Banandrew

Banandrew Feb 24, 2017

Contributor

Hi, this is a known issue: #4248.

Contributor

Banandrew commented Feb 24, 2017

Hi, this is a known issue: #4248.

@Banandrew Banandrew closed this Feb 24, 2017

@lucapette

This comment has been minimized.

Show comment
Hide comment
@lucapette

lucapette Feb 24, 2017

@Banandrew thank you for the info! Interesting that I didn't find it on my own!

lucapette commented Feb 24, 2017

@Banandrew thank you for the info! Interesting that I didn't find it on my own!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment