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.

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

[Label] Content in floating labels should not wrap whitespace #404

Merged

Conversation

lubber-de
Copy link
Member

Description

If a floating label had whitespace inside, especially when including icons, it did not stay inline. This happens for every whitespace.

To make it still look consistent even if the label content is a bit larger, i also made the label centered to the top right corner of the parent element,

Testcase

http://jsfiddle.net/k1qp7dgv/3/
Remove CSS to see the issue

Screenshot

Before

image

After

image

Closes

Semantic-Org/Semantic-UI#4217
Semantic-Org/Semantic-UI#4155

@lubber-de lubber-de added type/feat Any feature requests or improvements lang/css Anything involving CSS state/awaiting-reviews Pull requests which are waiting for reviews tag/sui-issue Taken from an existing Issue/PR of SUI labels Jan 17, 2019
@lubber-de lubber-de added this to the 2.7.x milestone Jan 17, 2019
Copy link
Member

@y0hami y0hami left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@lubber-de
Copy link
Member Author

lubber-de commented Jan 17, 2019

I also prepared more enhancements by introducing:

.ui.left.floating.label {}
.ui.left.aligned.floating.label {}
.ui.right.aligned.floating.label {}

image

http://jsfiddle.net/04vgcfdt/

Should i commit this here or submit a new PR (which will depend on merging this one first) ?

@y0hami
Copy link
Member

y0hami commented Jan 17, 2019

@lubber-de separate PR.

@lubber-de
Copy link
Member Author

@lubber-de separate PR.

OK, will do right after this one has been merged

Copy link
Member

@ColinFrick ColinFrick left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@y0hami y0hami merged commit 12be9b1 into fomantic:develop Jan 22, 2019
@lubber-de lubber-de deleted the fix/4217/unwrapping_floating_centered branch January 22, 2019 11:06
@lubber-de lubber-de modified the milestones: 2.7.x, 2.7.2 Jan 22, 2019
@lubber-de lubber-de removed the state/awaiting-reviews Pull requests which are waiting for reviews label Jan 22, 2019
y0hami pushed a commit that referenced this pull request Jan 22, 2019
As announced in #404 (comment) this PR adds the possibility to align a floating label to the left or right. This is especially useful if the label has got larger content, so it is getting more clear where the label belongs to
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lang/css Anything involving CSS tag/sui-issue Taken from an existing Issue/PR of SUI type/feat Any feature requests or improvements
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants