function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
developerTeamdeveloperTeam 

Customize the Font-size in Iframe component of my VF page

Hi, 

am Using <apex:iframe>  in my VfF page for showin a Custom Object Detail Page(Standard Salesforce's Page) in my VF page. I want to Change/Customize the font-size or look of the Custom Object Detail Page which is present in my <apex:iframe>.

I had used div tag which are of no use to change the Font-size or type only the Difference is shown on Height or Width of iframe.

 

My Code used is:

<div class="outputpanel"> 
<apex:iframe src="{!b}" frameborder="false" scrolling="true" title="New Color" height="500" width="100%"/>
</div>  

am Passing the value of b as following:

b= 'https://cs5.salesforce.com/'+ p.getKeyPrefix() +'/e'+'?isdtp=vw';

Just i need to Increase the Content size/Font-size in the Iframe... help me!

Best Answer chosen by Admin (Salesforce Developers) 
developerTeamdeveloperTeam

Hi,

 

I had Cracked the Issue.... 
As we couldn't Change the font-size of the content of Iframe ...Instead we can Zoom the Content... 
So I had Used  the Folowing Code:

 

<style>
#frameScale { width: 100%; height: 100%; padding: 0; position:relative; left:-90px; top:0px; overflow: hidden; font-size: 800px;}
#frame { width: 100%; height: 100%; position:relative; left:0px; top:0px; }
#frame { -ms-zoom: 1.2; -moz-transform: scale(1.2); -moz-transform-origin: 0px 0; -o-transform: scale(1.2); -o-transform-origin: 0 0; -webkit-transform: scale(1.2); -webkit-transform-origin: 0 0; }
</style>

<div id="frameScale ">
<apex:iframe src="URL" frameborder="false" scrolling="true" title="Iframe" id="frame"/> 
</div>

Thank You..

 

Please accept my answer as a solution if my solution was helpful. This will make it available to others as a proper answer. If you felt that I went above and beyond please give me Kudos by clicking on on the star icon.

 

Sandeep | Salesforce Developer

All Answers

Vinita_SFDCVinita_SFDC

Hello,

 

In iFrame tag there is no attribute for defining font. You can control font size with CSS, here you can define div font in CSS outputpanel.

developerTeamdeveloperTeam
We had tried all the possiblities with Css and my sample code is Below for your reference:
<style>
.outputpanel{
font-size: 23px;
font-family:Arial,Helvetica,sans-serif;
font-style:normal;
background-image:none;
height: 600px;
width: 1000px;
}
</style>
<div class="outputpanel">
<apex:iframe src="{!b}" frameborder="false" scrolling="true" title="New Color Edit" />
</div>
Please check this as we had tried for isdtp=vw in URL.... the Font-size has reduced to smaller size..... Help me in solving this issue
developerTeamdeveloperTeam

Hi,

 

I had Cracked the Issue.... 
As we couldn't Change the font-size of the content of Iframe ...Instead we can Zoom the Content... 
So I had Used  the Folowing Code:

 

<style>
#frameScale { width: 100%; height: 100%; padding: 0; position:relative; left:-90px; top:0px; overflow: hidden; font-size: 800px;}
#frame { width: 100%; height: 100%; position:relative; left:0px; top:0px; }
#frame { -ms-zoom: 1.2; -moz-transform: scale(1.2); -moz-transform-origin: 0px 0; -o-transform: scale(1.2); -o-transform-origin: 0 0; -webkit-transform: scale(1.2); -webkit-transform-origin: 0 0; }
</style>

<div id="frameScale ">
<apex:iframe src="URL" frameborder="false" scrolling="true" title="Iframe" id="frame"/> 
</div>

Thank You..

 

Please accept my answer as a solution if my solution was helpful. This will make it available to others as a proper answer. If you felt that I went above and beyond please give me Kudos by clicking on on the star icon.

 

Sandeep | Salesforce Developer

This was selected as the best answer