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.

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

Form in navbar is padded when positioned with navbar-right #11530

Closed
ahti opened this issue Nov 18, 2013 · 5 comments
Closed

Form in navbar is padded when positioned with navbar-right #11530

ahti opened this issue Nov 18, 2013 · 5 comments
Labels
Milestone

Comments

@ahti
Copy link

ahti commented Nov 18, 2013

Take a look at this jsbin.

The form in the navbar has markup similar to the docs, but is padded on the right and does not sit flush with the container below.

This does not happen with navbar-nav uls. I have not tested other kinds of content.

@cvrebert
Copy link
Collaborator

There's 15px of right padding on the .navbar-collapse and 15px of right padding on the .navbar-form itself.
The brand is deliberately outside of the .navbar-collapse, so no left padding applies.

@ahti
Copy link
Author

ahti commented Nov 19, 2013

Well, if you place a .navbar-nav on the right (see here), it just sits flush, and that's (imho) the way the form should be, too.

@cvrebert
Copy link
Collaborator

I don't disagree; I was just giving the results of my investigation into the cause of the issue.

@ahti
Copy link
Author

ahti commented Nov 19, 2013

Oh okay :)

While we're at it: the same problem seems to exist with .navbar-navs on the left side of the menu bar, dunno if anyone ever uses it like that, maybe pages in right-to-left languages do.

mdo added a commit that referenced this issue Dec 2, 2013
This slight reworking of the navbar spacing was brought about by a
problem noted in #11530: use of `.navbar-form.navbar-right` leaves an
extra 15px of space on the right.

Here’s what’s new:

* Removed the `padding` on `.navbar-collapse` within static top, fixed
top, and fixed bottom navbars. Meaning, it’s still there for the
default navbar. This was the root cause of the extra 15px padding for
navbar forms.
* As part of this, I also replaced the existing negative margin
overrides for last-child elements with more contextual ones within
their sub-components.

Overall not too different, but should be more effective now and easier
to work with now.

For example of new changes, see http://jsbin.com/odeSiSo/1/.
@mdo
Copy link
Member

mdo commented Dec 2, 2013

Should be resolved now. Had to rework some things, so do give it a run and let me know what you find <3.

@mdo mdo closed this as completed Dec 2, 2013
stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014
… elements

This slight reworking of the navbar spacing was brought about by a
problem noted in twbs#11530: use of `.navbar-form.navbar-right` leaves an
extra 15px of space on the right.

Here’s what’s new:

* Removed the `padding` on `.navbar-collapse` within static top, fixed
top, and fixed bottom navbars. Meaning, it’s still there for the
default navbar. This was the root cause of the extra 15px padding for
navbar forms.
* As part of this, I also replaced the existing negative margin
overrides for last-child elements with more contextual ones within
their sub-components.

Overall not too different, but should be more effective now and easier
to work with now.

For example of new changes, see http://jsbin.com/odeSiSo/1/.
stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
… elements

This slight reworking of the navbar spacing was brought about by a
problem noted in twbs#11530: use of `.navbar-form.navbar-right` leaves an
extra 15px of space on the right.

Here’s what’s new:

* Removed the `padding` on `.navbar-collapse` within static top, fixed
top, and fixed bottom navbars. Meaning, it’s still there for the
default navbar. This was the root cause of the extra 15px padding for
navbar forms.
* As part of this, I also replaced the existing negative margin
overrides for last-child elements with more contextual ones within
their sub-components.

Overall not too different, but should be more effective now and easier
to work with now.

For example of new changes, see http://jsbin.com/odeSiSo/1/.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants