Search code examples
htmlcssangularbootstrap-4

CSS Button does not display inline for Mozilla Firefox

My search button that appears out of place for Mozilla Firefox and I am not sure why it is doing that. I am using Bootstrap 4 with Angular 2

Here is what it looks like on Chrome

chrome

And here is what it looks like on Firefox. The search button does not seem to be inline with the Search Text

firefox

My CSS Code

.custom-search-button {
    color: #A09474;
    font-size: 16px;
    padding: 8px 16px;
    border: solid #A09474 1px;
    cursor: pointer;
    background-color: transparent;
}

.custom-search-button i {
    padding-left: 10px;
}
<button class="btn custom-search-button d-inline" [disabled]="!searchForm.valid">
  Search
  <i class="fa fa-search float-right" aria-hidden="true"></i>
</button>

Solution

  • Just remove .float-right from your icon. It's unnecessary and causes the issue.