Can't get shapes to line up

Jan 20, 2017

Liam Currie
By Liam Currie

I've noticed this problem a few times so I thought I'd ask if there is a solution.  When trying to line up shapes, often one edge will not visibly line up even though the wireframe points are exactly the same and the guidelines when resizing the objects seem to snap to the right position.

Here is my current example: http://imgur.com/toAQSR4 

I am trying to build a long colored bar that I will fill with buttons, and at the top I want a folder-tab looking piece to put the title on.  However, as you can see the right hand edge will never line up.  It's like Articulate thinks they are in line but it does not draw the shape properly.  This carries over into the preview mode as well.  It's the same problem with outlines turned on or off.

Any thoughts on how to make this work?

33 Replies
Alyssa Gomez
6 years ago01/20/17 at 9:39 pm (UTC)

Hi there Liam,

I'd first check that your Windows machine is configured with 96 DPI (dots per inch). If Windows is using a different DPI setting, you may experience erratic behavior, such as:

  • Elements of the application are misplaced or distorted.
  • Objects are misplaced or distorted when previewed or published

Also, have you tried zooming in on the slide stage area to see if you can tell if objects are misaligned? You might also want to try right-clicking on the object and selecting Size and Position, then the Position tab. From there you can double-check that the horizontal and/or vertical positions of your shapes are the same.

Liam Currie
6 years ago01/20/17 at 9:48 pm (UTC)

Checked.  96DPI. The horizontal size on both objects is identical. The screenshot is a zoomed in picture of the two objects.  

If you look you can see the boundary line in the tab piece is aligned with the left side of the shape but in slightly on the right side.  If you select the rectangle below the boundary box lines up with all the sides. 

 

Alyssa Gomez
6 years ago01/20/17 at 10:00 pm (UTC)

Thanks for checking those things, Liam. Since you've got all the right settings, would you mind sharing your file (even if it's just the one slide) so I can test it a little further? There is an issue that has been reported to our QA team where images and shapes are misaligned in preview or after publishing, and I'd like to confirm that what you're seeing matches that report. 

You can either share the file right here in the thread using the Add Attachment button, or you can share it privately with our Support Engineers here.

Liam Currie
6 years ago01/20/17 at 10:15 pm (UTC)

Tried twice. Got: 

The articulate.com page isn’t working
articulate.com is currently unable to handle this request.

HTTP ERROR 502.

I've submitted before so not sure what's going on.  Anyway, it's the way some shapes are drawn. Here: http://imgur.com/a/38nml  

I know it's not a great picture but you should be able to see that the odd shaped rectangles are maybe 2 pix bigger than the normal ones.  Also the round top rectangles overlap their edges when aligned horizontally.

Ashley Terwilliger-Pollard
almost 5 years ago06/04/18 at 4:32 pm (UTC)

Hi Shirley,

This discussion is a bit older, so I'd want to start from scratch with you.

  • What version of Storyline are you using?
  • What version of Chrome are you running? 
  • How are you publishing and where are you hosting your output? 
  • Anything else you can share about your course design or set up?

If you'd like to share a copy of the .story file or a link to the course we're also happy to test that! 

Katie Riggio
almost 5 years ago06/04/18 at 4:40 pm (UTC)

Hello, Shirley, and welcome to the community! Yikes, I'm really sorry you're also seeing an alignment issue. I don't see a solution at this time, but I'm happy to lend a hand!

My teammate, Ashley, beat me to it ☺️ We'll need to gather some more details to help us get to the root – if possible, a file that holds this behavior will greatly help us in the troubleshooting process. We'll be standing by!

Shirley Y
almost 5 years ago06/04/18 at 5:47 pm (UTC)

Hi Ashley and Katie,

Thank you both for reaching out. I am currently using Articulate Storyline 360 and Chrome Version 66.0.3359.181 (Official Build) (64-bit).

Even before publishing the Storyline file, I can see that the two shapes are misaligned by 1 pixel in the editing view despite they have the same Y-value. However, if I nudge one of the shapes by using the downward arrow key, it would go too far down. After doing some testing, I found out that this problem only happens with a rotated, non-basic shape such as "Snip and Round Single Corner Rectangle". I have uploaded an example file. Please let me know if you need any additional information. Thank you for looking into this issue!

Ashley Terwilliger-Pollard
almost 5 years ago06/05/18 at 6:56 pm (UTC)

Hi Shirley,

Thanks for the file, I saw the same behavior although I was able to move it up with the arrow key. Take a quick look at the Peek recording here.  

This is something our team is aware of, and we're looking into why those pixels don't match so we'll let you know here as soon as we can! 

Ashley Terwilliger-Pollard
over 4 years ago10/10/18 at 8:06 pm (UTC)

Hi JC,

Sorry to hear you're struggling with this as well - our team has been testing and seeing some inconsistent results which can make it difficult to track down the cause.

In the examples, we've seen the images/shapes are off alignment by about a pixel only in Preview/publish and not while editing. Does that match what you see? I was able to move the object by a pixel using the arrow keys and then they do properly align in publish. Have you tested that out? 

JC Blanchard
over 4 years ago10/11/18 at 12:12 pm (UTC)

Hi Ashley,

Here is an example of what happens. On this slide, I created a text box right above a rectangular object. Both are the same width and are aligned centered using the align center tool. I duplicated these 2 objects. This is the result.

As you can see, the object do not appear to be same width in editing mode. In preview mode, things look better, but not perfect. There seems to be a slight misalignment on the right and there is also a white thin line between the text box and the object below. Sometimes, the misalignment is much more obvious in preview mode and if I nudge the object in one direction, the misalignment appears on the other side.

Here is a more obvious example of the problem when zoomed in in editing mode.

The storyline file is attached.

Ashley Terwilliger-Pollard
over 4 years ago10/12/18 at 3:49 pm (UTC)

Thanks, JC for sharing those images and the .story file. I took a look and saw the slight misalignment you're showing and played around with moving it by a pixel left or right. There are a few different versions of that published to Review here. Can you take a look at that and let me know how those are appearing for you? Is one better than the others? 

Katie Riggio
almost 4 years ago06/07/19 at 2:46 pm (UTC)

So sorry you're running into this bug, Nate!

Are you using Storyline 3 or Storyline 360? We're still looking at this pixel alignment issue on both versions, so I'll share your voice on the corresponding report. 

Appreciate you sharing that example, and we promise to keep this discussion posted on any new developments!

Sign In to Reply