Button horizontal alignment in all-new Adobe Captivate

[98986617]

In the all-new Adobe Captivate a block containing 3 buttons insists on lining up vertically in mobile phone view on top of each other even when the buttons are changed to small circular icons. There is plenty of space in the mobile view for the buttons to be spread out horizontally. Am I doing something wrong or is this behavior intended?

[Lilybiri]

Is it possible to show some screenshots of alignment and spacing setup?  I also had issues when using SVGs instead of the default buttons because they were always cropped if I use 4 SVGs (since you can only have 3 buttons in a button block).

[98986617]

I am new to Captivate so did not even try using pure SVGs for this purpose. Thanks for the suggestion. It gave me ideas for other things. However the alignment issue is the same. I followed up with Adobe tech support and they confirmed the vertical alignment in mobile view is how it was designed to work.

[Lilybiri]

That is indeed the problem with all tools using canned setups, in this case for the button block. Trying to make it easy means you have to sacrifice control and customisability. First question is: do you really need responsive projects?

[kdmemory]

You are probably doing nothing wrong. The button block from Cp's interactive components just turns out like that when displayed on a mobile viewport.  Even if like in your case the buttons are like small circular items and have enough space to align horizontally. I've tried to attack this problem with a user-defined (custom) Design Option and that worked in the mobile-responsive view inside Captivate but already as a preview in a real browser the buttons went back to vertical stacking.

The issue is that the buttons in a button block are nested in a HTML division with the class name "cp-buttons-container" and I reckon that this css class causes - behind the curtains - the vertical stacking through a media query setting for mobile-sized viewports. There are as far as I know no alignment options in Captivate to change that.

This is of cause different in Captivate Classic where you have combined with Fluid Boxes the Wrap Option: Squeeze in a row.

It is possible though to manipulate the display of the division with the class name "cp-buttons-container" by adding the css-rule style.flexDirection = "row" in runtime via javascript. But before I can give you the necessary code for that I'd need to know more about the architecture of your entire slide. For example how many button blocks are on a slide and where.

I add a screenshot from a test module I made with two slides in mobile view. One on the left is with two button blocks (top and bottom) where I manipulated the flex-direction for both in runtime. On the right is a similar slide whereby only the top button block is manipulated, the bottom block not. There are actually three buttons in a row - one in the center is an empty invisible button to allow some space. That's why when they stack vertically there's such a gap between the two visible buttons.

[98986617]

Thanks for the feedback. It is good to have an idea of what's happening underneath the hood. I am new to Captivate and am trying to get all I need from the new version vs Classic after experimenting with both. Adobe tech support confirmed the vertical alignment is how it is supposed to be in mobile view. I put in a suggestion to allow horizontal alignment.