Unable to center align PDF file embedded in iFrame embed widget.

  • Profile Image
    AgilityAssoc.Canada
    Asked on May 24, 2017 at 11:33 AM

    I have two forms that are actually used to display pdf documents. One for French and one English.

    The English one (70396857479981) displays the pdf file nicely centered the French one (70395753999982) is slightly shifted right. See images below. I have these two embedded at site using

    I tried cloning the English one and used the French pdf file and it still is off center.

    ENGLISH

     

    FRENCH

     

    I have attempted to resolve the problem with some custom css, pdf file settings, widget settings, without any success.

    Can you please advise as to what is required.

    Thank you,

    Regards Robert

    http://www.aac.ca/en/rules/inc/AAC_Rulebook-v6.html 

    http://www.aac.ca/fr/reglements/inc/AAC_Rulebook-v6.html

     

  • Profile Image
    ashwin_d
    Answered on May 24, 2017 at 01:55 PM

    Hello Robert,

    I did try to open the English version of webpage but it shows 404 not found error. Please check the screenshot below:

     

    Since I am unable to compare both the pages, when I see the French version of webpage, it seems do display the PDF correctly. Please check the screenshot below:

     

    Do you see any alignment issue in the screenshot above?

    We will wait for your response.

    Thank you!

  • Profile Image
    AgilityAssoc.Canada
    Answered on May 24, 2017 at 09:23 PM

    Well that is so strange... I do not get the screen shot you show for the French file.

    here is the url for the English one again. 

    http://www.aac.ca/en/rules/inc/AAC_Rulebook-v6.html

    Here are my screen shots. Note the French one. I'm using Chrome.

     

     

    I also see the same thing when in form builder.

    As I said above I'm using Chrome, just noticed If I use Microsoft Edge or Firefox they both appear centered as they should and you show. 

    Must be the browser?

    Thanks, Robert

     

  • Profile Image
    Chriistian
    Answered on May 24, 2017 at 11:53 PM

    I checked the links you have provided:

    http://www.aac.ca/en/rules/inc/AAC_Rulebook-v6.html

    http://www.aac.ca/fr/reglements/inc/AAC_Rulebook-v6.html

    In Chrome Browser, here's how it appear on my end:

    English

     

    Frech

    Are you still experiencing the issue on your end? May we know which device and version you have encountered this problem?

    If the issue still persists, please let us know.
    Regards.

  • Profile Image
    AgilityAssoc.Canada
    Answered on May 25, 2017 at 09:39 AM

    I am using the latest version, 58.0.3029.110 (64bit)

    OS Win-10 Pro.

    When I first view the French version it starts centered and after a few milliseconds jumps right.

    I made some adjustments in the settings the problem persist, weather editing or viewing.

    If I connect incognito, it works just fine, it is all centered when editing and the site view.

    Can you explain why this is happening?

    Best regards,

    Robert

     

    One other thing, perhaps a new thread:

    iFrame embed widget settings

    When I was working on it yesterday I used console and found some JavaScript in a html file that sets width and height of the iframe. I was trying to set my own width and height in the iframe with custom css, So which has the priority? Would using !IMPORTANT over ride the java script?

    widgets.jotform.io

     
        (function(ready) {
          ready(function() {
            JFCustomWidget.subscribe("ready", function(data) {
              var params = JFCustomWidget.getWidgetSettings();
              if (params.url) {
                var transparent = ('transparent' in params && params.transparent === 'Yes') ? 'true' : 'false';
                var iframe = document.createElement('iframe');
                iframe.setAttribute('src', params.url);
                iframe.setAttribute('allowtransparency', transparent);
                iframe.setAttribute('frameborder', '0');
                iframe.style.border = 'none';
                iframe.style.margin = 0;
                iframe.style.width = (data.viewWidth || 560) + 'px';
                iframe.style.height = (data.viewHeight || 400) + 'px';
                document.body.appendChild(iframe);
              }
            });
          });

     

     

  • Profile Image
    Chriistian
    Answered on May 25, 2017 at 10:57 AM

    Hi,

    If it works correctly in Incognito mode, then your regular browser (non-Incognito mode) might have stored the older version and is rendering it to you. Have you tried clearing your browser cache?

    Regards.

  • Profile Image
    AgilityAssoc.Canada
    Answered on May 26, 2017 at 05:44 PM

    Hi,

    I cleared the cache and it works OK now.

    I find this very annoying, happens frequently. I will change my settings.

    I have a second question above about the javascript that manages the Widget iframe.

    Should it be posted as a new thread?

    Thank you for all the help,

    Robert

  • Profile Image
    Mike_G
    Answered on May 26, 2017 at 06:37 PM

    We are glad to know that the issue you initially posted in this thread now works. We, again, would like to apologize for any inconvenience.

    With regards to your other concern, I have moved it to a new thread considering it is a different topic and to avoid confusion with the answer that will be provided.

    https://www.jotform.com/answers/1156090 

    Thank you.

  • Profile Image
    AgilityAssoc.Canada
    Answered on May 28, 2017 at 09:13 AM

    Hi,

    No apologize is required. Your help is much appreciated.

    Regards, Robert