I'm creating a Visualforce page rendered as a pdf ( renderAs="pdf" ), and the page won't render any of my CSS styling. I am wrapping my <style> with <head> as shown below.
<apex:page standardController="Account" readOnly="true" showHeader="false" sidebar="false" standardStylesheets="false" renderAs="pdf">
<head>
<style>
#page{
margin:1in;
}
.myTable {
border-collapse:collapse;
border:1px solid black;
}
</style>
</head>
<table class="myTable">
<tr>
<td>A Column</td>
</tr>
</table>
</apex:page>
What's really bizarre is that I tried copying another VF page that I have rendered as a PDF with style classes and the like, and IT won't render either. So I thought, "What if I change the API version of my VF page to 27?" And lo, it works.
Any ideas on fixing this to work with API v28? Or is this just a bug?
http://cloudyworlds.blogspot.com/2013/06/using-css-in-pdf-for-page-numbering.html
I have documented behaviour in the above blogpost.
Applyhtml=false has to be manually set to false in apex:page to get this working.This is a new attribute added in API 28.0
Related
I try to create a React app inside visualforce page via lightning. When I click preview in visualforce setting, everything is fine.
But when I use it in Lightning app builder it does not work. It shows
The error: Refused to frame 'https://mirage-video-dev-ed--ltng.container.lightning.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://mirage-video-dev-ed--c.visualforce.com".
Also really weird that if I right click and choose "Reload frame", it works.
Visualforce code
<apex:page >
<apex:includeLightning />
<div id="hello" />
<script>
$Lightning.use("c:myFirstApp", function() {
$Lightning.createComponent("lightning:container",
{ src: "{!$Resource.hello + '/index.html'}"},
"hello",
function(cmp) {
console.log("created");
// do some stuff
}
);
});
</script>
</apex:page>
myFirstApp
<aura:application access="global" extends="ltng:outApp">
<aura:dependency resource="lightning:container"/>
</aura:application>
Is there a way to fix it? I cannot find the way to load aura:application directly so if there is a way please show me.
You've got a bit of a inception problem going on... You just need to mount your react app directly inside of the VF page. No need to use a lightning:container.
See my B.A.S.S. project. This is proven to work and be extremely scalable.
Example VF Page with react app:
<apex:page showHeader="true" sidebar="false" standardStylesheets="false" docType="html-5.0">
<script type="text/javascript">
//rest details
const __ACCESSTOKEN__ = '{!$Api.Session_ID}';
const __RESTHOST__ = '';
</script>
<div id="root"></div>
<!-- Your react entry point -->
<script type='text/javascript' src="{!URLFOR($Resource.app, 'dist/app.js')}"></script>
</apex:page>
It is also possible to to run a React App directly inside a LWC, although no recommended.
I've been setting my react.js SPA's page titles by doing:
document.title = {some title}
...so far and it worked fine. Now, I also wanted to update the meta title tag and so I installed react-helmet.
In my component, I've imported Helmet from the library and did:
render() {
{/* ... */}
return (
<div>
<Helmet>
<title>{docTitle}</title>
<meta name="title" content={docTitle} />
</Helmet>
{/* ... */}
</div>
)
}
When opening the page, I saw that the document title is properly updated, but when inspecting the elements in the browser, I noticed that <meta name="title" is not being updated, while a few lines down, <title> is updated.
What am I doing wrong here?
It's not documented in the readme, but you have to add data-react-helmet="true" to your meta tags that you want to replace with react-helmet. So as an example, in your index.html, your meta tag should be updated to look like this:
<meta name="title" content="Default Title" data-react-helmet="true">
This should be in the readme, I don't know why it's not, and I saw a comment that someone had already opened a PR to add it.
In my <head> code, I added the following tag in the index.html file:
<meta name="title" content="Default Title">
When updating that meta tag using react-helmet, I still saw that tag un-updated in the index.html file when inspecting the elements in my browser.
However, what I did not notice, is that at the very bottom of the <head>, Helmet apparently added this tag instead:
<meta name="title" content="Default Title" data-react-helmet="true">
I'm guessing (and hoping) that this will be crawled by search engine bots.
Update:
After some time has passed, I can verify that Facebook and Google properly read helmet's title tag.
In AngularJS (1.x), how can we create a reusable widget (component) that has insertion points (slots) for other widgets (components)?
Imagine we have a component/directive called "verticalsplitter". It's purpose is to divide the screen area into a "top" and "bottom" area (perhaps allowing user resizing, collapsing, etc).
Now imagine we have a bunch of other rich components e.g. a richtextview, a treeview, a videoplayer and a gridview.
One page/view 1 I want a verticalsplitter with a richtextview on top and treeview on bottom. On page/view 2 I want a verticalsplitter with a videoplayer on top and a gridview on bottom.
Page 1
<html>
<body>
<verticalsplitter>
<top ng-initialSize="30%">
<richtextview />
</top>
<bottom ng-initialSize="70%">
<treeview />
</bottom>
</verticalsplitter>
</body>
</html>
Page 2
<html>
<body>
<verticalsplitter ng-locked="true">
<top>
<videoplayer />
</top>
<bottom>
<gridview />
</bottom>
</verticalsplitter>
</body>
</html>
How can I achieve this? If it's not possible with components (and I need to use directives for transclude) then that's OK.
Components can transclude. It is clearly stated so in the AngularJS Developers Guide for Components:
app.component("verticlesplitter", {
transclude: {
'topPart': 'top',
'bottomPart': 'bottom'
},
template: `
<div style="border: 1px solid black;">
<div class="top" ng-transclude="topPart"></div>
<div>Something in the middle</div>
<div class="bottom" ng-transclude="bottomPart"></div>
</div>
`
});
For more information, see
AngularJS Developers Guide for Components
AngularJS ng-transclude Directive API Reference (Multi-slot Transclusion)
I am currently working on a website that is mobile friendly. In this case I have to use the same HTML. I can make do some minor adjustments but it MUST look like the same when I change it back to this default CSS.
#explain{
position:absolute;
top:100px;
left:20px;
width:95%;
min-width:0;
margin:auto;
column-count:1;
}#explain th{
margin:0px;
}#explain_icon img{
width:130px;}
<html>
<head>
</head>
<body>
<table id="explain" cellspacing="15px">
<tr id="explain_icon">
<td><img src="IMG/group.png" alt="Image has failed to load"></td>
<td><img src="IMG/Bell.png" alt="Image has failed to load"></td>
<td><img src="IMG/Warrenty.png" alt="Image has failed to load"></td>
</tr><tr>
<th>Japan</th>
<th>is a</th>
<th>smaller china</th>
</tr><tr>
<td><b>The
</b></td>
<td><b>Human
</b></td>
<td><b>Esophagus
</b></td>
</tr></table>
</body>
<html>
Use Bootstrap. Integrate Bootstrap in your website and just divide your html page in row and column classes. This is perfect way to make any website mobile friendly.
I solved my problem by changing the table into a divider format. I also made a list for the individual objects within the code. I went into the CSS and changed it so that the display would go into "table" which basically made everything columns.
I am trying to implement a simple VF tabbed interface. I have uploaded a zip file containing a background image inside "images" folder and the required css as
<style type="text/css">body { background-image: url("images/back.jpeg") }
Following is how I implemented.
<apex:page id="thePage" sidebar="false" showHeader="false" tabstyle="Invoice_Statement__c" standardController="Invoice_Statement__c" standardStylesheets="false">
<apex:image url="{!$Resource.header}" width="1250" />
<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'styles.css')}"/>
<style type="text/css">
p { background-color: ;}
tabPanel{ background-color:blue;}
.activeTab {background-color: #236FBD; color:white; background-image:none}
.inactiveTab { background-color: lightgrey; color:black; background-image:none}
</style>
<apex:tabPanel switchType="client" selectedTab="name1" id="theTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">
..
..
..
</apex:tabPanel>
</apex:page>
My problem is that background is not displaying. I followed this link--> http://www.salesforce.com/us/developer/docs/pages/Content/pages_styling_custom.htm
I have used
<apex:image url="{!$Resource...}" width="1250" />
and its working fine, but I'm unable to get a background image for my app. Any suggestions?
Thanks in advance
MnZ
It's not much different than how you are refering to the stylesheet stored in static resources.
<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'styles.css')}"/>
You have to go by the same principle to add the reference to static resource in tour css. Catch point is that your style declaration needs to be on the VF page so that it gets rendered by the force.com server. Assuming your images forlder is in the myStyles zip file as static resource:
<style type="text/css">body { background-image: url("{!URLFOR($Resource.myStyles, 'images/back.jpeg')}") }
In your CSS file (inside the static resource) add "../" before images and add some styles:
body {
background: url("../images/back.jpeg") no-repeat top fixed;
background-size: 100%;
}