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

input group in navbar in Chrome #9950

Closed
erikverstegen opened this Issue Aug 20, 2013 · 21 comments

Comments

Projects
None yet
@erikverstegen

erikverstegen commented Aug 20, 2013

When you have an input-group (I've only tested it with a button) inside a navbar the form doesn't align and makes the navbar height way longer.

@cvrebert

This comment has been minimized.

Member

cvrebert commented Aug 20, 2013

It works, except the width of the input goes crazy (hence the style="width: 200px;" hack): http://jsfiddle.net/9Z4MN/3/

@cvrebert

This comment has been minimized.

Member

cvrebert commented Aug 22, 2013

Actually, the docs also cover the need to set an explicit width, so then this is just a matter of needing to use the correct markup; see jsFiddle for working example.

@cvrebert cvrebert closed this Aug 22, 2013

@cvrebert

This comment has been minimized.

Member

cvrebert commented Aug 23, 2013

My apologies, the input width thing does seem like a legit bug.

@cvrebert

This comment has been minimized.

Member

cvrebert commented Aug 23, 2013

Testcase: http://jsfiddle.net/Y9tqk/
If you uncomment the .input-group & .input-group-addon, then it's fine on mobile, but the input is crazy-wide on desktop screens.
If you leave it commented, then it works fine everywhere.

@gitmar

This comment has been minimized.

gitmar commented Aug 24, 2013

I can't style input width within a input-group; automatic size is fine for others surrounded controls but rarely useful for input one. The problem happens when you are text addon before and text addon after.

@cvrebert

This comment has been minimized.

Member

cvrebert commented Aug 29, 2013

Also applies to plain .form-inline; see #10294.

@gsmethells

This comment has been minimized.

gsmethells commented Sep 4, 2013

This bug is preventing us from moving up from Bootstrap 2.3.2 on our project.

@johnwangwjq

This comment has been minimized.

johnwangwjq commented Oct 7, 2013

It had taken me hours to look for the right class to prevent the input field in navbar from being crazy wide before I got it's a bug. Will go with the style="width: 200px;" hack. Thanks.

@mdo

This comment has been minimized.

Member

mdo commented Oct 20, 2013

Filing this as a Chrome bug: https://code.google.com/p/chromium/issues/detail?id=309483.

The gist is that an element with display: table; that's placed within a parent that has display: inline-block; occupies 100% of the available space when no pixel-width is set. Note that a % width doesn't work either. Once you add a pixel-based width to the .input-group, everything gets (no pun intended) back in line.

@mdo mdo closed this Oct 20, 2013

@servelink

This comment has been minimized.

servelink commented Nov 2, 2013

I believe I am also seeing the same bug in Safari 7.0 on OS X Mavericks.

@michellelaralin

This comment has been minimized.

michellelaralin commented Nov 10, 2013

Here's a minimal fix

Add class .navbar-input-group to the form

<form class="navbar-form navbar-left navbar-input-group" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search for awesome stuff">
  </div>
  <button type="submit" class="btn btn-default">Search</button>
</form>

Then add additional CSS (place in media query if necessary):

.navbar-input-group {
  font-size: 0px; /*removes whitespace between button and input*/
}

.navbar-input-group .form-control {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.navbar-input-group .btn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left: 0px;
}

For purposes of clarity, I am targeting descendant elements in the CSS. This is not the most efficient way to target CSS elements. If you decide to use this, consider giving the input and button unique class names and targeting them without any descendant selectors in your CSS (read: http://csswizardry.com/2011/09/writing-efficient-css-selectors/)

@ghost

This comment has been minimized.

ghost commented Nov 10, 2013

célzott leszármazott elemek a CSS. Ez nem a leghatékonyabb módja annak, hogy cél -hogy ezt fontolóra a bemeneti és a gombok egyedi osztály nevét,

@richardriman

This comment has been minimized.

richardriman commented Nov 26, 2013

Safari 7.0 (9537.71) - same problem
Chrome 31.0.1650.57 - same problem
Firefox 25 and 25.0.1 - there it's OK

@meywd

This comment has been minimized.

meywd commented Mar 2, 2014

Also applies to IE 11

@ntkk72

This comment has been minimized.

ntkk72 commented Mar 7, 2014

An simple fix for this is targeting .input-group-btn and input-group-addon within .navbar-form with a auto width. See below:

.navbar-form .input-group-btn,
.navbar-form .input-group-addon {
width: auto;
}

@Panman8201

This comment has been minimized.

Panman8201 commented Mar 14, 2014

@ntkk72 Your fix is perfect! @mdo Any chance this will be included in Bootstrap? Does a new issue need to be opened to reference this solution?

@YorkshireKev

This comment has been minimized.

YorkshireKev commented Mar 22, 2014

Thanks @ntkk72 your fix has saved my sanity!

@xavierfaucon

This comment has been minimized.

xavierfaucon commented Mar 25, 2014

The same, thanks @ntkk72, your fix resolved my problem!

@mdo

This comment has been minimized.

Member

mdo commented Mar 26, 2014

If there is still a bug in the latest master, yes, please open a new issue. Include a link to this one and a new test case (preferably a JS Bin).

@Charlicus

This comment has been minimized.

Charlicus commented May 20, 2014

thanks @ntkk72,

To make sure inputs are taking 100% width when collapsed, I put ntkk72 css correction within @media (min-width:768px;){}

@infinnie

This comment has been minimized.

infinnie commented Jul 23, 2014

It’s just I can’t make input groups inside navbars compatible with even the most modern browsers.

@twbs twbs locked and limited conversation to collaborators Jul 23, 2014

@cvrebert cvrebert changed the title from Input group in navbar to input group in navbar in Chrome Jan 15, 2015

@cvrebert

This comment has been minimized.

Member

cvrebert commented Jan 3, 2016

Successor bug against Bootstrap v4: #18751

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