function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
theitdeptrockstheitdeptrocks 

IE9: Picklist won't drop down

Hi all,

 

Within IE9, I have having a problem with the picklists within one of my VF pages.  The problem is affecting both standard <Select/> and <apex:selectList/> tags.

 

The fields appear, however they are not clickable - meaning they do not expand/drop down to display their options.  If you tab through the fields and land on one of the picklists, you can use the up and down arrow keys to scroll through the options.

 

Using compatibility mode, IE8, or FireFox remedies the issue.

 

<div align="left">
    <apex:outputPanel id="controls">
        Size:&nbsp;&nbsp;    
            <select id="resizevalue" onchange="resize();">
                <option value="100%">100%</option>
                <option value="75%">75%</option>
                <option value="50%">50%</option>
                <option value="25%">25%</option>
                <option value="10%">10%</option>
            </select>
        <br />
        Form:  &nbsp;
            <apex:selectList id="form" value="{!form}"
                size="1" required="true">
                <apex:selectOptions value="{!forms}"/>
                <apex:actionSupport event="onchange" reRender="results" action="{!thelist}" oncomplete="preload();"  />   
            </apex:selectList>          
    </apex:outputPanel>
</div>

 Has anyone else experienced this or have a fix for it?

 

Thanks!

Best Answer chosen by Admin (Salesforce Developers) 
theitdeptrockstheitdeptrocks

Turns out that it is not the fault of the CSS listed.  That will work fine as displayed.  I had another script on the page that made the <DIV/> draggable that was causing the picklists to not open.

 

Blog:  http://www.salesforcery.com

All Answers

IspitaIspita

Hi theitdeptrocks,

I have experienced similar situation while designing a mockup for 1 of my projects recently and what is surprising it also impacts HMTL dropdowns too.

Unfortunately I havent figured out a fix for it ... in case if you can resolve please do share it with the community....

 

 
theitdeptrockstheitdeptrocks

I have discovered that if I move a picklist outside of that <div/>, it works fine.

 

This is the CSS applied:

<style type="text/css">
.visibleDiv, #topLeft, #topRight, #bottomLeft, #bottomRight
{
    position: absolute;
    width: 230px;
    border: solid 1px #e1e1e1;
    vertical-align: middle;
    background: #28313A;
    text-align: center;
    color: #ffffff;
    padding:10px;
}
#topRight{
    top: 200px;
    left: 2%;
    -moz-border-radius: 15px;
    border-radius: 15px;
    box-shadow: 0 0 15px #000;
    -webkit-border-radius:
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
}
</style>

 I have not yet started removing elements from the above to see which it might be.
theitdeptrockstheitdeptrocks

Turns out that it is not the fault of the CSS listed.  That will work fine as displayed.  I had another script on the page that made the <DIV/> draggable that was causing the picklists to not open.

 

Blog:  http://www.salesforcery.com

This was selected as the best answer