[SalesForce] Lookup Field Icon Doesn’t Show Up On Sites

I am developing a site under my organization and a Case Management panel in it. I prepared a page called NewCase and basicaly built a template that includes Case fields in it. But lookup fields doesn't show up with their icons but just the label and input box. So I can not set lookup field values.

Do you have any ideas what should I do?

Note: I've added Lookup Page to site's Standard Pages.

UPDATE: Code section (SerialNo__c is a custom lookup field related a custom object.)

<apex:outputLabel value="{!$ObjectType.Case.Fields.SerialNo__c.Label}" for="serialNo" />
<apex:inputField value="{!newCase.SerialNo__c}" id="serialNo"/>

Best Answer

If your VF page has standardStylesheets="false" then the button won't show up next to the input box. I copied this from salesforce common.css to use in my pages that don't use the standard style sheets.

/* Salesforce css for lookup button */

.lookupInput
{
    display: inline;
    vertical-align: middle;
    white-space: nowrap;
}
.lookupInput img
{
    background-repeat: no-repeat;
    margin-right: .25em;
    vertical-align: middle;
}
.lookupInput .disabled
{
    background-color: #ccc;
}
.lookupInput .emptyDependentLookup
{
    font-style: italic;
}
.lookupInput input[readonly]
{
    background-color: #e6e6e6;
    border: 2px solid #e6e6e6;
    color: #333;
    cursor: default;
}
.lookupInput a.readOnly
{
    float: right;
}
.lookupInput span.readOnly
{
    display: block;
    white-space: normal;
}
.lookupInput span.totalSummary
{
    font-weight: bold;
}
.inlineEditRequiredDiv .lookupInput img,.inlineEditDiv .lookupInput img
{
    vertical-align: middle;
}
.quickCreateModule .lookupInput input {
    max-width: 155px
}
.lookupIcon {
    background-image: url(/img/func_icons/util/lookup20.gif);
    background-position: 0 0;
    width: 20px;
    height: 20px;
    background-position: top left
}
.lookupIconOn {
    background-image: url(/img/func_icons/util/lookup20.gif);
    background-position: 0 0;
    width: 20px;
    height: 20px;
    background-position: top right
}

Related Topic