6

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"/>    
    </div>
</div>

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:

<style>
    .lookupInput a { 
        border: none !important;
        width: 60px !important ;
    }
</style>

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.

Improve this question

1 Answer 1

Reset to default
2

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

Improve this answer
1
  • Thank you, we fixed it by indeed writing custom CSS ourselves. See my question for the fix.
    – Diamundo
    Commented Jan 10, 2017 at 15:23

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .