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

[Toggle] Fix layout #1686

Merged
merged 2 commits into from
Oct 21, 2015
Merged

[Toggle] Fix layout #1686

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d907417
[Toggle] Fix layout
KapJI Sep 20, 2015
ebbd08f
Make 46px less magic
KapJI Oct 20, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/toggle.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ let Toggle = React.createClass({
},
label: {
color: this.props.disabled ? this.getTheme().labelDisabledColor : this.getTheme().labelColor,
width: 'calc(100% - 46px)',
Copy link
Contributor

Choose a reason for hiding this comment

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

I understand that you're allotting 46px of space to the toggle element, and the rest of the width to the label element. Is that correct? If so, is assigning 46px to the toggle always guaranteed to work?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, that is correct and it will work. Before it was calc(100% - 60px) inherited from EnhancedSwitch. 46px means 36px of toggle width + 8px of margin from left (in EnhancedSwitch) + 2px of padding-left from line 44.

Copy link
Contributor

Choose a reason for hiding this comment

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

👍

Copy link
Member

Choose a reason for hiding this comment

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

@KapJI Can you make the 46px string less magic? I think that we can use styles.icon.width + 10 to start.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@oliviertassinari No problem, but you can't define styles with itself.

},
};

Expand Down