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?