1

i'm working on a visualforce page which is embedded into a standard layout. Te page contains an apex:selectList tag which uses the select2 plugin to provide search functionalities.

Normal Behavior

The above image provides a view of the behavior of the page when it is loaded, but once i try to search something here's what happens: Hidden Overflow behavior

The problem is that the entire search menu is basically cut off below the limit of the visualforce section. The button and the label which are normally shown on both sides of the select element are shifted upward once i try to search for anything. I looked around and the problem might be caused by the overflow parameter of the DIV tag which contains my page, but i tried to edit it and nothing changed.

Here's the code of the VF page:

<apex:page standardController="Event" extensions="RiassegnazioneController" showHeader="false">

<apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-1.11.3.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jQuery, 'plugin/select2-3.5.2/select2.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.jQuery, 'plugin/select2-3.5.2/select2.min.js')}" />
<apex:includeScript value="/support/console/36.0/integration.js"/>
<apex:includeScript value="/soap/ajax/36.0/connection.js"/>

<script>
$(document).ready(function(){
            $('select[id$=selectUser]').select2();
        });
</script>

<apex:form rendered="{!hasReassignmentAccess}">

    <style></style>
    <apex:pageMessages />
    <apex:pageBlock mode="maindetail" >
        <apex:pageBlockSection columns="2" showHeader="false" >
            <apex:pageBlockSectionItem >
            <apex:outputPanel>
                <div style="overflow:visible;">
                    <apex:outputLabel >Riassegna a: </apex:outputLabel>
                    <apex:outputText >
                        <apex:selectList required="true" id="selectUser" value="{!Event.OwnerId}" size="1" style="width: 200px;">
                            <apex:selectOptions value="{!users}" />
                        </apex:selectList> 
                    </apex:outputText>
                </div>
            </apex:outputPanel>
            </apex:pageBlockSectionItem>

            <apex:pageBlockSectionItem >
            <apex:outputPanel>
                <div style="padding-top:8px;overflow:visible;"> 
                    <apex:commandLink value="Assegna" action="{!saveEventOwner}" target="_parent" styleClass="btn" style="text-decoration:none;padding:4px;"/>
                </div>
                <!--<apex:commandButton action="{!saveEventOwner}" value="Assegna" /> -->
            </apex:outputPanel>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>

Is there any way to make it overlap the sections around?

0

You're doing some whacky stuff here that I don't think is necessary. If you simplify this a bit, you should see what you are looking for.

        <apex:pageBlockSectionItem >
            <apex:outputLabel for="selectUser" value="Assign To"/>
            <apex:outputpanel >
                    <apex:selectList id="selectUser" value="{!Event.OwnerId}" style="width: 200px;">
                        <apex:selectOptions value="{!users}" />
                    </apex:selectList>
                    <apex:commandLink value="Assign" styleClass="btn" style="text-decoration:none;padding:4px;" action="{!saveEventOwner}" target="_parent"/>
            </apex:outputpanel>                        
        </apex:pageBlockSectionItem> 

Additionally, when using this library with a large selection of items in your picklist (which im assuming you are since it looks like a list of users to reassign the record to), you'll want to adjust the size of the options dropdown to fit within the embedded section on the page. You will need to adjust this depending on where you place the select2 field and how many fields you place below in in the layout. An example can be seen below where i cut off the dropdown before it leaves the frame so it looks cleaner.

<style>
.select2-results__options {
 max-height: 97px !important;
}
</style>

On page load

enter image description here

On select

enter image description here

6
  • I tried your code but it isn't working, which version of select2 were you using in your example? Apr 4 '16 at 7:17
  • What part isn't working? I used the most recent version. Shouldn't make a difference here. Apr 4 '16 at 16:21
  • @MarcoDagrada Just as a general note, and not fully understanding the code you have, you need to make sure the page you are embedding has enough "fields" to allow that drop down to show in the iFramed page. Best way to do this is to add some of your read only fields under the select2 field in the embedded page itself vs the standard layout. In my screenshots, I just have white space, but in your case you may want to move some of those non editable fields on the layout into the embedded page itself so the select2 drop down has space to expand in the iFrame. Apr 4 '16 at 19:37
  • the menu contains over 300 items, but its bottom part is still "hiding" behind the borders of the iframe. Apr 6 '16 at 15:08
  • You can't break out of the iFrame. Lol. You have to put more fields into the iFrame to give it room to expand within the iFrame. Apr 6 '16 at 15:10

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.