search

seyhunak / twitter-bootstrap-rails

Twitter Bootstrap for Rails 6.0, Rails 5 - Rails 4.x Asset Pipeline
https://github.com/seyhunak/twitter-bootstrap-rails
4.49k stars 997 forks source link

dd's and dt's display unevenly in fluid widescreen layout in show view generated by bootstrap:themed generator #274

Closed garysweaver closed 10 years ago

garysweaver commented 12 years ago

Noticed that when you use the bootstrap:themed generator, e.g.:

rails g bootstrap:themed Posts

it creates a dl with dl-horizontal that contains dt's and dd's that display unevenly when using a fluid layout on a wide screen in FF 13.0, Chrome 19.0, and Safari 5.1.7 in OS X 10.7.4

I looked and there appears to be no override in the rails gem's css for this particular attribute.

It seems that this was introduced in bootstrap's less/type.less a few months ago when this code was introduced that seems to make the dt shorter than the dd:

@baseLineHeight - 1; // fix jank Helvetica Neue font bug

That change was introduced in the following commit to bootstrap: https://github.com/twitter/bootstrap/commit/7a8d6b19767a92b1c4ea45d88d4eedc2b29bf1fa#diff-4

If you can confirm, please comment here where I submitted the issue to the bootstrap project: https://github.com/twitter/bootstrap/issues/3806

I'm just mentioning it here because it is something affecting the display of dl's with a sufficiently long list of dd's and dt's in v.2.1.0 of twitter-bootstrap-rails. A workaround is to ensure that both dd and dt are set to the same line-height in app/assets/stylesheets/bootstrap_and_overrides.css.less, but really it looks like dt should just be set to @baseLineHeight, maybe except for those using Helvetica Neue font:

// ensure dt and dd are the same height
dt, dd {
  line-height: 18px;
}
garysweaver commented 12 years ago

Associated pull request: https://github.com/seyhunak/twitter-bootstrap-rails/pull/277