Skip to main content
C
c_alerius1
Participating Frequently
May 27, 2016
Answered

Change the size of the preview window XD

  • May 27, 2016
  • 6 replies
  • 31344 views

I have a project with a lot of art boards. They have the size of 1280x1024. When I preview these after the latest update (0.5.4.51) I only see half of the window. I would like to have the ability to change the size of the preview window.

This topic has been closed for replies.
Correct answer Peter_Flynn

Just to clarify the current behavior...

In most cases, if you resize an existing artboard to be taller, it automatically turns into a scrolling artboard.  The original height will be the viewport size seen in the preview, and the new height will be the total height of the content that you can scroll around within that viewport.

So for example, in the original screenshot above you may have started with the "Web 1280" artboard size and then resized it taller -- it looks like it's 1280x1024 in the screenshot?  Whenever you select anything inside the artboard, you'll see a blue dotted line indicating the viewport height (and in the Preview window or web sharing view, you can use the mousewheel or trackpad to scroll vertically).

Automatically making a scrolling artboard is handy, but unfortunately it's not always what you want.  So, in our next update we'll give you options to turn scrolling on or off on any artboard.

In the meantime, if you want a taller artboard to just be tall -- never scroll -- then you can use this workaround:

  1. Select the artboard tool
  2. Drag to draw a new artboard as a custom size
  3. Optional: Type width/height values in the properties panel to get a more precise size
  4. Locate one of your old artboards that has unwanted scrolling turned on.  Marquee-select over the entire artboard to select everything on it, then cut-paste the content onto the new artboard.

Artboards that were drawn by dragging with the Artboard tool will never have scrolling auto turned on.  After step 3, you can use Cmd-D to duplicate the blank artboard you created if you have multiple old artboards to fix.

I know that workaround is a bit clunky -- but luckily it's temporary.  In our next release, you'll be able to select (or multi-select!) artboards and just turn off scrolling directly.

Hope that helps explain things!

6 replies

R
rainwatr
Participant
October 6, 2020

Sadly this problem still exists in the current version of XD and you have to create a new custom artboard, select everything you created in the former artboard then cut & paste it on to the new custom artboard to get an "accurate" preview. Acurate meaning that you get the full view of the art board, not accurate as in viewing a page designed for desktop will preview in 1920 x 1080

 

It's mind boggling why you always get a bugged preview when working off of a template artboard (template referring to one of the blank pre-sized artboards that can be selected when creating a new artboard)

A
Anonymous
December 16, 2016

Hello--

Was the control to turn off scrolling ever implemented? I am working with the latest release and cannot find it.

--Jim

elainecc
Community Manager
elaineccCommunity Manager
Community Manager
December 17, 2016

Hi, jimgasperini-

Yes, you can turn it off in the property inspector when you select the artboard. Turn the "scrolling" selection from Vertical to None to turn the scrolling off.

Hope that helps,

-Elaine

    G
    gerdavd
    Participant
    December 18, 2018

    I had the same problem, and all you have to do is open the same link in Chrome. This worked for me. My preview was also cut half way in Edge.

      N
      NoelGonzalez
      Participant
      August 25, 2016

      The prototype mode only supports the sizes predefined by the XD app.

      If you decide to design at 1080 x 1920 for an Android app for example, the prototype will clip the preview.

      I don't think this was tested. But its pretty obvious to me. Shame on Adobe for releasing this feature without doing basic testing.

        J
        josha37411177
        Participant
        July 29, 2016

        I'm running into this issue as well, and would love a solution to this.

        P
        Adobe Employee
        Peter_FlynnCorrect answer
        Adobe Employee
        August 30, 2016

        Just to clarify the current behavior...

        In most cases, if you resize an existing artboard to be taller, it automatically turns into a scrolling artboard.  The original height will be the viewport size seen in the preview, and the new height will be the total height of the content that you can scroll around within that viewport.

        So for example, in the original screenshot above you may have started with the "Web 1280" artboard size and then resized it taller -- it looks like it's 1280x1024 in the screenshot?  Whenever you select anything inside the artboard, you'll see a blue dotted line indicating the viewport height (and in the Preview window or web sharing view, you can use the mousewheel or trackpad to scroll vertically).

        Automatically making a scrolling artboard is handy, but unfortunately it's not always what you want.  So, in our next update we'll give you options to turn scrolling on or off on any artboard.

        In the meantime, if you want a taller artboard to just be tall -- never scroll -- then you can use this workaround:

        1. Select the artboard tool
        2. Drag to draw a new artboard as a custom size
        3. Optional: Type width/height values in the properties panel to get a more precise size
        4. Locate one of your old artboards that has unwanted scrolling turned on.  Marquee-select over the entire artboard to select everything on it, then cut-paste the content onto the new artboard.

        Artboards that were drawn by dragging with the Artboard tool will never have scrolling auto turned on.  After step 3, you can use Cmd-D to duplicate the blank artboard you created if you have multiple old artboards to fix.

        I know that workaround is a bit clunky -- but luckily it's temporary.  In our next release, you'll be able to select (or multi-select!) artboards and just turn off scrolling directly.

        Hope that helps explain things!

        Z
        ZoltanXD
        Participating Frequently
        June 16, 2016

        I've got an answer for you.

        The preview window represents the artboard size. In your case the content is clipped by the artboard, so the preview window will clip the content too. (Resizing the preview window doesn't modify the dimensions of the artboard, so that's the reason why you can't make the content visible by resizing the preview window.)

        With the following steps you can easily modify all your artboard to match the dimensions of your content:

        • Zoom out and marquee select all your artboards. (all artboards will be selected)
        • Set the Height (H) value on the property inspector to the desired height. (all artboards will extend down)
        • Select all content with cmd+a.
        • Move the content down until it starts at the top of your artboards.
        • Preview window shouldn't clip the top of your content anymore.
        C
        c_alerius1Author
        Participating Frequently
        June 17, 2016

        hi,

        Thanks but thats not correct. When I resize the artboard i get a dotted line at the spot where the preview stops. I can resize the artboard but it doesn't effect the preview.

        M
        mastems
        Participant
        June 26, 2016

        Hello,
        I have the same issue,

        You can select all Your artboards and then change its mode (landscape/portrait), change it and then change it back again, this had helped me.

          elainecc
          Community Manager
          elaineccCommunity Manager
          Community Manager
          May 28, 2016

          Hi there, c.alerius-

          Were you able to see this before and are now unable to see the full screen? What is your screen's resolution? Are you trying to use full screen? Can you try resizing the Preview window? Also, we'd love to get a screenshot of what you're seeing to make sure we're seeing everything.

          Thanks,

          -Elaine

          C
          c_alerius1Author
          Participating Frequently
          June 7, 2016

          Hi elainecc,

          Yes, before I updated the software I did'nt have this problem.

          Well, My screen has 5k resolution. And I have tried in both full screen and not.

          I have been in contact with your support team and they said that I cannot change this, unless I make a new project. But that would be too much work for this project, I will do a workaround, but I would love to have the possibility to change this in the future.

          In the first screen shot you see the preview window, and in the second you see how the mockup is supposed to look.

          Z
          ZoltanXD
          Participating Frequently
          June 7, 2016

          Hi there,

          I'm looking into this issue for you. 1 question: are you using El Capitan?

          Thanks,

          Zoltan

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices