Button line-height in Chrome

Question

Button line-height in Chrome

tobidelius opened this issue 11 years ago · 15 comments

Hi.

The default line-height for buttons doesn't seem right to me. Buttons height is 33px but should be 34px.

Line height is: 1.42857 but should be 1.428571429. We're missing some decimals.

Answer 1 · 2013-08-14T10:01:50.000Z

@sandelius I came to this issue today and found that we can config the sass number precision. may be this should be noted in the README :)

  ::Sass::Script::Number.precision = 10

Answer 2 · 2013-08-14T12:13:43.000Z

You are an angel! :)

Answer 3 · 2013-08-15T21:19:49.000Z

Putting Sass::Script::Number.precision = 10 in my Rails application.rb fixed all line-heights for me.

Answer 4 · 2013-08-16T15:40:14.000Z

thanks. It worked for me as well...

Answer 5 · 2013-09-11T01:27:13.000Z

👍 fix working here.

What is the most effective way to deliver this though? I'd hate to think every user needs to add this to their app.

Answer 6 · 2013-09-27T22:27:16.000Z

Very good solution! Thanks !!

Answer 7 · 2013-10-22T06:38:45.000Z

This fix is required for input groups and all buttons to display properly. This variable is being rounded to the default 5 decimals and causing display issues: https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_variables.scss#L51

@thomas-mcdonald How would you like to add this fix to the project?

Answer 8 · 2013-10-26T19:35:12.000Z

Let me know if this works for you. This sets it to [10, value].max, enforcing a minimum.

Answer 9 · 2014-02-12T18:35:49.000Z

This really needs to go into the docs of bootstrap sass, for those not using the gem.

Answer 10 · 2014-02-12T22:33:53.000Z

@coli is it not fixed?

e: duh yes, of course. Back 4 months ago I think the only real way of using it was through the gem.

Answer 11 · 2014-02-12T22:43:16.000Z

Bower support is still experimental, thanks for bringing this up -- Readme updated!

Answer 12 · 2014-02-28T21:16:42.000Z

This setting for the Sass number precision, where exactly do we set it when using the bower installation of bootstrap-sass, and how? As far as the package is concerned, all we get besides some informational files are the assets themselves in bower_components/bootstrap-sass/vendor/assets, but no configuration file of any kind.

The rest is just my Gruntfile with the compass target, but grunt-contrib-compass clearly states that not all compass options are exposed to grunt (and number precision certainly doesn't seem to be one of them). Do we need to shell out to a config.rb file using grunt-contrib-compass's "config" option, or something like that (e.g. the "raw" option)? In either case, what would be the configuration instruction syntax?

One suggestion is to make all this information a little bit clearer in bootstrap-sass' README file. I'd be happy to write a patch if I had the information at hand. Thanks!

Answer 13 · 2014-02-28T23:20:36.000Z

I've seen this in the wild for precision: https://github.com/peerb/generator-angular/blob/fdae59428a77260eb392de643a2ae7786819234c/templates/common/Gruntfile.js#L203
It would be great if someone who uses this could do this (I am not a node guy).

Answer 14 · 2014-03-01T01:25:38.000Z

Hi @glebm!

Thanks for the pointer. That would be the equivalent of using the "config" option of grunt-contrib-compass and putting the same directive in a compass-config.rb file, or whatever, which seems a great deal cleaner to me.

I'll try it and update this issue to let you know if it works, for documentation's sake, but... one tinni tiny little problem: how to easily tell off-hand if it worked? ;)

Answer 15 · 2016-08-15T22:46:21.000Z

In visual studio add "options": {"precision": 10} into your compilerconfig.json