2.0-wip: .input-prepend and .input-append are broken inside of a .form-inline #1362

Closed
msheakoski opened this Issue Jan 29, 2012 · 10 comments

Comments

Projects
None yet
9 participants

Since .input-prepend/append's styles are set to block, it breaks when used in inline forms:

The expected result should look something like:

Owner

mdo commented Jan 29, 2012

Resolved this in my latest push, but there's one trick: you have to put the .add-on and input on the same line without space between them to work. Looks good in Chrome, will confirm later in other browsers.

Thanks!

@mdo mdo closed this Jan 29, 2012

I had to add the following CSS to fix the vertical alignment:

/* Tested in Safari 5.1.2 and Firefox 9.0.1 */
.form-inline {
  .input-prepend, .input-append {
    margin-bottom: 0;
    vertical-align: middle;
  }
}

This workaround seems broken in the latest chrome beta 17, but is working in firefox 10.

huug commented Feb 8, 2012

@mlegenhausen is correct, I have the same issue in chrome beta 18 and stable 16, but ok in ff10

@gmflash tnx for the vertical align fix!

I can confirm this is broken in last Chrome (17.0.963.46), even with .add_on and input in the same line. Working in last FF (10.0).

ginkel commented Feb 12, 2012

Does someone have a workaround? I tried experimenting with

.form-inline .input-prepend {
  white-space: nowrap;
}

but while this causes rendering on a single line this causes Chrome to miscalculate the size of the input-prepend div by the size of the add-on span.

huug commented Feb 13, 2012

@ginkel you can add

-webkit-padding-end: 27px;

to fix the miscalculation

Confirm bug in Chromium 16.0.912.77.

Really, this solved the problem of Chome 16.0.912.77 and maintained compatibility with FF 10.0.2.

.input-prepend {
white-space: nowrap;
-webkit-padding-end: 27px;
}

@markdotto - Is there example code for what you mean by "you have to put the .add-on and input on the same line"? I'm tried a bunch of variations on what I think that means but am having trouble getting this to work.

Most recent try was:
`


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