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

Prevent 'Go' search button from overflowing #530

Merged
merged 2 commits into from Oct 13, 2014

Conversation

Projects
None yet
2 participants
@pquentin
Contributor

pquentin commented Oct 12, 2014

I prevented the overflow on Firefox and ensured both input (text and submit) had same height.

See the change with this gif

pquentin added some commits Oct 12, 2014

Prevent 'Go' search button from overflowing
Sphinx designed the sidebar to be 210px large using 220px width and 5px
padding on each side. If the sidebar is smaller than that, the 'Go'
buttom will drop below the search input. Setting a padding larger than
5px on each side will indeed make the sidebar smaller due to border-box
being content-box by default in CSS.
@pquentin

This comment has been minimized.

Show comment
Hide comment
@pquentin

pquentin Oct 13, 2014

Contributor

I was surprised to see that Chrome renders this correctly. so I investigated. Sorry, it's a bit long.

We have an input box and a 'Go' button, but also whitespace between those. (The values come from the devtools, you could have something a bit different.)

Portion Firefox Chrome
text input 170 + 4 = 174 170 + 2 = 172
whitespace 4 3
Go 18 + 12 = 30 18 + 12 = 30
Total 208 > 205 205 <= 205

The extra width in the text input comes from a browser stylesheet: in Firefox, default padding for input elements is 1px, while it is 0 in Chrome. So Chrome, by chance, happens to make the input + space + Go barely fit inside the bar, but if you zoom, things could break very easily. In Firefox, things don't fit, but if we change the left padding from 10px to 5px, we get 5px more, and 208 <= 210, so things work.

Preview

Contributor

pquentin commented Oct 13, 2014

I was surprised to see that Chrome renders this correctly. so I investigated. Sorry, it's a bit long.

We have an input box and a 'Go' button, but also whitespace between those. (The values come from the devtools, you could have something a bit different.)

Portion Firefox Chrome
text input 170 + 4 = 174 170 + 2 = 172
whitespace 4 3
Go 18 + 12 = 30 18 + 12 = 30
Total 208 > 205 205 <= 205

The extra width in the text input comes from a browser stylesheet: in Firefox, default padding for input elements is 1px, while it is 0 in Chrome. So Chrome, by chance, happens to make the input + space + Go barely fit inside the bar, but if you zoom, things could break very easily. In Firefox, things don't fit, but if we change the left padding from 10px to 5px, we get 5px more, and 208 <= 210, so things work.

Preview

@tych0 tych0 merged commit b090000 into qtile:develop Oct 13, 2014

1 check passed

continuous-integration/travis-ci The Travis CI build passed
Details
@tych0

This comment has been minimized.

Show comment
Hide comment
@tych0

tych0 Oct 13, 2014

Member

Awesome, thanks! This always annoyed me, but not enough to mess with the css :)

Member

tych0 commented Oct 13, 2014

Awesome, thanks! This always annoyed me, but not enough to mess with the css :)

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