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

Layout problem with form-inline class #11

Open
ahocquet opened this issue Jun 29, 2014 · 3 comments
Open

Layout problem with form-inline class #11

ahocquet opened this issue Jun 29, 2014 · 3 comments

Comments

@ahocquet
Copy link

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

@hyspace
Copy link
Owner

hyspace commented Aug 2, 2014

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.

@ahocquet
Copy link
Author

ahocquet commented Aug 2, 2014

You're more than welcome :)

Thanks for taking time to test it.

@perliedman
Copy link

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants