Button resizes on hover state

Hello,

I've been having an issue in which buttons I create are automatically being resized in the hover and down states. The button size is reduced. Once visited the button remains reduced in size from that point forward.

Is there a way to resolve this issue? I've only created basic buttons, such as a Help button with the "?" icon inserted in it.

Regards,

Chris

28 Replies
Ashley Terwilliger

Hi Chris and welcome to Heroes!

Are you using the built in buttons within Storyline or creating your own custom buttons? Are you able to edit the button states to match the first state? You could try using the format painter to ensure they're all the same size.  I also wanted to point you to this tutorial on adding and editing states. 

If you'd like the community to take a look at your .story file, would you be able to post at least the one slide with the buttons here?

Chris Bath

Hi Ashley,

Thank you for your follow-up.

I am using a standard Storyline button. I am able to edit the button states, and have used the format painter but am still experiencing the issue.

To clarify, when previewing:

  • Normal state: Icon in button appears at selected size
  • Hover, Down, and Visited all appear as a smaller font size
  • After the first time it is clicked, the button appears in the smaller size in all states, including Normal

At the moment, the button is part of a larger internal project. When I have a moment, I will cut it down to a slide or two and post for your review.

Ashley Terwilliger

Thanks Chris for confirming all those elements. Do they appear differently only in Preview? What about when you look at the states of each button within the States panel at the bottom (next to Timeline)? I tested this on one of my own files and wasn't able to replicate it, so seeing what you're working with would be a huge help. If you get a chance to even recreate the buttons on a new Storyline project, I'd be curious to know if you get the same behavior - if not, there may be some corruption within the larger Storyline file you're working on. You can always try to import it into a new Storyline project to see if it solves it.  You'll want to follow the guidelines here while creating and editing your Storyline course to prevent any future corruption. 

Chris Bath

Hi Ashley,

I've created a single slide project to demonstrate the issue. I believe it may be tied to the border which appears around some button states, although I have removed it in the sample.

Published file

Storyline source file

The help/? icon resides on the slide master, as does the layer it displays. The course I'm currently building uses a similar structure to this. The button itself is a basic ? icon with the fill and borders removed, and a "Help" text box added to the Hover state.

Thank you for your help. I feel like I'm missing something obvious.

Mike Enders

Chris,

It looks like the formatting is doing something goofy.  I'm not sure why.  

However, I found that if I added a button new button and then format paint the properties of the original over to the new button, the shrinking disappears.  Just add on your show layer trigger to the new button and you're all set.

Mike

Kevin Thorn

Hey Chris,

I took a look at your Button.story file and this appears to be a bug of sorts. Something to do with adding the "help" text box on the hover state that causes a font in that state to reduce about 2 points.

I sampled it by adding a shape with a question mark and text box with a question mark. Then added the hover state with the "help" text similar to how you did with the default button object. Button2.story attached.

Unfortunately, the same effect happens each time. I've done this sort of thing a hundred times and no had this issue so to Ashley's suggestion, your .story file *may* have an issue. Simple test would be to create that button from scratch in a new file. If it's still an issue I'd suggest submitting a support ticket along with your .story file.

That said, there's always a way

On the Master Slide I created another layer titled, "help hover" and added the "help" text box. Instead of a button I used the shape object and set a trigger to Show Layer 'help hover' when moused over that shape. Use a shape instead of a text box so the user's mouse arrow has more real estate to hover/click. Not ideal, but it serves what you're wanting to do.

Hope that helps.

Chris Bath

Thanks for your help everyone!

I tried the button format painter, but still experienced the same issue. As Kevin mentioned above, it appears there is a bug in my original project. I created a new blank project and formatted the button in the same manner (including the "Help" text box in the Hover state) and it works as it should.

Unfortunately, I am at a loss as to why the initial issue occurred, but I appreciate everyone taking the time to investigate.

Thank you!

Chris Bath

As a brief follow-up, I created a new blank project and imported the old project. This fixed the button issue, but has "broken" a number of other parts of the original course. I am going to try and build different buttons in the existing project, but re-create the template used in a new project to avoid this issue going forward.

Thank you again for your help!

Ashley Terwilliger

Hi Chris,

I'm glad you were able to fix the button issue, but sorry to hear that other parts "broke." Was it something specific, or just a number of things? Can you also confirm that you're following the guidelines here about creating and editing your Storyline file on your local drive, adhering the 260 file name limit, and not using any special characters in your file names? 

Laurine Peyrard

Chris, 

This post is a bit old but I have totally the same issue on my project. Cheryl is right, it's all about Story Size.

I've created a new project and import the old one, changed the player : everything works perfectly.

But when it comes to enlarge the Story, the bug came back immediatly. Don't know why this happens, by the way I currently use the update 5 version. 

Ashley Terwilliger

Hi Laurine,

Are you changing the story size after setting up your slides, or changing it at the beginning causes issues in your file? If it's the latter, I'd suggest conducting the repair of Storyline detailed here. 

If elements are moving around after adjusting the story size, that would be expected based on making it larger or smaller and the slide elements adjusting - but you may also want to look at what slide zoom you're using (I'd suggest working at 100% zoom) to ensure consistency from edit to preview/publish. 

If you're still having difficulty and I'm misunderstanding, could you offer a bit more information or even a .story file for us to take a look at? 

Laurine Peyrard

Hi Ashley,

I changed the story size after starting this project. I've made the repair but no changes.

When I start a new project and import the old slides, I've got the same issue.

Restarting the entire project from scratch would be very long, so I haven't tried.

The problem isn't really the size of the elements after resizing the story. They're bigger because of the zoom, all right, no problem.

My problem is, the hover and down states make my buttons smaller, even while I use copy/paste or the format painter on their different states.

I've attached a very lighter version on my current project, so you can take a look.

Thanks !

Laurine Peyrard

Hi again !

I think I know from where the problem comes, but I have no solutions in mind.

This issue happens whenever I create a button and add a symbol on it (like pause or an arrow).

When I want it bigger I go to Home and increase the size of the text (if you resize the button it will only resize the clic zone).

Can I enlarge these buttons by another way ?

Ashley Terwilliger

Hi Laurine,

Thanks for sharing your .story file here. When I took a look at it, I didn't see any additional objects added to the buttons you set up on your master? I have heard of a similar issue before, where adding the objects within the state can cause the state to not display correctly, and the workaround is to create the additional state with the object as another image and then insert that directly into the state instead of using the normal process of adding the extra elements directly into the state. 

If you're able to share an example where you have the buttons and then the extra objects in the state - I am happy to take a look again or try and help you set this up. 

Laurine Peyrard

Hi Ashley,

It seems there has been a little misunderstanding !

I'm sorry, it may be because of my english, or I did not make myself clear enough...

I don't have any additional objects on my buttons' states. But I still have exactly th same issues than Chris, that's why I took part of the discussion, at the beginning.


I still can't figure out why this happens on my project, and even if I'm finally forced to restart from scratch, I fear that it's coming back.

Ashley Terwilliger

Hi Laurine,

In your last post you said: "This issue happens whenever I create a button and add a symbol on it (like pause or an arrow)." Hence my confusion in looking for buttons that also included additional elements - so I'm unsure what you've added to your buttons to make them behave as such. It may be worth first looking into the following items that are known to cause odd behavior:

  • Work on your local drive (your C: drive).Working on a network drive or a USB drive can cause erratic behavior, includingfile corruption, loss of audio, and other unexpected behavior. 
  • You should also make sure the directory pathto your project files and your published output is less than 260 characters(for example C:\Articulate).
  • Avoid using special characters, accents orsymbols in your file names.

Next, are you able to replicate this in a brand new file, or is it just happening in this particular file? If it's just this file, I'd start by importing it into a new project as described here. 

Laurine Peyrard

Hi Ashley!

I'm sorry, I realize that I don't explain myself right. I meant this following process :

  • Create a default button
  • Double clicked on it
  • Add style (no background, no border)
  • Select in the tool box what is called "Button Icons" with the appropriate symbol

Infortunately, none of the following items could explain the bug on this project. 

It doesn't happens in other files, but when I import into a new project, it does.

I even reinstalled Storyline.

Thanks for your patience.

Ashley Terwilliger

Hi Laurine,

Thanks for the detailed steps - I know understand how you set these buttons up. I followed the same steps in a new project, and I couldn't get it to happen in a new project, but I can recreate the behavior in the example you shared. You mentioned it doesn't occur in any other files, so it may be something off in this file (what I listed above are some known causes of issues - but anything could happen to a file)? I'm assuming it's not just this single slide file you shared with me - but occurring for you in a larger project?