Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

width of input and select elements on new bookmark folder form is not equal #5192

Closed
luixxiul opened this issue Oct 27, 2016 · 4 comments · Fixed by #6035
Closed

width of input and select elements on new bookmark folder form is not equal #5192

luixxiul opened this issue Oct 27, 2016 · 4 comments · Fixed by #6035

Comments

@luixxiul
Copy link
Contributor

Describe the issue you encountered: width of input and select elements on the new bookmark folder form is not equal

clipboard01

Expected behavior: it should be equal

  • Platform (Win7, 8, 10? macOS? Linux distro?): Windows 10
  • Brave Version: 0.12.7 RC1
  • Any related issues:

cc: @jkup

@luixxiul luixxiul added this to the 0.12.8dev milestone Oct 30, 2016
@luixxiul luixxiul added the design A design change, especially one which needs input from the design team. label Oct 31, 2016
@bbondy bbondy modified the milestones: 0.12.9dev, 0.12.8dev Oct 31, 2016
@bsclifton bsclifton added bug/good-first-bug and removed design A design change, especially one which needs input from the design team. labels Nov 4, 2016
josiah-keller pushed a commit to josiah-keller/browser-laptop that referenced this issue Nov 7, 2016
@bsclifton bsclifton removed this from the 0.12.9dev milestone Nov 8, 2016
@bsclifton
Copy link
Member

Removed milestone- let's discuss if you feel strongly

@luixxiul luixxiul added this to the contributor backlog milestone Nov 25, 2016
@luixxiul luixxiul modified the milestones: 0.13.0, contributor backlog Dec 3, 2016
@jkup jkup self-assigned this Dec 3, 2016
@jkup
Copy link
Contributor

jkup commented Dec 3, 2016

@luixxiul I noticed this too on about:styles you can see the input type text is longer than the select boxes.

I'll assign to myself and try to get to it soon unless you want to take it?

@bsclifton
Copy link
Member

Looks like one of our contributors knocked it out 😄 Very cool!
#5837

@jkup I'll assign the PR over to you for review

@bsclifton bsclifton modified the milestones: 0.13.0, contributor backlog Dec 3, 2016
luixxiul pushed a commit that referenced this issue Dec 6, 2016
Fix #5192

Both input elements on the New Bookmark Folder form have the following
CSS properties set:

 * width: 100%;
 * max-width: 250px;
 * padding: 0 5px;

The default value for box-sizing is content-box (see
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing). This
causes the input field for the bookmark folder's title to be 100% +
5px + 5px (width + padding left + padding right) wide. However, the
padding is not applied to the select field for parent folder selection,
causing the field to be only 100% wide (without the padding).

Using border-box as value for the box-sizing attribute for both form
fields renders them at an equal width.
@luixxiul
Copy link
Contributor Author

Test plan: #6035 (comment)

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