Input with font size 0 in conjunction with add / add

Question

I am trying to use bootstrap in a Rails application, and I have already tried to enable bootstrap CSS directly or use bootstrap-sass / anjlab-boostrap-rails.

In three of them, I had a strange problem that I did not guess.

I have the following html code:

<div class="input-append"> <input type="text" /><a href="#" class="btn">?</a> </div> 

The rendering is fine, but when I type in something in the field, nothing appears. Examining further, I found that input-prepend / append sets the font size to 0, and then the text seems to disappear.

Did I forget something when I wrote my HTML code? Is it correct?

Thank you in advance

Answer 1

I just noticed this problem and was able to track the cause.

Bootstrap (version 2) css rules for .input-append and .input-prepend set the font size to 0 to exclude horizontal spaces. Then a few reset elements to the desired font size, but .btn not included in the reset. By adding .btn to the list of elements receiving the restored font size, I was able to fix the problem.

Note. This is no longer a problem in Bootstrap 3, as the new .input-group styles rely on float and not on the previous inline-block (with firmware).

Answer 2

Finally, I found the problem. I did not understand that I have another style sheet in conflict with this part of my code. The code implied in the conflict is as follows:

 input, textarea { font-size: 1.1em !important; } 

When I comment on this style declaration, it again works like a charm. I did not quite understand why this causes some strange behavior. In my case, this definition appeared after enabling bootstrap.css.