typeahead.js-bootstrap3.less icon indicating copy to clipboard operation
typeahead.js-bootstrap3.less copied to clipboard

Layout problem with form-inline class

Open ahocquet opened this issue 10 years ago • 3 comments

Hi,

I have an issue when using this style within a form-inline. The typeahead input inserts a kind of line break and isn't displayed next to the label :

image

So, I added a css rule to fix it. But i'm not a css guru at all, and it's surely doesn't respect CSS coding best practices.

.form-inline .twitter-typeahead {
    width: auto;
    float: none;
}

image

It almost does the trick. The last problem is that the label is not vertically aligned in the middle. Adding a vertical-align property to the css rule made the trick :

.form-inline .twitter-typeahead {
    width: auto;
    float: none;
    vertical-align: middle;
}

image

Once again, I'm not a css expert at all. It's just a dirty quick fix to fit my needs. I'm looking forward to see a proper solution :)

Sorry for the english, it's not my native language. Do not hesitate to correct my typos :)

Aixki

ahocquet avatar Jun 29 '14 19:06 ahocquet

Sorry for that I didn't reply in time and thanks for your feedback. I didn't test inline form comprehensively, but I really should. I will add some test case for this. Thank you for your solution, It really helps. And I'm not a expert too :)

English is not my native language too, so there's no problem at all.

hyspace avatar Aug 02 '14 15:08 hyspace

You're more than welcome :)

Thanks for taking time to test it.

ahocquet avatar Aug 02 '14 15:08 ahocquet

+1, these lines also fixes forms with form-horizontal:

.form-horizontal .twitter-typeahead {
    width: auto;
    float: none;
}

perliedman avatar Sep 01 '14 13:09 perliedman