1

I'm converting an org to Lightning and have this markup in a Visualforce page:

<apex:inputField value="{!classInstance.opportunity[field]}"
                 required="{!IF(isSaveOnly,'false', field.Required)}"/>

This generates a multi-picklist populated from a fieldset as expected, with two select elements in separate table cells and a control set between (simplified):

<td>
    <select multiple="multiple" title="Billing Cycle - Available" 
            size="4" style="width: 37px;">
        <optgroup style="text-decoration:none;" label="Available"></optgroup>
        <option value="1">February</option><option value="2">March</option>
        <option value="3">April</option>
        <option value="4">May</option>
    </select>
</td>

<td class="multiSelectPicklistCell">
    <a href="..." title="Add">
        <img src="/img/s.gif" alt="Add" class="picklistArrowRight" title="Add">
    </a>
    <br><br>
    <a href="..." title="Remove">
        <img src="/img/s.gif" alt="Remove" class="picklistArrowLeft" title="Remove">
    </a>
</td>

<td>
    <select multiple="multiple" title="Billing Cycle - Chosen" 
            size="4" style="width: 37px;">
        <optgroup style="text-decoration:none;" label="Chosen"></optgroup>
        <option value="0">January</option>
    </select>
</td>

I have the SLDS component loading, which is the cause of the problem:

<apex:slds />

The problem is that the widths of the select elements collapse:

enter image description here

I've been banging around in the document inspector for a good while and can't pin down what's happening. Part of the problem is that a small width is being inlined, as seen above. That alone doesn't explain it, though. Increasing the width value has no effect.

One other oddity... if I reduce the screen to mobile size the select elements regain some width. It's still not normal, but it allows the values to be seen. If I then move a value from Available to Chosen the widths are recalculated to correct values. This only happens for mobile screen sizes, though. For desktop nothing changes.

There are no custom styles involved. What the heck is going on? Bonus points for anyone who can tell me why Salesforce still use tables for page layout. What a bummer.

2
  • You've probably simplified it too much - I'd want to see the table and the styles that apply that table and the cells. You could almost leave out the content - the table and tds are most important. Commented May 4, 2021 at 18:20
  • Thanks for the reply. I've scrutinized the table cells and couldn't find anything that would cause them to collapse--it seems to be with the content not forcing them to have size. (I have a deep background in CSS and layout.) It's all generic stuff from the SLDS stylesheets. At this point I've removed the SLDS component from the page as an interim fix.
    – isherwood
    Commented May 4, 2021 at 18:32

0

You must log in to answer this question.

Browse other questions tagged .