3

I am attempting to use panel grid to display 6 columns. The first 5 columns are simple picklist fields. The 6th column is a Comments field. I would like the first 5 columns to be rather narrow, and the last column to have a very wide typing space. I want the table to be collapsible as well, if possible.

This works fine in View mode. The Comments column is automatically expanded out to the necessary width. But in Edit mode the Comments column is only slightly expanded out to a width which can fit the Long Text field editing space (which is not very wide).

How can I make that final Comments field column automatically expanded out in Edit mode ?

Here is my code : (the first column of the header row is intentionally blank)

 <!-- **********   START OF RISK MATRIX GRID  EDIT PAGE**********  -->
            <apex:pageblocksection title="Risk Assessment" showheader="true" collapsible="true" columns="1">
            <br></br>
            Risk Measures :<br></br>
                  Risk Probability - (P):Low(1), Moderate(2), High(3)<br></br>
                  Risk Severity - (S):Low(1), Moderate(2), High(3)<br></br>
                  Control Adequacy - (C):Weak(1,2), Moderate(3,4), Strong(5,6)<br></br>
                  Risk Direction - (D):Decreasing(1), Stable(2), Increasing(3)<br></br><br></br>

          <apex:panelGrid columns="6" width="1500" cellpadding="0" cellspacing="0" rules="all" frame="box" border="4" >
            <!-- The first column of header row-->

            <apex:panelGrid columns="6" width="100%"  cellpadding="0" cellspacing="0" rules="all" frame="box" border="4" >
                <!-- Output panel used to be able to layout the row -->
                <apex:outputPanel style="padding:12px;" layout="block" styleClass="myHeader">
                    <apex:outputText value=""/>
                </apex:outputPanel>
        <!-- end first column of header row-->

                <!-- header row -->
                <apex:outputPanel style="padding:5px;" layout="block" styleClass="myHeader" >
                    <apex:outputText value="Probability"/>
                </apex:outputPanel>
                <apex:outputPanel style="padding:5px;" layout="block" styleClass="myHeader">
                    <apex:outputText value="Severity"/>
                </apex:outputPanel>
                <apex:outputPanel style="padding:5px;" layout="block" styleClass="myHeader">
                    <apex:outputText value="Control Adequacy"/>
                </apex:outputPanel>
                <apex:outputPanel style="padding:5px;" layout="block" styleClass="myHeader">
                    <apex:outputText value="Direction"/>
                </apex:outputPanel>
                <apex:outputPanel style="padding:5px;" layout="block" styleClass="myHeader">
                    <apex:outputText value="Comments"/>

                </apex:outputPanel>
            <!-- end header row -->

            <!-- first row -->   
                <apex:panelGrid columns="1" width="100%" cellpadding="0" cellspacing="0" rules="all" columnClasses="colClass" rowclasses="rowwithborder">
                    <apex:outputText value="Credit"/>
                </apex:panelGrid> 

                <apex:outputPanel style="padding:5px;" layout="block">
                <apex:inputfield value="{!Vendor_Product_Review__c.CreditRiskProbability__c}"/>
                </apex:outputPanel>
                <apex:outputPanel style="padding:5px;" layout="block">
                <apex:inputfield value="{!Vendor_Product_Review__c.CreditRiskSeverity__c}"/>
                </apex:outputPanel>
                <apex:outputPanel style="padding:5px;" layout="block">
                <apex:inputfield value="{!Vendor_Product_Review__c.CreditControlAdequacy__c}"/>    
                </apex:outputPanel>
                <apex:outputPanel style="padding:5px;" layout="block">
                <apex:inputfield value="{!Vendor_Product_Review__c.CreditRiskDirection__c}"/>                          
                </apex:outputPanel>
                <apex:outputPanel style="padding:5px;" layout="block">
                <apex:inputfield value="{!Vendor_Product_Review__c.Comments_Credit__c}"/>                          
                </apex:outputPanel>
            <!-- end first row -->

            </apex:pageblocksection>

            <!-- **********   END OF RISK MATRIX GRID  EDIT PAGE**********  -->

Thank you very much for any input.

Edit :

Here is a picture of the panelgrid. Notice the grid itself is wide. I essentially want the typing space of the Comments field to automatically expand out to the end of the panelgrid in order to give the user wider typing space (without manually expanding the field themselves).

2nd image same as first

  • 1
    If you can put pictures that will be good to understand – Santanu Boral Aug 2 '16 at 15:16
  • 1
    try <apex:inputfield ... html-cols="75" /> -- it should affect text area fields only – kurunve Aug 2 '16 at 15:24
  • @kurunve - that seems to have done the trick - thank you ! – Zoom_v Aug 2 '16 at 15:30
  • @SantanuBoral - fyi : I attempted to put a pic into the post but it looks like it's not working properly. Thank you anyway. – Zoom_v Aug 2 '16 at 15:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.