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
TehNrdTehNrd 

How to set height/width of Rich Text outputField?

Pretty simple question. How do you set the height of a Rich Text field in a visualforce page. It seems like no matter what I do it is stuck at 35px which is obviously not very useful.

 

None of these seem to work:

 

 

<apex:page controller="Image">
    <style>
        .customImage{
            height: 240px;
            width: 180px;
        }
    </style>

    <apex:outputField id="image" value="{!obj.Image__c}" styleClass="customImage" />
    
    <apex:outputField id="image" value="{!obj.Image__c}" style="height:240px;width:180px" />

</apex:page>

 

What's the secret?

 

Thanks,

Jason

imuino2imuino2

How big is the image?. Because i dont think that the content on the field will be stretched. I think that's the problem.
WesNolte__cWesNolte__c

Haven't dug into this one just yet, but it's probably because some JS is pulling elements into the DOM? If that's the case then (depending on when that JS executes) your CSS is not at the top of the stylesheet cascade. Quite often you can 'force' your style to be the top dog by using !important e.g.

 

 .customImage{
            height: 240px !important;
            width: 180px;
        }
TehNrdTehNrd

The styly classes aren't even being applied to the ifram. The bahavior of these fields is really bizzare. The displayed content is iframed but then there is also a another div with display set to none that contains the exact content of the iframe. If you set the standarStyleSheets tag to false on the page it will actuallly show the output twice.
WesNolte__cWesNolte__c

Hmmm.. tricky. What if you use ouputText with escape set to false?

 

Wes
TehNrdTehNrd

Getting closer.

 

This:

 

<apex:outputText id="image" value="{!i.Image__c}" styleClass="customImage" escape="false"/>

 

Renders this, but span doesn't not respect height and width attributes.

 

 

<span class="customImage" id="j_id0:j_id2:0:image">
    <img alt="User-added image" src="/servlet/rtaImage?eid=a03A0000000qIKX&feoid=00NA0000003DNTl&refid=0EMA0000000Kyta">
    <br>
</span>

 

How did you host images for the cooking site you build? I've got a spinoff thread going here: Best way to host images for CMS type site?

 
WesNolte__cWesNolte__c

Spans are inline elements so they don't like to obey block-type style instructions. Set 'display: block' for .customImage and that should sort it.

 

I have a 'normal' SF backend for the cookbook, it put images into the Document obj which stores them as blobs. You can then use the document ID together with a script URL to display them, I can dig out the URL if you'd like.

 

Wes
TehNrdTehNrd

Still not quite getting me to where I'd like to be. I'd like to apply styles straight to the image. I suppose I could do something like:

 

.customImage img{
    height: 240px;
}

It works but it seems sort of clunky.

 

Did you build a VF page to manage the document attachements. If a record has more than one image. This would required a standarized naming process so your components could query the correct image. Right?
WesNolte__cWesNolte__c

Documents themselves are more or less blobs (binary large objects) with some fields to describe them. You can use them to store images, pdfs and other cool stuff. So you'd typically have one document per image, and you can put documents into folders if you need to organise them. I haven't done it for a while so my skillz are a bit fuzzy, I posted a snippet in your CMS post.

 

Wes
Matt_Matt_

Use a <div> tag to increase the width. 
ex:
<div width=""> <apex:inputtextarea value="{!Object__c.Field__c}" richText="true"/>
</div>

Cheers!
Aruna VasahanAruna Vasahan

Hi  @WesNolte__c,
    Can u please provide an example for ur idea.
Thanks
Aruna V