Is there a way a aligning my input-group on Firefox using Bootstrap 3?

Question

I made a little form for search using Bootstrap 3, and it is perfect on Google Chrome, but the alignment is not very good in Firefox (I am using version 23), the code is:

<form class="col-md-3 input-group pull-right" method="GET"> 
    <input type="text" name="search" id="id_search" class="form-control" maxlength="200">

    <span class="input-group-btn">
        <input type="submit" class="btn btn-default btn-group" name="submit_search" value="Buscar">
    </span>
</form>

You can see it in http://jsfiddle.net/eRpKW/

Is there a simple way to fix it?

score 4 · Accepted Answer · edited May 23 '17 at 12:23

4

Just change your <input type="submit"> to <button type="submit"> (they are fully interchangeable).

So this line:

<input type="submit" class="btn btn-default btn-group" name="submit_search" value="Buscar">

would become

<button type="submit" class="btn btn-default btn-group" name="submit_search">Buscar</button>

Here is an updated demo.

For more details about the cause of the issue, you can read input height differences in Firefox and Chrome.

edited May 23 '17 at 12:23

Community

1
1

answered Aug 31 '13 at 00:29

edsioufi

8,297
3
36
42

And I had to close and put the value betweet opening and closing tag to make it work too. – staticdev Aug 31 '13 at 09:58
@StaticX That's what I've done in the demo. I'm going to edit my post, maybe you can upvote? :) – edsioufi Aug 31 '13 at 10:02

Is there a way a aligning my input-group on Firefox using Bootstrap 3?

1 Answers1