Display custom object and fields with Visualforce - apex-code

I have a custom object called Conference. I need to create a simple visualforce page that displays all records of Conference including the following details per Conference: Name, City, State, Start Date, End Date, Expected Attendess, and Actual Enrolled. I built this with standard Salesforce.com admin point-and-click, and they all display perfectly in a report I created with point-and-click.
With the following code I'm getting this error:
Error: Unknown property 'Conference__cStandardController.conference'
<apex:page standardStylesheets="false" showHeader="false" sidebar="false"
standardController="Conference__c" recordsetVar="conf">
<apex:stylesheet value="{!URLFOR($Resource.styles, 'styles.css')}"/>
<h1>Conference Details</h1>
<apex:form>
<apex:dataTable value="{!Conference__c}" var="confItem" rowClasses="odd,even">
<apex:column headerValue="Conference Name">
<apex:outputField value="{!confItem.Name}"/>
</apex:column>
<apex:column headerValue="City">
<apex:outputText value="{!confItem.City__c}"/>
</apex:column>
<apex:column headerValue="State">
<apex:outputText value="{!confItem.Location_State__c}"/>
</apex:column>
<apex:column headerValue="Start Date">
<apex:outputText value="{!conference.Start_Date__c}"/>
</apex:column>
<apex:column headerValue="End Date">
<apex:outputText value="{!conference.End_Date__c}"/>
</apex:column>
<apex:column headerValue="Technologies">
<apex:outputText value="{!conference.Technologies__c}"/>
</apex:column>
<apex:column headerValue="Expected">
<apex:outputText value="{!conference.Number_of_Attendees_Expected__c}"/>
</apex:column>
<apex:column headerValue="Currently Enrolled">
<apex:outputText value="{!conference.Enrolled_Attendees__c}"/>
</apex:column>
</apex:dataTable>
</apex:form>

You already refered sObject Conference__c to conf.
Therefore in your dataTable you should write your code like this:
<apex:dataTable value="{!conf}" var="confItem" rowClasses="odd,even">
<apex:column headerValue="Conference Name">
<apex:outputField value="{!confItem.Name}"/>
</apex:column>
and so on

<apex:enhancedList> might be your new best friend.
But if you want to keep the code you have so far you'd need to loop (meaning reference it in dataTable/pageBlockTable/repeat) over the variable name you've chosen as the "recordsetvar" attribute. Check out this link for more info.
Something like that should work:
<apex:page standardStylesheets="false" showHeader="false" sidebar="false"
standardController="Conference__c" recordSetVar="conferences">
<apex:pageBlock>
<apex:pageBlockTable value="{!conferences}" var="c">
<apex:column value="{!c.Name}" />
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>

Related

Primefaces 7 <p:slider> UI glitch issue with <p:ajax>

Context:
We are migrating our project from Axon Ivy 6.3 to Axon Ivy 8. In Axon Ivy 6.3, we use Primefaces 6, and in Axon Ivy 8, we use Primefaces 7.
We have our project with Axon Ivy 6.3 running on our staging server, the glitch issue doesn't happen there. However, on our dev server, where the Axon Ivy project version 8 is running, the issue happens.
So I guess it has something to do with the version of Primefaces.
Here is some of the code that we're using, I hope this can provide enough information.
We have custom numberSlider component, which contains an input field and a <p:slider>.
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:cc="http://xmlns.jcp.org/jsf/composite"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<cc:interface>
<cc:attribute name="value" required="true"/>
<cc:attribute name="componentId" required="true" type="java.lang.String"/>
<cc:attribute name="minValue" default="0"/>
<cc:attribute name="maxValue" default="100"/>
<cc:attribute name="step" default="1"/>
<cc:attribute name="label" type="java.lang.String"/>
<cc:attribute name="inputStyleClass" type="java.lang.String"/>
<cc:attribute name="widgetVar" type="java.lang.String"/>
<cc:editableValueHolder name="input" targets="#{cc.attrs.componentId}Input" />
<cc:clientBehavior name="slideEnd" targets="#{cc.attrs.componentId}Slider" event="slideEnd" />
<cc:clientBehavior name="inputChange" targets="#{cc.attrs.componentId}Input" event="change" />
</cc:interface>
<cc:implementation>
<h:outputScript name="numberslider.js?v=#{cachedVersion}" library="js" target="head"/>
<h:outputStylesheet library="css" name="componentnumber.slider.min.css?v=#{cachedVersion}"/>
<p:outputLabel value="#{cc.attrs.label}" for="#{cc.attrs.componentId}Input" styleClass="c-blue label"/>
<p:inputNumber id="#{cc.attrs.componentId}Input" value="#{cc.attrs.value}"
styleClass="input #{cc.attrs.inputStyleClass}" decimalPlaces="0" thousandSeparator="'" minValue="0" maxValue="2000000">
</p:inputNumber>
<p:message for="#{cc.attrs.componentId}Input" id="#{cc.attrs.componentId}InputMessage"/>
<div class="spacing-small"></div>
<div class="range">
<p:outputPanel styleClass="slider__tooltipBlock">
<i class="arrow-up"></i>
<p:outputLabel styleClass="slider__tooltipLabel" id="#{cc.attrs.componentId}SliderTooltipLabel" value="#{cc.attrs.value}">
<f:convertNumber type="number" locale="de_CH"/>
</p:outputLabel>
</p:outputPanel>
<p:slider id="#{cc.attrs.componentId}Slider" widgetVar="#{cc.attrs.widgetVar}" styleClass="slider__line"
for="#{cc.attrs.componentId}Input"
step="#{cc.attrs.step}" maxValue="#{cc.attrs.maxValue}" minValue="#{cc.attrs.minValue}"
display="#{cc.attrs.componentId}SliderTooltipLabel">
</p:slider>
<script type="text/javascript">
$(document).ready(function(){
MF.component.numberSlider.initSliderToolTip('#{cc.attrs.widgetVar}');
})
</script>
</div>
</cc:implementation>
</ui:composition>
And this is the way we use that component:
<div class="column medium-6">
<com:numberSlider id="amount" componentId="amount" value="#{tranche.amount}"
label="#{ivy.cms.co('/xx/xxx/xxx/xx/component/product/tranches/amount')}"
minValue="0" maxValue="2000000" step="50000" widgetVar="amountSlider#{varStatus.index}">
<p:ajax event="inputChange" listener="#{logic.onInputChange(varStatus.index)}"
partialSubmit="true"
update="#([id$='productVariant']) #([id$='flexibilityPanel']) #([id$='houseOverlayDataVariant']) #([id$='houseOverlayData'])"
process="#([id$='productVariant'])"
oncomplete="updateProductPageElementsHeight(); bindEventListenerForRangeSlider(); bindEventListenerForToogleHouse();"/>
<p:ajax event="slideEnd" listener="#{logic.onInputChange(varStatus.index)}"
partialSubmit="true"
update="#([id$='productVariant']) #([id$='flexibilityPanel']) #([id$='houseOverlayDataVariant']) #([id$='houseOverlayData'])"
process="#([id$='productVariant'])"
oncomplete="updateProductPageElementsHeight(); bindEventListenerForRangeSlider(); bindEventListenerForToogleHouse()"/>
</com:numberSlider>
</div>
Behavior
When we drag and drop the slider on staging, then release the mouse, the UI is updated smoothly.
When we drag and drop the slider on dev, then release the mouse, the UI has one glitch, the slider disappears and then reappears quickly. Some CSS has not been applied first when the glitch happens, then when the slider appears again, the CSS then applied correctly.
I expect the UI get changed the same way on both two versions.
I've checked the rendered html code for both version, and I don't know why they're different.
Primefaces 6 rendered html:
<div class="column medium-6">
<label id="j_id_h4:j_id_h7:j_id_l2:0:amount:j_id_li" class="ui-outputlabel ui-widget c-blue label" for="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_input">Höhe</label><span id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput" class="ui-inputNum ui-widget input "><input id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_input" name="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_input" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all pe-inputNumber" role="textbox" aria-disabled="false" aria-readonly="false"><input id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_hinput" name="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_hinput" type="hidden" autocomplete="off" value="1050000"></span>
<div id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInputMessage" aria-live="polite" data-display="both" data-target="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput" data-redisplay="true" class="ui-message"></div>
<div class="spacing-small"></div>
<div class="range">
<div id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountSlider" class="slider__line ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 52.5%;">
<div id="j_id_h4:j_id_h7:j_id_l2:0:amount:j_id_lm" class="ui-outputpanel ui-widget slider__tooltipBlock">
<i class="arrow-up"></i><label id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountSliderTooltipLabel" class="ui-outputlabel ui-widget slider__tooltipLabel">1'050'000</label>
</div>
</span>
</div>
<script type="text/javascript">
$(document).ready(function(){
MF.component.numberSlider.initSliderToolTip('amountWidgetVar');
})
</script>
</div>
</div>
Primefaces 7 rendered html
<div class="column medium-6">
<label id="j_id_h4:j_id_h7:j_id_kn:0:amount:j_id_l3" class="ui-outputlabel ui-widget c-blue label" for="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_input">Höhe</label><span id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput" class="ui-inputnumber ui-widget input "><input id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_input" name="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_input" type="text" value="1100000" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" aria-labelledby="j_id_h4:j_id_h7:j_id_kn:0:amount:j_id_l3" onchange="PrimeFaces.ab({s:"j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput",e:"change",f:"mainForm",p:"#([id$='productVariant'])",u:"#([id$='productVariant']) #([id$='flexibilityPanel']) #([id$='houseOverlayDataVariant']) #([id$='houseOverlayData'])",ps:true,onco:function(xhr,status,args){updateProductPageElementsHeight(); bindEventListenerForRangeSlider(); bindEventListenerForToogleHouse();;}});" data-p-label="Höhe" data-p-con="javax.faces.Integer" data-p-hl="inputnumber" role="textbox" aria-disabled="false" aria-readonly="false"><input id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_hinput" name="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_hinput" type="hidden" autocomplete="off" data-p-label="Höhe" data-p-con="javax.faces.Integer" data-p-hl="inputnumber" value="1100000"></span>
<div id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInputMessage" aria-live="polite" data-display="both" data-target="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput" data-redisplay="true" class="ui-message"></div>
<div class="spacing-small"></div>
<div class="range">
<div id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountSlider" class="slider__line ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
<span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 55%;">
<div id="j_id_h4:j_id_h7:j_id_kn:0:amount:j_id_l7" class="ui-outputpanel ui-widget slider__tooltipBlock">
<i class="arrow-up"></i><label id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountSliderTooltipLabel" class="ui-outputlabel ui-widget slider__tooltipLabel">1'100'000</label>
</div>
</span>
</diva>
<script type="text/javascript">
$(document).ready(function(){
MF.component.numberSlider.initSliderToolTip('amountSlider0');
})
</script>
</div>
</div>
Pimefaces 6 renders the html without the onchange part.

p:tooltip doesn't work when form containing it is rendered-rerendered

Tooltip doesn't show up on mouseover if the form containing it is re-rendered with f:ajax.
<h:form id="childForm">
<div class="form-body form-body-margin-top">
<div class="row form-group col-md-12">
<h:selectOneMenu styleClass="form-control" value="#{bean.someCondition}">
<f:selectItem itemLabel="Yes" itemValue="true" />
<f:selectItem itemLabel="No" itemValue="false" />
<f:ajax execute="#this" render="childForm" />
</h:selectOneMenu>
</div>
</div>
<t:div styleClass="row form-group col-md-12" rendered="#{!bean.someCondition}">
<label>Choose Catalog
<sup><h:outputText id="tip1" class="fa fa-info-circle blue"/></sup> <p:tooltip for="tip1" value="Choose a category" position="top right" />
</label>
</t:div>
<t:div rendered="#{bean.someCondition}">
<label>Hello
<sup><h:outputText id="tip2" class="fa fa-info-circle blue"/></sup> <p:tooltip for="tip2" value="Choose a name" position="top right" />
</label>
</t:div>
</h:form>
Issue is simple:
When page is loaded for the first time "Yes" is selected in dropdown, tooltip for "choose a name" is visible works correctly.
When I select "No" in the dropdown form is re-rendered, tooltip for "choose a category" is visible but doesn't show up.
again if i change it back to "Yes", tooltip for "choose a name" is visible and doesn't work correctly.
Summary: Tooltip works only once the page loads, And then stop working for subsequent re-rendering of the form.
Looks like a DOM issue to me. As if whatever is in the "for" attribute of tooltip isn't availble in the DOM on re-render. Any Solution?
I couldn't find a pure JSF approach so used JS to achieve this, The issue according to me is that component tip1, tip2 are not present in the DOM when PF try searching for them (possibly a jsf lifecyle thing) because rendered attribute remove component it is applied on from the DOM. What I did was using a css class .hide which sets visibility to hidden. It keeps the component in the DOM instead of removing it:
.hide {
visibility: hidden;
}
now for above "rendered" attribute I just replaced with a comditional expression which applies hide class in the same way we want it to render.
<t:div styleClass="row form-group col-md-12 #{!bean.someCondition?'':'hide'}>
<label>Choose Catalog
<sup><h:outputText id="tip1" class="fa fa-info-circle blue"/></sup> <p:tooltip for="tip1" value="Choose a category" position="top right" />
</label>
</t:div>
this helps to render just the things we want when page loads. Now for the dynamic behavior when value from the drop down is selected i've used js to toggle hide class from the t:div. I call a function on onchange of h:selectonemenu.
function changepage(select) {
if(select.value == 'false') {
$("#onno").removeClass('hide');
$("#onyes").addClass('hide');
}
else if(select.value == 'true') {
$("#onyes").removeClass('hide');
$("#onno").addClass('hide');
}
}
So the complete page now looks like this:
<script>
function changepage(select) {
if(select.value == 'false') {
$("#onno").removeClass('hide');
$("#onyes").addClass('hide');
}
else if(select.value == 'true') {
$("#onyes").removeClass('hide');
$("#onno").addClass('hide');
}
}
</script>
<style>
.hide {
visibility: hidden;
}
</style>
<h:form id="childForm">
<div class="form-body form-body-margin-top">
<div class="row form-group col-md-12">
<h:selectOneMenu styleClass="form-control" value="#
{bean.someCondition}" onchange="changepage(this)">
<f:selectItem itemLabel="Yes" itemValue="true" />
<f:selectItem itemLabel="No" itemValue="false" />
<f:ajax execute="#this" render="childForm" />
</h:selectOneMenu>
</div>
</div>
<t:div id="onno" styleClass="row form-group col-md-12 #{!bean.someCondition?'':'hide'}">
<label>Choose Catalog
<sup><h:outputText id="tip1" class="fa fa-info-circle blue"/></sup>
<p:tooltip for="tip1" value="Choose a category" position="top right" />
</label>
</t:div>
<t:div id="onyes" styleClass="#{bean.someCondition?'':'hide'}">
<label>Hello
<sup><h:outputText id="tip2" class="fa fa-info-circle blue"/></sup>
<p:tooltip for="tip2" value="Choose a name" position="top right" />
</label>
</t:div>
</h:form>
In this way no components are removed from dom they are just invisible. And so they are available when "for" attribute of p:tooltip refers them.
It could be a problem with the id="tip2". Please try to write the complete path in the tooltip. something like
<p:tooltip for=":childForm:....:tip2" ... />
(I am not sure if t:div gets an id, but if so please set the id by yourself and try your tooltip with the complete id path)

Merging rows in dynamically binded apex:pageblockTable in visualforce page

I am new to Salesforce VF pages. I have a dynamically binded pageBlockTable in my Visualforce page. I wanted to merge certain dynamic rows based on a condition. Could someone please suggest, if there is any possible way to merge rows(or subrows) in apex:pageblocktable based on some conditions?
I have tried googling this, but could find no clues.
Any help is really appreciated.
Visualforce page code:
<apex:pageblock id="listBlock">
<apex:pageblockTable value="{!lstcomp}" var="oComp" styleclass="table table-striped table-hover" id="sysTable" rowClasses="even,odd">
<apex:column headerClass="TableTitle" style="width: 20%;height:4%" ><apex:facet name="header"><font class="headerfontstyle" >Name</font></apex:facet>
<font class="rowdatastyle"> {!oComp.Name} </font>
</apex:column>
<apex:column headerClass="TableTitle" style="width: 10%;height:4%" ><apex:facet name="header"><font class="headerfontstyle" >Mfg</font></apex:facet>
<font class="rowdatastyle" > {!oComp.Manufacturer}</font>
</apex:column>
<apex:column headerClass="TableTitle" style="width: 6%;height:4%"><apex:facet name="header"><font class="headerfontstyle" >Type</font></apex:facet>
<font class="rowdatastyle" > {!oComp.ComponentType} </font>
</apex:column>
<apex:column headerClass="TableTitle" style="width: 12%;height:4%"><apex:facet name="header"><font class="headerfontstyle" >Allocated</font></apex:facet>
<font class="rowdatastyle"> {!oComp.Allocated} </font>
</apex:column>
<apex:column headerClass="TableTitle" style="width: 10%;height:4%"><apex:facet name="header"><font class="headerfontstyle" >Used</font></apex:facet>
<font class="rowdatastyle"> {!oComp.Used} </font>
</apex:column>
<apex:column headerClass="TableTitle" style="width: 30%;height:4%"><apex:facet name="header"><font class="headerfontstyle" >Version</font></apex:facet>
<font class="rowdatastyle">{!oComp.OS} </font>
</apex:column>
</apex:pageblockTable>
You could group your records base on certain conditions and show the rest of fields as from child records.
<apex:pageblockTable>
<apex:column value="{!acc.name}">
<apex:column>
<apex:facet name="header"> Team Members </apex:facet>
<apex:pageblocktable value="{!acc.AccountTeamMembers}" var="tm">
<apex:column headerValue="Team Member">
<apex:outputfield value="{!tm.User.Name}"/>
</apex:column>
<apex:column headerValue="Role">
<apex:outputfield value="{!tm.TeamMemberRole}"/>
</apex:column>
</apex:pageblocktable>
</apex:column>
</apex:pageblockTable>

Weird behavior (bug) of inputCheckbox in the visualforce

inputCheckbox and commandLink/commandButton can't work together !!
Case 1:
Try the codes.
The visualforce action in this one can't work.
<apex:commandLink action="{!SelectTicket}" reRender="outputPanel">
<apex:inputCheckbox value="{!ordsOptions[o]}"/>
<apex:param name="selected" value="{!o.id}" assignTo="{!selected}"/>
</apex:commandLink>
Without value="{!ordsOptions[o]}" in the inputCheckbox. The almost same code just works fine.
<apex:commandLink action="{!SelectTicket}" reRender="outputPanel">
<apex:inputCheckbox/>
<apex:param name="selected" value="{!o.id}" assignTo="{!selected}"/>
</apex:commandLink>
Case 2:
It doesn't fire the action at all when add the inputCheckbox in another column.
<apex:dataTable border="4" value="{!ords}" var="o">
<apex:column >
<apex:commandLink action="{!SelectTicket}" reRender="outputPanel">
<apex:inputCheckbox />
<apex:param name="selected" value="{!o.id}" assignTo="{!selected}"/>
</apex:commandLink>
</apex:column>
<apex:column ><apex:inputCheckbox value="{!ordsOptions[o]}"/></apex:column>
<apex:column ><apex:outputText value="{!ordsOptions[o]}"/></apex:column>
<apex:column value="{!o.Id}"/>
<apex:column value="{!o.Name}"/>
</apex:dataTable>
It just works fine without inputCheckbox along with commandLink:
<apex:dataTable border="4" value="{!ords}" var="o">
<apex:column >
<apex:commandLink action="{!SelectTicket}" reRender="outputPanel">
<apex:inputCheckbox />
<apex:param name="selected" value="{!o.id}" assignTo="{!selected}"/>
</apex:commandLink>
</apex:column>
<-- <apex:column ><apex:inputCheckbox value="{!ordsOptions[o]}"/></apex:column> -->
<apex:column ><apex:outputText value="{!ordsOptions[o]}"/></apex:column>
<apex:column value="{!o.Id}"/>
<apex:column value="{!o.Name}"/>
</apex:dataTable>
The whole codes
vf:
<apex:page controller="SelectRadio" sidebar="false">
<apex:outputPanel id="outputPanel">
<apex:form >
<apex:dataTable border="4" value="{!ords}" var="o">
<apex:column >
<apex:commandLink action="{!SelectTicket}" reRender="outputPanel">
<apex:inputCheckbox />
<apex:param name="selected" value="{!o.id}" assignTo="{!selected}"/>
</apex:commandLink>
</apex:column>
<apex:column ><apex:inputCheckbox value="{!ordsOptions[o]}"/></apex:column>
<apex:column ><apex:outputText value="{!ordsOptions[o]}"/></apex:column>
<apex:column value="{!o.Id}"/>
<apex:column value="{!o.Name}"/>
</apex:dataTable>
<apex:commandButton action="{!rSfdc}" value="按鍵"/>
</apex:form>
<hr/>
<h1>Debug</h1>
<p>ordsOptions = {!ordsOptions}</p>
<p>ordsOptionName = {!ordsOptionName}</p>
<p>selected = {!selected}</p>
</apex:outputPanel>
</apex:page>
class:
public with sharing class SelectRadio {
public List<String> vars {get;set;}
public List<Custom_Object__c> ords {get; set;}
public Map<Id,Boolean> ordsOptions {get; set;}
public Map<Id,String> ordsOptionName {get; set;}
public Id selected {get;set;}
public SelectRadio(){
ordsOptions = new Map<Id,Boolean>();
ordsOptionName = new Map<Id,String>();
ords = [ SELECT Id, Name FROM Custom_Object__c ORDER BY Name ];
for (Custom_Object__c tmp : ords) {
ordsOptions.put(tmp.Id, false);
ordsOptionName.put(tmp.Id, tmp.Name);
}
}
public pageReference SelectTicket() {
for(Custom_Object__c tmp : ords) if(tmp.Id == selected) ordsOptions.put(tmp.Id, true); else ordsOptions.put(tmp.Id, false);
return null;
}
public PageReference rSfdc() {
PageReference rp = new PageReference('http://www.salesforce.com');
rp.setRedirect(true);
return rp;
}
}
It's not a bug at all. And, it has to be so.
It is all about the logic of OO programming.
Finally, I found myself the answer.
Check the answer here: http://boards.developerforce.com/t5/Visualforce-Development/Strange-Bug-of-the-apex-inputCheckbox/m-p/631629/highlight/false#M65163
It can be used to replace the selectRadio, and pattern code is more flexible than apex:selectRadio. The sample pattern is easily to use with apex:dataTable and apex:repeat. That's the reason to write the code. Enjoy it with me if you like.

Visualforce Toolbar Rerender Firefox bug

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?
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>

Resources