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
sfdc18sfdc18 

How to fix the width of image displayed thro' outputField

Hi,

 

I have displayed one image on visualforce page using outputField.

This field data type is TextArea(Rich) in the crm.

The problem is I am not able to keep its width constant thro attribute style="width:400px;".

Any solutions for this?

Best Answer chosen by Admin (Salesforce Developers) 
Puja_mfsiPuja_mfsi

Hi,

Kamatchi gives a good ways to use <table> component, but by this we can't override the standard CSS .

I have modify the reply as:

 

<apex:page standardController="Account" id="thePage">
       <apex:form id="theForm">
            <style>
                #rich1 .sfdc_richtext img {
                     width: 50px;
               }
              #rich2 .sfdc_richtext img {
                   width: 150px;
              }
        </style>
        <apex:pageBlock id="theBlock">
              <table>
                  <tr>
                        <td id="rich1">
                             <apex:outputField value="{!Account.RichText__c}" />
                        </td>
                        <td id="rich2">
                                <apex:outputField value="{!Account.Rich_Text_2__c}" />
                        </td>
                    </tr>
              </table>
          </apex:pageBlock>
       </apex:form>

</apex:page>

 

We need to add Id for each <td> which contains Rich text field and override the standard CSS as:

#rich1 .sfdc_richtext img {
        width: 50px;
}

 

Please let me know if u have any quesry on same and if this post helps u please throw KUDOS by click on star on left.

 

All Answers

Puja_mfsiPuja_mfsi

Hi,

you need to override the standard CSS in uor VF page.

Add the below CSS in uor VF page,so it override the original CSS value with your values.

 

<style>
.sfdc_richtext img {
       width:100px !important;
}
</style>

 

Please let me know if u have any problem on same and if this post hepls u please throw KUDOS by click on star.
sfdc18sfdc18

Hi Puja,

 

If I have the multiple richtext images and if i want different width's for them then what change i should make in your code?

 

Thanks,

Mayur
Kamatchi Devi SargunanathanKamatchi Devi Sargunanathan

Hi Mayur,

 

For using rich text editor, style classes can be applied, or sometimes it may not be supported. So, better you can have a table and rows & columns for that outputField.

 

Try the following,

 

<apex:page standardController="Sample__c">
   <apex:form>
   <table width="100%">  
     <tr>
        <td width="50%"> <apex:outputfield value="{!Sample__c.img__c}"/> </td>  //This is my richtext field in Sample__c object. It has two columns, so it is resized by giving the width for <td>.
        <td width="50%">&nbsp;</td>
    </tr>
   </table>    
     <apex:commandButton value="Save" action="{!save}"/>  
   </apex:form>
 </apex:page>

 

In the above page I'm having a inline Vf page in the object 'Sample__c', where i can hold the output of the Richtext editor resized according to the width of the <td> specified.

 

 

Hope so this helps you...!

Please mark this answer a Solution and please give kudos by clicking on the star icon, if you found this answer as helpful.
Puja_mfsiPuja_mfsi

Hi,

Kamatchi gives a good ways to use <table> component, but by this we can't override the standard CSS .

I have modify the reply as:

 

<apex:page standardController="Account" id="thePage">
       <apex:form id="theForm">
            <style>
                #rich1 .sfdc_richtext img {
                     width: 50px;
               }
              #rich2 .sfdc_richtext img {
                   width: 150px;
              }
        </style>
        <apex:pageBlock id="theBlock">
              <table>
                  <tr>
                        <td id="rich1">
                             <apex:outputField value="{!Account.RichText__c}" />
                        </td>
                        <td id="rich2">
                                <apex:outputField value="{!Account.Rich_Text_2__c}" />
                        </td>
                    </tr>
              </table>
          </apex:pageBlock>
       </apex:form>

</apex:page>

 

We need to add Id for each <td> which contains Rich text field and override the standard CSS as:

#rich1 .sfdc_richtext img {
        width: 50px;
}

 

Please let me know if u have any quesry on same and if this post helps u please throw KUDOS by click on star on left.

 

This was selected as the best answer