responsive project and learning interactions - text scaling and wrapping help

[hayleyk5460387]

Hey everyone, I'm working on a responsive project using the 3 default breakpoints. I'm hitting a wall with the Checkbox learning interaction (LI).

It isn't wrapping text or scaling text if the text is too long to be displayed at that screen size. It just gets cut off.

Mobile breakpoint example:

If you change the LI font size in any of the 3 views, that font size is applied to all of them. So if I set a tiny font so the whole line appears on mobile, the tiny font is used at desktop size.

I don't have the 'Scale Text' option in the LI config that some other posts have talked about.

In general, I've found the Responsive process rather unintuitive and difficult to use, but I've figured out how to work around pretty much everything but this.

[Lilybiri]

Not all learning interactions have the option 'Rescale', are not really

suited for responsive projects IMO. Sorry, wished this very useful one

would be upgraded.

On Tuesday, 13 September 2016, hayleyk5460387 <forums_noreply@adobe.com>

[hayleyk5460387]

The Learning Interactions are just so broken in HTML5. I just tried a test in a non-responsive HTML5 project and my text gets cut off just the same. I wish there was some fix - it looks fine on the stage, but breaks in the browser.

[RodWard]

To be fair, since you mention that you are using a Captivate version with only three breakpoints I would surmise you are still using Captivate 8, is that correct? 

If your development focus is going to be on the cutting edge with HTML5 responsive design then I would suggest you REALLY need to be on the very latest version of Captivate, not several updates behind.

The Learning Interactions and other HTML5 functionality of Captivate is a work in progress, and I doubt Adobe is willing to go back and fix older versions when their main focus now is probably on the next version of Captivate to come out.

[hayleyk5460387]

Nope, I'm on Captivate 9. I was on 9.0.1 yesterday and in a last-ditch effort I updated to 9.0.2 (latest release) and same problem.

I did say the *default* breakpoints - there's 3 default ones (Desktop, Tablet, Mobile).

[RodWard]

When you updated Captivate did you follow all the instructions in the Release Notes about resetting the Preferences folder and Layouts etc?

[hayleyk5460387]

On your advice, I've gone ahead and done this but I'm experiencing the same issue.

To switch topics a little, after having issues with the responsive Checkbox widget I switched from a responsive project to a regular project publishing with HTML5 and Scalable Content. Now my issue with the checkbox widget is that it's getting published at 100px wide no matter how wide the widget is on my Captivate stage. The div with the cp-widget class is getting a style applied to it of 100px.

[hayleyk5460387]

Picking around a bit, the problem seems to be in checkbox.js. Starting on line 254 jQuery is used to grab the width and height of the checkbox labels to determine the maximum width and height for the div containing the iframe with the checkboxes in it (this is the aforementioned cp-widget div).

But on line 181, the iframe containing the checkbox content is hidden temporarily, then the function that updates the style/size of the checkbox widget is run. Unfortunately, jquery cannot grab the width of an element that is hidden, so it always returned a width of 0. Once you comment out line 181, jquery is able to grab the proper width and height of the label and use its formulas to calculate the width of the container cp-widget.

But wait, there's more! In the accompanying .htm file that is run in the iframe, there's a default value set to the div containing the labels, so jquery will never calculate the true width of the label based on its content. Setting the width of checkboxwdgt to auto allows the label to stretch out as wide as it needs to for the correct width to be calculated.

I'll take the FOUC to get the correct calculated dimensions of my labels so my checkbox widget doesn't get cut off.