• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Where are the scrollers in the prototype browser preview (Adobe XD)

Explorer ,
Nov 03, 2018 Nov 03, 2018

Copy link to clipboard

Copied

Why the scrolls in the browser preview disapear?
See this my prototype:
Adobe XD CC

I can use my scroll button of the mouse or arrow keys from the keyboard. But if the client has no mouse it`s very unproffessional to explane the client that he have to use arrow keys of his keyboard. The common way to scroll the site is with scrollbar.
Is this any way to appear scrollbar in my prototype?

Thanks.

Views

2.0K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

New Here , Aug 17, 2020 Aug 17, 2020

Votes

Translate

Translate
Community Expert ,
Nov 04, 2018 Nov 04, 2018

Copy link to clipboard

Copied

Are you toggle-on "Open in Fill screen" feature when publishing?

Here are some tips:

Improvements in standard and full screen view:

  • If the artboard width is greater than the available horizontal space, the prototype scales to fit the width with no horizontal scrolling.
  • If you have defined the viewport height (set in the Property Inspector), the prototype fits to the height first and proportionally scales width to maintain the aspect ratio. You can also scroll vertically to view content that is below the viewport height.
  • If the designed prototype is a web or a custom artboard, the published link in the web browser in full screen mode renders the content from the top of the browser window. Mobile and tablet designs continue to be center aligned in the screen.
  • The background color in full screen mode is white instead of black. This mimics true browser behavior where browsers do not add a black background color by default.

Improvements in mobile artboard view:

  • Content fits height wise and adjusts width to maintain aspect ratio.
  • If you view the published link in a full screen mode on a web browser, the content renders in the middle of the browser window.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 04, 2018 Nov 04, 2018

Copy link to clipboard

Copied

Yes, I toggle on "Open in fullscreen" but here is the same problem.
I did some experiments too.

1. This is with artboards with different height and viewport height is same as the artboard (no viewports). Here are the scrollbars but see what hapens if you click on the links. The prototype doesn`t work as prototype and scale till get the real size. This looks ugly.
This is online example:
Adobe XD CC


2. This is with artboards in same height. Here are the scrollbars but this isn`t right fix because some of the pages has too much space from the bottom. The page reach bottom and continue to scroll because the artboards are in the same height.

This is online example:

Adobe XD CC

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 18, 2018 Dec 18, 2018

Copy link to clipboard

Copied

How are you able to fix it? My browser's vertical scrollbar is hidden when I publish the prototype.

I can scroll it by using the arrow keys, but the scrollbar itself is hidden.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

I can see scrollbar.

Similar situation happens when we have a Master page with height which is bigger than for other pages. Usually i deal with this situation when i work with Muse. But I am nit sure as you told that all dartboards have the same height..

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

You can see the scrollbars but with pages with different weight this looks ugly and you know that I have sent my work XD files to adobe stuff and no desition about this problem.

You can see the scrollbars and the prototype works good ONLY WHEN THE ARTBOARDS ARE INTHE SAME HEIGHT (this is imposible in desktop prototypes) AND THE VIEWPORTS ARE IN THE SAME HEIGHTS.
The prototypes for desktop web sites in broser are total buggy.

I can share my work XD files with you too and if you can do desktop prototype for browser with scrollers and not buggy it will be good.

I copy paste the same text from my other discussion:

Unusable XD prototypes in browser

"

Hi @Anul_Saini ,
Thanks for the reply.

Yes my pointer is above the prototype then I focused it by click and can scroll but wth mouse scroll button only because no scrollbars. If this prototype is opened in laptop no chance without mouse. The arrows work but in Chrome (Safari too maybe) but they don`t work in Firefox and Internet Explorer.

I did the next tests which I described in other post too (1920 with because this is the resolution of my PSDs and I don`t wanted to resize them because this is test only):

1. This is a prototype with artboard 1920 and viewport 1080 (1920 x 1080).
Adobe XD CC
No scrollbars here. I need them because my client wants to send the prototype (not this but other) to his investors and don`t know how they will open it - browsers, resolutions, with mouse, without mouse etc. Scrollbars are needed.

2. This is a prototype with artboards with different height and viewport height is same as the artboard (no viewports). Here are the scrollbars but see what hapens if you click on the links. The prototype doesn`t work as prototype and scale till get the real size. This looks ugly.
Adobe XD CC

3. This is a prototype with artboards in same height and no viewports. Here are the scrollbars but this isn`t right fix because some of the pages has too much space from the bottom. The page reach bottom and continue to scroll because the artboards are in the same height. (scroll to bottom of every page)
Adobe XD CC

--------------This is the same prototype in inVision and works perfectly. Without white borders around, with scrollbars. It looks like real web site.
                    https://invis.io/2AOXO4U7KYJ

Thanks!

"

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

Mine also have different heights of artboards.

I can scroll it vertically with the keyboard, but the scrollbar is hidden/missing.

For prototyping, this is not even close to being acceptable lol.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

You can scroll with arrows but in Chrome only. You can`t scroll with arrows in Firefox or Internet Explorer for example.

Imagine the next situation.
You do prototype for a client who wants to send it to some investors but he don`t know what browser they use.
If some of  the investors have Firefox in laptop without mouse for example, they won`t scroll your prototype.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 17, 2020 Aug 17, 2020

Copy link to clipboard

Copied

LATEST

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines