I tried to use bootstrap with apex:inputField. Usually it works fine. But when it comes to lookup relationship, the field looks like this:

enter image description here

Is there any quick fix to make it looking okay? By applying some typeahead library we can probably fix this but this will be a lot of javascript code. Any thoughts?


You will need a bit of CSS to fix this .Here is a handy blog that shows how to do it .

enter image description here

<apex:inputField styleClass="form-control" value="{!contact.reportsToId}" />

The CSS would like below

enter image description here

/* lookup field override */
.lookupInput a {
    display: block;
    position: absolute;
    top: 0px;
.lookupInput img {
    float: right;
span.lookupInput {
    position: relative;
    display: inherit;
.lookupInput a, .lookupInput a {
    border: none !important;
    background: none !important;
/* end lookup field override */
  • That's pretty sweet, but couldn't you provide a copy-paste (text) version of the code? – sfdcfox Feb 9 '18 at 1:14
  • Really lazy to copt things from the blogpost !!!!!! – Mohith Shrivastava Feb 9 '18 at 1:14
  • lol !! Was about to put the code now !!! Saw the edit from you .Thanks – Mohith Shrivastava Feb 9 '18 at 1:18
  • 2
    You're welcome. I type like 100 wpm anyways, so it wasn't a big deal. – sfdcfox Feb 9 '18 at 1:19
  • @sfdcfox there is no doubt about your wpm speed :) lol – Himanshu Feb 9 '18 at 1:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.