Question

I have a Visualforce toolbar and when I rerender the pageblock only in Firefox the whole bar gets extended vertically to a large toolbar block.

See code below

<apex:toolbar id="theToolbar" style="background-color:#8d8d8d;background-image:none">
             <apex:toolbarGroup itemSeparator="line" location="left" id="toobarGroupForm">          
                  <apex:outputText style="color:#f8f8ff;font-weight:bold" value="Amount of Records"/>
                 <apex:selectList label="Record Amount" value="{!ShowAmountOfRecords}" size="1" required="false" >
                     <apex:actionSupport event="onchange" action="{!AmountOfRecordsAction}" reRender="innerblock" status="recordamountchange" />
                        <apex:outputPanel style="color:#f8f8ff;font-weight:bold">
                             <apex:actionStatus id="recordamountchange" startText="Showing more records..." stopText=""/>
                        </apex:outputPanel>
                     <apex:selectOptions value="{!AmountOfRecordsList}"/>
                  </apex:selectList>
                  <apex:outputText style="color:#f8f8ff;font-weight:bold" value="Filter By Document Type"/>
                  <apex:selectList label="Filter by Record Type" value="{!FilterByRecordType}" size="1" required="false" >
                     <apex:actionSupport event="onchange" action="{!FilterByRecordTypeAction}" reRender="innerblock" status="filterByRecordType" />
                         <apex:outputPanel style="color:#f8f8ff;font-weight:bold">
                             <apex:actionStatus id="filterByRecordType" startText="Filtering your records..." stopText=""/>
                        </apex:outputPanel>
                     <apex:selectOptions value="{!FilterByRecordTypeList}"/>
                  </apex:selectList>

              </apex:toolbarGroup>
            </apex:toolbar> 

Is this a know bug in Firefox?

Answer 1

The problem was that I had two picklist part of the same Toolbar Group. Make sure to add your components to different toolbar groups.

<apex:toolbar id="theToolbar" style="background-color:#8d8d8d;background-image:none" rendered="true">
             <apex:outputText style="color:#f8f8ff;font-weight:bold" value="Amount of Records"/>
             <apex:toolbarGroup itemSeparator="line" location="left" id="toobarGroupForm" rendered="true">          
                 <apex:selectList label="Record Amount" value="{!ShowAmountOfRecords}" size="1" required="false" >
                     <apex:actionSupport event="onchange" action="{!AmountOfRecordsAction}" status="recordamountchange" reRender="innerblock" />
                        <apex:outputPanel style="color:#f8f8ff;font-weight:bold">
                             <apex:actionStatus id="recordamountchange" startText="Showing more records..." stopText=""/>
                        </apex:outputPanel>
                     <apex:selectOptions value="{!AmountOfRecordsList}"/>
                  </apex:selectList>
              </apex:toolbarGroup>
              <apex:outputText style="color:#f8f8ff;font-weight:bold" value="Filter By Document Type"/>
              <apex:toolbarGroup itemSeparator="line" location="left" id="toobarGroupForm2" rendered="true"> 
                  <apex:selectList label="Filter by Record Type" value="{!FilterByRecordType}" size="1" required="false"  >
                     <apex:actionSupport event="onchange" action="{!FilterByRecordTypeAction}" status="filterByRecordType" reRender="innerblock"/>
                         <apex:outputPanel style="color:#f8f8ff;font-weight:bold">
                             <apex:actionStatus id="filterByRecordType" startText="Filtering your records..." stopText=""/>
                        </apex:outputPanel>
                     <apex:selectOptions value="{!FilterByRecordTypeList}"/>
                  </apex:selectList>
              </apex:toolbarGroup>
            </apex:toolbar>