SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have sharepoint 2010 portal. In this portal I have some libraries maded by a custom library template. This custom templates shows an example of the pdf file If you open it in the edit form. The problem is that the popup is showed in full screen by the jquery below. But my div whith my pdf preview stays very small. This is because first the popup is showed normal (small) and then the pdf preview will be set as width of 100%. After this the popup wil set on full screen. After this you see a full screen popup, with a small with of the pdf preview.

See my red border where I would like to show the pdf preview. Can someone help me with the jquery?

pdf preview in library item edit popup in full screen

 var pdfWrapperId = 'w-item-pdf-wrapper';
var jQueryWrapperId = '#' + pdfWrapperId;

var pdfContainerId = 'w-item-pdf-container';
var jQueryContainerId = '#' + pdfContainerId;

var fieldsContainterId = 'w-item-fields-container';
var jQueryfieldsContainterId = '#' + fieldsContainterId;

var minHeight = 500;
var minWidth = 500;
var jQueryFormTableClass = '.ms-formtable';

/// <summary>
/// Returns a boolean value determining whether context list item is a PDF document.
/// </summary>
function isPdfDocument() {
    var docUrl = $('.w-document-url').attr('value');
    var result = docUrl && docUrl != '';
    return result;

/// <summary>
/// Configures PDF container after document was loaded.
/// </summary>
$(document).ready(function () {

/// <summary>
///  Configures PDF-container after window was loaded.
/// </summary>
function configurePdfContainer() {
    if (isPdfDocument()) {
        $(jQueryWrapperId).css('width', '');
        $(jQueryfieldsContainterId).css('width', '575px');

        //// Sets new CSS styles for the PDF container.
            'width': '99%',
            'height': getOptimizedHeight() + 'px',
            'margin': '0px 0px 5px 5px'

        //// Creates a PDF container for displaying document.
        new PDFObject({
            url: $('.w-document-url').attr('value'),
            id: 'w-item-pdf-document',
            pdfOpenParams: {
                toolbar: 1,
                navpanes: 0,
                statusbar: 0,
                view: 'FitH'
    } else {
        //// Sets default settings if current document isn't a PDF one.
        $(jQueryfieldsContainterId).css('width', '100%');

/// <summary>
/// Adds some changes to the height of the PDF container if current item has taxonomy fields.
/// </summary>
function configureAfterTaxonomy() {
    if (isPdfDocument()) {

/// <summary>
/// Gets optimized height of the PDF container depending of form table's height.
/// </summary>
function getOptimizedHeight() {
    var formTableOuterHeight = $(jQueryFormTableClass).outerHeight(true);
    if (formTableOuterHeight < minHeight) {
        formTableOuterHeight = minHeight;

    return formTableOuterHeight;

SP.SOD.executeOrDelayUntilScriptLoaded(configureAfterTaxonomy, "scriptforwebtaggingui.js");

/// <summary>
/// Maximizes current window if it's opened as a dialog one and a PDF document is loaded.
/// </summary>
function maximizeWindow() {

    if (isPdfDocument()) 
            var currentDialog = SP.UI.ModalDialog.get_childDialog();

        if (currentDialog != null) 
            if (!currentDialog.$S_0) 

ExecuteOrDelayUntilScriptLoaded(maximizeWindow, 'sp.ui.dialog.js');
share|improve this question
To solve issues like this, you are best to get firefox and firebug and use the selector to read the page. Don't forget to reload the dom after any Dynamic HTML changes. This way you can not only find out what things like the correct css paths are but you can manually alter things to get it correct. I'm saying this because it looks like you either have some CSS overriding the width or you are setting the width on the wrong component. – Hugh Wood May 24 '13 at 9:28
Here is my problem, on this wrapper div: <div class="cS4workspace" id="s4-workspace" style="width: 727px; height: 645px; overflow-y: auto;"> If I change the width to 100% it is fixed. How can I set the width in jquery without changing the css file? – Ola May 24 '13 at 9:48
KISS. Just register an override css property on the page after the css sheets are loaded and mark it as !important #s4-workspace { width:100%!important; } no need for any JQuery for this. – Hugh Wood May 24 '13 at 12:32
!important is evil. Find the right specific selector instead. – Marc D Anderson May 26 '13 at 12:53

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.