typeahead.js-bootstrap3.less
typeahead.js-bootstrap3.less copied to clipboard
Layout problem with form-inline class
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 :
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;
}
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;
}
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
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.
You're more than welcome :)
Thanks for taking time to test it.
+1, these lines also fixes forms with form-horizontal
:
.form-horizontal .twitter-typeahead {
width: auto;
float: none;
}