Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[Card] horizontal cards meta & actions are forced to the right #159

Closed
y0hami opened this issue Oct 8, 2018 · 1 comment
Closed

[Card] horizontal cards meta & actions are forced to the right #159

y0hami opened this issue Oct 8, 2018 · 1 comment
Labels
lang/css Anything involving CSS type/bug Any issue which is a bug or PR which fixes a bug
Milestone
2.7.5

Comments

@y0hami
Copy link
Member

y0hami commented Oct 8, 2018

Bug Report

Steps to reproduce

  1. create a horizontal card
  2. add some meta data or a button

Expected result

The meta data or button should appear under the card

Actual result

The meta data or button is forced to the right

Description

This is caused because of flex-direction: row when setting flex-wrap: wrap buttons then flow under the card but meta data will force the content to go under the image. If the content is too long it will also wrap to the next row.

Testcase

https://jsfiddle.net/Lwxau2yn/

Screenshot

image

Version

2.6.2
@y0hami y0hami added type/bug Any issue which is a bug or PR which fixes a bug lang/css Anything involving CSS tag/help-wanted Issues which need help to fix or implement tag/good-first-issue Good issues for new starters to try labels Oct 8, 2018
@tcmal
Copy link
Contributor

tcmal commented Oct 12, 2018

I'll do this

@tcmal tcmal mentioned this issue Oct 12, 2018
Closed
@ko2in ko2in mentioned this issue Apr 10, 2019
Merged
@lubber-de lubber-de added tag/next-release/nightly Any issue which has a corresponding PR which has been merged and is available in the nightly build and removed tag/good-first-issue Good issues for new starters to try tag/help-wanted Issues which need help to fix or implement labels Apr 11, 2019
@lubber-de lubber-de added this to the 2.7.5 milestone Apr 11, 2019
exoego pushed a commit to exoego/Fomantic-UI that referenced this issue Apr 30, 2019
@ko2in
fix(card): force horizontal cards meta, extra content and actions to …
77b8400 
…align properly

As reported in fomantic#159, the meta data, actions and extra content are forced to display in one row in horizontal cards. It's because of `flex-direction: row` setting `flex-wrap: wrap`, and the flex item for meta data has no initial size. So, it forces the other flex items to wrap in available spaces next to it which leads them displaying in the same row.

Since, the extra content and buttons are always supposed to appear on the next line and should take 100% width of the card. The meta data should have initial size with minimum value which will make sure the meta data to wrap in the available space on the current row and the extra content and buttons to appear in the next row respectively.

Closes fomantic#159
@y0hami y0hami closed this as completed in bc1f08b May 16, 2019
@lubber-de lubber-de removed the tag/next-release/nightly Any issue which has a corresponding PR which has been merged and is available in the nightly build label Jun 16, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
lang/css Anything involving CSS type/bug Any issue which is a bug or PR which fixes a bug
Projects
None yet
Milestone
2.7.5
Development

Successfully merging a pull request may close this issue.

fix(cards): fix horizontal card actions being forced to the right.
3 participants
@tcmal @y0hami @lubber-de