Scroll bars with google chrome and scale to fit

#1

Hi,

I have got the following issue:
Using Google Chrome or Firefox as well my prototype becomes scrollable for one or two millimeters to empty content, eventhough i said scale to fit in the axure bar in the browser.
There is no content there. I also tried using a dynamic panel to cut all content to that size and set it to “never scroll” but it doesn’t help.

Any ideas?`I cannot post my .rp file as it is confidential.

Best, Maila

#2

Pretty hard to determine the issue without a sample .rp file. Perhaps you could create a quick example without any confidential content? Another option is to send your file to support@axure.com which would be different from posting to internet here.

You say this only applies to Chrome and Firefox. Does this mean you’ve only tested with these two browsers, or does it mean that you’ve tested in other browsers–like Edge, MSIE, Safari, etc. and it does not happen in these other browsers?

When you say your prototype becomes scrollable, do you mean vertically, horizontally, or both?

What exactly do you mean by “becomes scrollable for one or two millimeters to empty content”?

Not sure what you mean by “there is no content there” …A blank canvas/page? A blank state in a dynamic panel? Or, some content but nothing that should require scrolling (in other words, you think all content should fit in the browser’s viewport)?

Some possible reasons I can think of include:

  • You have widgets, likely at the edges (e.g., bottom or right-most), styled with extra padding, dropshadows etc. that would require this extra space.
  • You are using a font which is rendered differently in the Axure editor than it is in the browser. This is very common, and can lead to widgets becoming wider or taller than you have designed or would expect, and/or leading to extra lines or line breaks, possibly making your whole page wider or taller.
  • You have text styling that includes extra padding, or a font with extra/transparent space around characters you may not be aware of.
  • The text content of a widget has extra blank line(s)
  • Your page styling has some padding built in (e.g., page dimensions are set to something other than “Auto” and something larger than your browser viewport. Keep in mind your screen resolution does not equal browser viewport area.
  • You are using the default center-aligned page style and your layout (all the widgets on your page) is causing the browser to place some widget(s) just to left or right of where you expect (particularly if the horizontal scrollbar is appearing.) In my experience it is very hard to control horizontal positioning with the center-aligned page style in Auxre.
  • Some interaction code is moving or resizing widget(s) such that they exceed the viewport’s region by 1 or 2 mm (a few pixels.) Likely in the Page Loaded event or the Loaded event of a widget.

To troubleshoot yourself, you could try deleting one widget at a time, working from the edge in (right or bottom, whichever is the issue) and previewing, until the unwanted scrollbar goes away. This should help to isolate to one or a few widgets, which you can then work on restyling/resizing or just moving/nudging until it works correctly in the browser.

#3

Thank you very much mbc!!! :heart_eyes:
i finallly found the problem using your troubleshooting process.
This was due to a styling using shadows that were originally created in Adobe XD and copied to Axure via the Plugin. Axure didn’t show these shadows or styling at all in the style information or size of the object, but it was still somehow there.
So it is working perfectly now! Thanks for your great support always here!