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
SFDC Dev 2269SFDC Dev 2269 

CSS not applied in the Word document downloaded using VF Page

I have a requirement to download a word document from VF page. I am facing some issues with CSS of the page. Below is the code snippet: 
<apex:page showHeader="true" sidebar="true" StandardController="Application__c"
    cache="true" extensions="DownloadApplication_Ctrl" contentType="application/msword#DownloadWord.doc">
    <html xmlns:w="urn:schemas-microsoft-com:office:word">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <head>
        <style type="text/css">
                .fontFamily {
                    font-family: Source Sans Pro;
                }
                .alignCenter {
                    text-align: center;
                }
                .fontWeightBold {
                    font-weight: Bold;
                    font-family: Source Sans Pro;
                }
                .formHeader {
                    font-size: 20px;
                    color: #000000;
                    text-align: center;
                }
                .width50 {
                    width: 50%;
                }
                .width100 {
                    width: 100%;
                }
            </style>
        <body>
            <div class="fontFamily">
                <div class="formHeader">
                    <apex:outputText escape="false" value="Your application goes here" />
                </div> <br/>
                <div class="width100">
                    <span class="width50">
                        <apex:outputText styleClass="fontWeightBold" escape="false"
                            value="Submitted Date:" />
                        <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                            <apex:param value="{!application.Submitted_Date__c}" />
                        </apex:outputText>
                    </span>
                    <span class="width50">
                        <apex:outputText styleClass="fontWeightBold" escape="false"
                            value="Application Number:" />
                        <apex:outputText value="{!application.Name}" />
                    </span><br/>
                </div>
              </div>
          </body>
    </html>
</apex:page>
In the above code the width50 and width100 classes are not applied in the downloaded Word document.
What is the correct way to apply css in these word documents?
Thanks!
Raj VakatiRaj Vakati
try this 
  
<apex:page showHeader="true" sidebar="true" contentType="application/msword#DownloadWord.doc">
    <html xmlns:w="urn:schemas-microsoft-com:office:word">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <head>
            <style type="text/css">
                .fontFamily {
                font-family: Source Sans Pro;
                }
                .alignCenter {
                text-align: center;
                }
                .fontWeightBold {
                font-weight: Bold;
                font-family: Source Sans Pro;
                }
                .formHeader {
                font-size: 20px;
                color: #000000;
                text-align: center;
                }
                .width50 {
                width: 50%;
                }
                .width100 {
                width: 100%;
                }
            </style>
            <body>
                <div class="fontFamily">
                    <div class="formHeader">
                        <apex:outputText escape="false" value="Your application goes here" />
                    </div> <br/>
                    <div class="width100">
                        <div class="width50">
                            <apex:outputText styleClass="fontWeightBold" escape="false"
                                             value="Submitted Date:" />
                            <apex:outputText>
                                '12/12/2018'
                                
                            </apex:outputText>
                        </div>
                        <div class="width50">
                            <apex:outputText styleClass="fontWeightBold" escape="false"
                                             value="Application Number:" />
                            <apex:outputText value="kasdgjhasgdh" />
                            
                        </div><br/>
                    </div>
                </div>
            </body>
        </head>
    </html>
</apex:page>

 
SFDC Dev 2269SFDC Dev 2269
Hey Raj V,
I tried this too.. but this is also not working. To debug this further, I opened the word document as HTML, and while inspecting I found that the Divs and the spans are wrapped into paragraphs <p> by default by the Word paragraph style. So, Even If I apply the width for my div it does get applied. But as the div is wrapped inside the <p> , the divs are not coming inline with each other.