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

[Cards] Centered Cards Not Functioning #2520

Closed
jlukic opened this issue Jul 4, 2015 · 1 comment
Closed

[Cards] Centered Cards Not Functioning #2520

jlukic opened this issue Jul 4, 2015 · 1 comment
Labels
Confirmed Bug
Milestone
2.0.1

Comments

@jlukic
Copy link
Member

jlukic commented Jul 4, 2015

From @cyllu2
This simple HTML,

<div class="ui padded row">
    <div class="centered column">
        <div class="ui three stackable cards">
            <div class="blue card">fdsfsdf</div>
            <div class="blue card">fdsfsdf</div>
            <div class="blue card">fdsfsdf</div>
        </div>
    </div>
</div>

should center the cards and then stack them. However, on IE(10) and Safari on iOS and possibly other browsers as well, they are left-aligned all the time, even when stacked.

Semantic-Org/Semantic-UI-Meteor#26
@jlukic
Copy link
Member Author

jlukic commented Jul 4, 2015

Hi, centered column is functioning as expected. That will just center a columns content in its row.

Adding a variation like three cards will split the width evenly into thirds so they will always take up the full width and not need to be centered.

The correct "sui" html would be something like:

<div class="ui grid">
    <div class="column">
        <div class="ui stackable centered cards">
            <div class="blue card">fdsfsdf</div>
            <div class="blue card">fdsfsdf</div>
            <div class="blue card">fdsfsdf</div>
        </div>
    </div>
</div>

However this is not functioning correctly Since plural rules are missing centered declarations for flex.

I have resolved this in tests by adding justify-content: center; on cards.
http://jsfiddle.net/srt1zmwd/

I'll fix this in patch

@jlukic jlukic added this to the 2.0.x milestone Jul 4, 2015
jlukic added a commit that referenced this issue Jul 4, 2015
@jlukic
Adds justify content rules for centered cards #2520
6ab0e48
@jlukic jlukic closed this as completed Jul 4, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Confirmed Bug
Projects
None yet
Milestone
2.0.1
Development

No branches or pull requests
1 participant
@jlukic