I have the following piece of code:

<div class="slds-p-horizontal--small slds-size--5-of-12">
    <label class="slds-form-element__label" for="select-01">Campaign</label>
    <div class="slds-form-element__control">
        <apex:inputField value="{!campaignLookup}" styleClass="slds-input"/>    

It's all working as intended, except there is one style issue.

If I remove the styleClass, then the lookup button still works, it just looks hideous.

If I add the styleClass, it looks just like SLDS (in fact, it IS slds), and I get a text field that is 5-of-12 width, and a button besides it which opens a lookup window. This button is ALSO 5-of-12 width, meaning I have twice the intended size (simply put: it's WAY too big).

How do I fix it so that I have only once a 5-of-12 size? I don't care if the textfield is 5-of-12 and the button is just slightly over the border, but I don't want the button to have an enormous div for only 32*32 pixels ever.

Edit: Fix:

    .lookupInput a { 
        border: none !important;
        width: 60px !important ;

This removes the border and sets the width of the lookup icon to precisely 60 pixels, instead of the enormous div the text field also has.


Lightning design system do not supports apex input filed. Try to create custom CSS styles for lookups and other field types

| improve this answer | |
  • Thank you, we fixed it by indeed writing custom CSS ourselves. See my question for the fix. – Diamundo Jan 10 '17 at 15:23

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.