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
KeithJKeithJ 

Cannot achieve layout with panelGrid

Hi there.
Basically I have a pageBlockSection with a column size of 2.
I have a selectList that has a defined outputLabel.
When I click on a selectOption within the SelectList another List appears and when this is clicked another list appears.
In all there are 3 Lists and 1 label for each.
I have a panelGrid with 2 columns width.
Basically I want a nice clean layout of the 1st label, 1st select List,
(when rendered) 2nd label, 2nd list,
(when rednered) 3rd label, 3rd list

Here is my code
Code:
<apex:pageBlockSection title="Case Assignment" columns="2">
                <apex:actionRegion >
                 <apex:panelGrid columns="2" width="100%">
                  <!--<apex:panelGroup layout="inline">-->
                  <apex:outputLabel for="accountList" value="Account" />
                    <apex:selectList value="{!selectedAccount}" multiselect="false" size="6" id="accountList">
                        <apex:selectOptions value="{!allAccountsOptions}" />
                        <apex:actionSupport event="onclick" action="{!queryForSalesOrders}" status="queryStatus" rerender="ordersPanel,orderLineItemPanel" />
                        <apex:actionStatus id="queryStatus">
                            <apex:facet name="start">
                                <apex:image url="{!$Resource.ajaxicon}" alt="Loading..." />
                            </apex:facet>
                        </apex:actionStatus>  
                    </apex:selectList> 
                    
                    
                    <apex:outputPanel id="ordersPanel"> 
                      <apex:outputLabel for="salesOrderList" value="Sales Order" rendered="{!renderSalesOrderSelectList}" />
                        <apex:selectList id="salesOrderList" value="{!selectedSalesOrder}" multiselect="false" size="6" rendered="{!renderSalesOrderSelectList}">
                            <apex:selectOptions value="{!SalesOrderOptionsItems}" />
                            <apex:actionSupport event="onclick" action="{!queryForOrderLineItems}" status="orderQueryStatus" rerender="orderLineItemPanel"/>
                            <apex:actionStatus id="orderQueryStatus">
                            <apex:facet name="start">
                                <apex:image url="{!$Resource.ajaxicon}" alt="Loading..." />
                            </apex:facet>
                        </apex:actionStatus>
                        </apex:selectList>
                    </apex:outputPanel>
                    
                    
                    <apex:outputPanel id="orderLineItemPanel">
                      <apex:outputLabel for="orderItemList" value="Sales Order Item" rendered="{!renderSalesOrderLineItemList}" />
                        <apex:selectList id="orderItemList" value="{!selectedSalesOrderLineItem}" multiselect="false" size="6" rendered="{!renderSalesOrderLineItemList}">
                            <apex:selectOptions value="{!salesOrderLineItems}" />
                        </apex:selectList>
                    </apex:outputPanel>
                   <!-- </apex:panelGroup>-->
                   </apex:panelGrid>
                  </apex:actionRegion>
                  
                  <apex:inputField value="{!Case.Case_Routing__c}" />
                  <apex:inputField value="{!Case.Contract__c}" />
               </apex:pageBlockSection>

 Here is what I currently see when the default list is rendered:



No problems here.
When all three lists are displayed after selecting values in the account list, i see:



This looks absolutely awful. This is a real shot in the dark, but can someone please please inform me as to how
I could have a nicer layout. The way it is in the last image is not great, as the labels are displayed on top of the lists.
A left to right layout would actually be alright. But I have the other 2 fields, contract & case routing to worry about.
Any help greatly welcomed.
Thank you very much.
JRTConsultJRTConsult
I am having a similar issue panelGrid!!!
 
I have a table for which I want to hide row dependent upon particular conditions. The hide/show logic works great, but the columnar formatting is inconsistent, regardless of the style="width" tags I place on the fields.
 
 
Code:
<apex:panelGrid columns="4" width="700" id="Header" border="1" >

        <apex:outputText style="width:400px;" value="Asset Class"  id="h1" />
        <apex:outputText style="width:100px;" value="Minimum"  id="h2" />
        <apex:outputText style="width:100px;" value="Long-Term Target" id="h3" />
        <apex:outputText style="width:100px;" value="Maximum" id="h4" />
</apex:panelGrid>

 <apex:panelGrid columns="4" width="700px" id="CandE" border="1" rendered="{!IF(Investment_Policy_Statement__c.CEMIN__c + Investment_Policy_Statement__c.CETAR__c + Investment_Policy_Statement__c.CEMAX__c > 0, 'True', 'False')}">
        <apex:outputText style="width:400px;" value="Cash and Equivalents" id="td1" />
        <apex:outputText style="width:100px;" value="{!Investment_Policy_Statement__c.CEMIN__c}%" id="td2" />
        <apex:outputText style="width:100px;" value="{!Investment_Policy_Statement__c.CETAR__c}%" id="td3" />
        <apex:outputText style="width:100px;" value="{!Investment_Policy_Statement__c.CEMAX__c}%"  id="td4" />
</apex:panelGrid>
 <apex:panelGrid columns="4" width="700px" id="EQ"  border="1" rendered="{!IF(Investment_Policy_Statement__c.EQMIN__c + Investment_Policy_Statement__c.EQTAR__c + Investment_Policy_Statement__c.EQMAX__c > 0, 'True', 'False')}">
        <apex:outputText style="width:400px;" value="Equities" id="td5" />
        <apex:outputText style="width:100px;" value="{!Investment_Policy_Statement__c.EQMIN__c}%" id="td6" />
        <apex:outputText style="width:100px;" value="{!Investment_Policy_Statement__c.EQTAR__c}%" id="td7" />
        <apex:outputText style="width:100px;" value="{!Investment_Policy_Statement__c.EQMAX__c}%" id="td8" />
</apex:panelGrid>
 <apex:panelGrid columns="4" width="700px" id="FI" border="1"  rendered="{!IF(Investment_Policy_Statement__c.FIMIN__c + Investment_Policy_Statement__c.FITAR__c + Investment_Policy_Statement__c.FIMAX__c > 0, 'True', 'False')}">
        <apex:outputText style="width:400px;" value="Fixed Income        " id="td9" />
        <apex:outputText style="width:100px;" value="{!Investment_Policy_Statement__c.FIMIN__c}%" id="td10" />
        <apex:outputText style="width:100px;" value="{!Investment_Policy_Statement__c.FITAR__c}%" id="td11" />
        <apex:outputText style="width:100px;" value="{!Investment_Policy_Statement__c.FIMAX__c}%" id="td12" />
</apex:panelGrid>
 <apex:panelGrid columns="4" width="700px" id="RA" border="1"  rendered="{!IF(Investment_Policy_Statement__c.RAMIN__c + Investment_Policy_Statement__c.RATAR__c + Investment_Policy_Statement__c.RAMAX__c > 0, 'True', 'False')}">
        <apex:outputText style="width:400px" value="Real Assets         " id="td13" />
        <apex:outputText style="width:100px" value="{!Investment_Policy_Statement__c.RAMIN__c}%" id="td14" />
        <apex:outputText style="width:100px" value="{!Investment_Policy_Statement__c.RATAR__c}%" id="td15" />
        <apex:outputText style="width:100px" value="{!Investment_Policy_Statement__c.RAMAX__c}%" id="td16" />
</apex:panelGrid>
 <apex:panelGrid columns="4" width="700px" id="ALT" border="1"  rendered="{!IF(Investment_Policy_Statement__c.ALTMIN__c + Investment_Policy_Statement__c.ALTTAR__c + Investment_Policy_Statement__c.ALTMAX__c > 0, 'True', 'False')}">
        <apex:outputText style="width:400px" value="Alternatives" id="td17" />
        <apex:outputText style="width:100px" value="{!Investment_Policy_Statement__c.ALTMIN__c}%" id="td18" />
        <apex:outputText style="width:100px" value="{!Investment_Policy_Statement__c.ALTTAR__c}%" id="td19" />
        <apex:outputText style="width:100px" value="{!Investment_Policy_Statement__c.ALTMAX__c}%" id="td20" />
</apex:panelGrid>