inline-block elements causing line break

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: inline-block elements causing line break

Christopher Denby pro asked 7 years ago

I'm not absolutely sure this is an MDB issue, but perhaps I could get some assistance with this:

Inside a modal, I have a search field (text input). I want to have the fa-search icon right beside the input box. But I keep getting line break after the <i>

 <i class="fa fa-search"></i>
 <input type="text" onkeyUp="HandleAddItemFromSearchBox(this);"/>

I've tried to force style="inline" to each of the items, but I can't seem to get them on a single line. In chrome, if I set the style of the input to display: inline!important, the resultant display is still inline-block. I clearly don't know what I need to do to get rid of that.

For the time being, I've wrapped it all in a table row with two tds, but that's really sloppy and I'd like a proper fix for this.

Any ideas? Thanks.

 

Marta Szymanska staff pro premium answered 7 years ago

Hi, have you tried to use code from our documentation of bootstrap search? I think it may help you. Best, Marta

Christopher Denby pro commented 7 years ago

At the moment, I can't search your mdbootstrap.com site (502 bad gateway). Can you give me a link to that Bootstrap search?

Marta Szymanska staff pro premium commented 7 years ago

Here: https://mdbootstrap.com/components/bootstrap-search/
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Christopher Denby
Pro User
0Support score
5Questions 0Answers
0Snippets likes 0Snippets