0

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

2 Answers 2

0

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

1
  • HI @Janet, my question is a little different. I was trying to get the Red bar (image) and the description next to each other as it shows in the Methodology field.
    – Quest_sfdc
    Jul 30, 2018 at 20:38
0

I used custom css to solve this issue.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .