[SalesForce] How to control PageblockSectionItem width for a particular pageBlockSectionItem

I have this visualforce page with pageBlockSection as below code snippet and screenshots. I am trying to get the image in the Description field to show just as in the Methodology field. I tried using dataStyle, dataStyleClass etc. but nothing helped. I am attaching a screen-shot here both for classic and lightning experience. In both (classic and LEX) it should look like the Methodology field. For ligthtning I am using lightningStyleSheets="true" attribute. 

                    <Style>
                        .myStyle{
                        margin-right: 3px;
                        vertical-align: middle;
                        padding-top:
                        } 
                    </style>
                    <apex:pageblock>
                    <apex:pageBlockSection columns="2">
                        <apex:pageBlockSectionItem >
                            <apex:outputLabel>Methodology</apex:outputLabel>
                            <apex:panelGroup>
                                <apex:image value="{!$Resource.myImage}" styleClass="myStyle"/>
                                <apex:inputField value="{!value}" />
                            </apex:panelGroup>
                        </apex:pageBlockSectionItem>

                        <apex:pageBlockSectionItem >
                            <apex:outputLabel>Description</apex:outputLabel>
                            <apex:panelGroup>
                                <apex:image value="{!$Resource.myImage}" styleClass="myStyle"/>
                                <apex:inputField value="{!record_Description__c}" />
                                <!-- This is rendered as TextArea -->
                            </apex:panelGroup>
                        </apex:pageBlockSectionItem>
                    </apex:pageBlockSection>
</apex:pageblock>

LEX

Best Answer

If I understand the question correctly, I think the widths are nearly the same but the heights are different. Below is your code that I tried in the classic org by adding styleClass to the textarea field and later added it to the text just to be sure the two fields are of the same width and height

<Style>
    .myStyle{
    width: 10%;
    margin-right: 3px;
    vertical-align: middle;
    padding-top: 20px;
    }
    .des {
      width: 50%;
      height: 30px;
    }  
</style>
 <apex:form >
 <apex:pageBlock >
 <apex:pageBlockSection columns="1">
  <apex:pageBlockSectionItem >
        <apex:outputLabel >Methodology</apex:outputLabel>
        <apex:panelGroup >
            <apex:image value="{!$Resource.spring}" styleClass="myStyle"/><br/><br/>   <!--This is a textarea-->
           <apex:inputField value="{!attach.Description}" styleClass="des" />
        </apex:panelGroup>
    </apex:pageBlockSectionItem>

    <apex:pageBlockSectionItem >
        <apex:outputLabel >Description</apex:outputLabel>
        <apex:panelGroup >
            <apex:image value="{!$Resource.spring}" styleClass="myStyle"/><br/><br/>
            <apex:inputField value="{!cust.Customer_Description__c}" styleClass="des" />
            <!-- This is rendered as TextArea -->
        </apex:panelGroup>
    </apex:pageBlockSectionItem>

 </apex:pageBlockSection>
 </apex:pageBlock>
</apex:form>

If you don't need to style the text field any further, remove its styleClass. This is the screen-shot enter image description here

Related Topic