[SalesForce] VisualForce page with SLDS: apex:inputField lookup button way too big

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.

Best Answer

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

Related Solutions

[SalesForce] How to change label width for inputfield in VF page

I have fixed it by creating a style for the label and for the radio button:

 label {
      float: left;
      width: 150px;
      margin-left: 20px;
      text-align: left;
   }
 .radioB input, .radioB label{
      float:none;
      display:inline;
      width: 30px;
   }

[SalesForce] Convert apex:inputField of lookup relationship into slds

I think you are looking for the JS Lightning framework such as :

Appyphony Lightning JS (example below)
Lightningdart

Now for the New Account that's a bit up to your case. LEX is using dialog so that the user can stay on the same form and populate automatically the lookup dialog. I find that more responsive and a good way to go. At the end of the day your new Account should be a separated Lightning Component and you should be able to reuse this component as a separated page or embed in a dialog(modal).

I hope you will find that helpful

For example (Appiphony):

$(document).ready(function() {
$('#lookup-01').lookup({
    items: [
        {
            id: 'result-1',
            label: 'Result 1'
        },
        {
            id: 'result-2',
            label: 'Result 2'
        },
        {
            id: 'result-3',
            label: 'Result 3'
        },
        {
            id: 'result-4',
            label: 'Result 4'
        }
    ],
});

var results = [
    {
        id: 'ajax-result-1',
        label: 'ajaxResult1'
    },
    {
        id: 'ajax-result-2',
        label: 'ajaxResult2'
    },
    {
        id: 'ajax-result-3',
        label: 'ajaxResult3'
    },
    {
        id: 'ajax-result-4',
        label: 'ajaxResult4'
    }
];

$('#lookup-02').lookup({
    items: results,
    objectPluralLabel: 'Things',
    objectLabel: 'Thing',
    useImgTag: false,
    objectIconUrl: '/assets/icons/standard-sprite/svg/symbols.svg#account',
    objectIconClass: 'slds-icon-standard-account',
    emptySearchTermQuery: function(callback) {
        callback(results);
    },
    filledSearchTermQuery: function(searchTerm, callback) {
        callback(results.filter(function(result) {
            return result.label.match(searchTerm) !== null;
        }));
    },
    initialSelection: { id: 'ajax-result-1', label: 'ajaxResult1' },
    clickAddFunction: function() {
        console.log('redirect or do something to add something');
    }
});
});

Related Topic