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

Jump to bottom

Input type="range" formatting oddities #11990

Closed
Steve-OH opened this issue Dec 23, 2013 · 6 comments
Closed

Input type="range" formatting oddities #11990

Steve-OH opened this issue Dec 23, 2013 · 6 comments
Labels
css

Comments

@Steve-OH
Copy link

If we stack a text or number style input over a range input inside a col-xx div, they don't align very well:

<div class="col-md-3">
  <input type="number" class="form-control input-sm" />
  <input type="range" />
</div>

slider1

We can fix the alignment by adding a col-xx-12 class to the range input:

<div class="col-md-3">
  <input type="number" class="form-control input-sm" />
  <input type="range" class="col-md-12" />
</div>

But now the slider doesn't go all the way to the ends of the "track":

slider2

We have to remove the padding to get the slider to work correctly:

<div class="col-md-3">
  <input type="number" class="form-control input-sm" />
  <input type="range" class="col-md-12" style="padding:0;" />
</div>

slider3

(Screenshots are all from Chrome 31 on Windows 7.)

See also #11177.
@zlatanvasovic
Copy link
Contributor

Range isn't officially supported input and it should be untouched. Just add .col-md-xx directly to it, no need to put it into the .col-md-xx.

@Steve-OH
Copy link
Author

Just add .col-md-xx directly to it, no need to put it into the .col-md-xx.

I don't understand what you mean by that. Just add .col-md-xx to what?

@zlatanvasovic
Copy link
Contributor

To the range input.

2013/12/24 Steve Schafer notifications@github.com

Just add .col-md-xx directly to it, no need to put it into the .col-md-xx.

I don't understand what you mean by that. Just add .col-md-xx to what?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/11990#issuecomment-31172414
.

Zlatan Vasović - ZDroid

@Steve-OH
Copy link
Author

Unless you're doing something else that I can't figure out, that doesn't solve the problem. Adding .col-md-xx to the <input> itself has a visual effect that is different from what you get by adding it to a <div> around the <input>, but in neither case does the slider align with the text box.

@mdo
Copy link
Member

mdo commented Dec 27, 2013

I see no issue in Chrome 31.x on Windows 7 with your first code snippet.

screen shot 2013-12-27 at 12 55 10 pm

Source JS Bin link

@mdo
Copy link
Member

mdo commented Jan 6, 2014

Closing out since I haven't heard anything new.

@mdo mdo closed this as completed Jan 6, 2014
@Steve-OH Steve-OH mentioned this issue Jan 9, 2014
Closed
mdo added a commit that referenced this issue Jan 10, 2014
@mdo
Fixes #11990 and #12159: Make range inputs block level and 100% wide …
7f15397 
…by default
@mdo mdo mentioned this issue Jan 10, 2014
Closed
kevinawoo added a commit to Loopfirst/bootstrap that referenced this issue Mar 28, 2014
@kevinawoo
Merge remote-tracking branch 'remotes/upstream/master'
b2adb69 
* remotes/upstream/master: (76 commits)
  grunt dist
  Update docs per `.container-fluid` addition - Remove `.container-fluid` from "removed classes". - Container isn't fluid by default (`.container`) and `.row` isn't percentage-based, so update docs.
  Don't test Linux browsers since we don't support them officially and they're failing our tests
  Fixes twbs#12171: Ensure panel groups have a bottom margin since we nuke it on child panels
  refer to correct component
  docs mention for twbs#12188
  use height adjectives for greater clarity
  document twbs#11675
  rm outdated `<select>` references from comments in forms.less
  Clarify that the focus docs styles are not in the repo, per twbs/bootstrap-sass#497
  Fixes twbs#11990 and twbs#12159: Make range inputs block level and 100% wide by default
  grunt dist
  mixins.less: fix typo in comment
  use periods for consistency in each line
  Use absolute instead of relative URLs
  grunt dist
  Update paths in bower.json
  Add new varaible @icon-font-svg-id and set it to be the correct SVG font ID, used new variable in glyphicons.less
  missing a period after "Twitter, Inc"
  bump grunt-contrib-jade to v0.9.1
  ...

Conflicts:
	Gruntfile.js
	dist/css/bootstrap-theme.css
	dist/css/bootstrap-theme.css.map
	dist/css/bootstrap-theme.min.css
	dist/css/bootstrap.css
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	dist/js/bootstrap.js
	dist/js/bootstrap.min.js
	less/variables.less
	test-infra/sauce_browsers.yml
stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014
@mdo
(less) Fixes twbs#11990 and twbs#12159: Make range inputs block level…
b4aacec 
… and 100% wide by default
stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
@mdo
(less) Fixes twbs#11990 and twbs#12159: Make range inputs block level…
dd8d75a 
… and 100% wide by default
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mdo @Steve-OH @zlatanvasovic