Select2 hidden dropdown in embedded Visualforce Page

Question

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.

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:

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?

Answer 1

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

On select