+ Start a Discussion
thedgethedge 

Multivalue picklists rendering in tabPanel...

I'm running into a strange rendering problem when utilizing the <ajax:inputField> tag with a multi-select pick list inside of a tabPanel.
 
The list renders very small and the user cannot make out the lselection ist contents.  If I request the same list in the same panel a second time (different name for the id attribute) the second list renders perfectly.
 
If I remove the tabPanel then everything looks like it should.
....
 
Renders Incorrectly:
<apex:pageBlock title="Profile Information">
     <apex:tabPanel switchType="client" selectedTab="General" id="theTabPanel">
          <apex:tab name="General" title="General" label="General">
               <apex:form>
                    <apex:outputLabel for="aLanguages" value="Languages: "/>
                    <apex:inputField id="aLanguages" value="{!a.Languages__c}"/>
               </apex:form>
          </apex:tab>
     </apex:tabPanel>
</apex:pageBlock>

Renders Correctly (only aLanguages2 renders correctly)

<apex:pageBlock title="Profile Information">
     <apex:tabPanel switchType="client" selectedTab="General" id="theTabPanel">
          <apex:tab name="General" title="General" label="General">
               <apex:form>
                    <apex:outputLabel for="aLanguages" value="Languages: "/>
                    <apex:inputField id="aLanguages" value="{!a.Languages__c}"/>
                    <apex:outputLabel for="aLanguages2" value="Languages: "/>
                    <apex:inputField id="aLanguages2" value="{!a.Languages__c}"/>
               </apex:form>
          </apex:tab>
     </apex:tabPanel>
</apex:pageBlock>
 
any ideas?
dchasmandchasman
We're looking into this
jwetzlerjwetzler
thedge:

I'm having problems reproducing this.  I put a multiselect picklist on an account and then  copied your page into mine and it looks fine.

I assume that the rest of your page is more than just what you posted between <apex:page> tags.  I think the best way to help me get a reproducible case is to give me the full page markup of the simplest case possible.  It seems like there must be something else on your page causing this to happen if your snippet renders fine for me.

If you put just that snippet on its own page, does it work?
thedgethedge

thanx for taking a look at this.  Here is a revised "complete" page which demonstrates the issue:

<apex:page tabStyle="Artists__c" controller="ArtistsController">

<apex:pageBlock title="Profile Information">

        <apex:tabPanel switchType="client" selectedTab="General2" id="theTabPanel">

                <apex:tab name="General" title="General" label="General">

                        <apex:form>

                                <apex:commandButton action="{!save}"value="Save"/>

                                <apex:pageBlockSection columns="2">

                                        <apex:inputField id="aLanguages" value="{!artist.Languages__c}"/>

                                </apex:pageBlockSection>

                        </apex:form>

                </apex:tab>

               <apex:tab name="General2" title="General2" label="General2">

                        <apex:form>

                                <apex:commandButton action="{!save}"value="Save"/>

                                <apex:pageBlockSection columns="2">

                                        <apex:inputField id="aLanguages2" value="{!artist.Languages__c}"/>

                                </apex:pageBlockSection>

                        </apex:form>

                </apex:tab> 

        </apex:tabPanel>

</apex:pageBlock>

</apex:page>

Two strange behaviors are attributed to the above. 

1) Although both tabs contain the exact same markup and field references the multi-value picklist renders differently on each tab.  The "General" tab renders the picklist wider than the "General2" tab.

2) If the “selectedTab” attribute is set to “General” then the result is what is described in #1 above.  However, if “selectedTab” is set to “General2” then the picklist on the “General” tab is too narrow but the picklist on the “General2” tab is fine.

 

thanx again.

 

 

 

jwetzlerjwetzler
Before I try this out I want to note that while we don't specifically block it (yet?), we also don't formally support having two inputFields bound to the same field on one page.  I could see how you might expect this to work since they are in separate forms, but even so this could complicate things if people have partial page updates on their page--all of a sudden your inputFields could have two different values.

Putting two on the same page definitely has an effect on the way some of our inputFields are rendered because it confuses some of our elements, so that might be the crux of your problem.

I will look at this more in depth sometime today but you might want to consider a way to create your page without using two inputFields bound to the same field.  I can't promise that this will always be supported.

Jill
thedgethedge

Agreed...this would be a horrible way to create a page.  I've pulled this together to demonstrate my original issue.

thanx.