CP9 and Radio Button Widget no displaying in HTML5 when published

Report · Jan 26, 2017

I've created and example project that has two radio button widgets on one slide. The one only displays half the content while the other displays just fine.

You can see part of the second radio button and it does function but you can't see the label.

In the CPTX it all shows up and when I preview it everything shows. Just not when published as an HTML5.

Report · Jun 28, 2019

A workaround I found is to add the following line of code to the index.html (or index_TINCAN.html or index_scorm.html) page of your project after publishing it.

This should fix the issue with the radio button widgets. Just set the width to whatever width you need. The dimensions of our Captivate file was 1024x768 so I just set the width to 1024 to make sure nothing would ever get cut off, but you can make it less. If you need to adjust the height, you could add a height css declaration too.

Report · Jun 28, 2019

Wanderer10. That means every time we need to make a test, or change the file, means re-entering that line? That's not much of a fix. Should be in the generation software.

I'll give it a shot.

--kC

Report · Jun 28, 2019

kpcasey, I completely agree with you. It is a hassle to have to add that line each time and it should be fixed in the software. But this workaround will save you time versus recreating all of your radio button widgets via advanced actions.

Also, you will find somewhere else on these forums a thread on how you can edit the template that Captivate uses to create the index.html pages so that the line can be automatically added when you publish instead of having to manually add the line each time.

Hope this all helps you out.

Report · Jun 28, 2019

Thanks. Just tried it. No go. Still cut off. And completely forgot about editing the template (we already do that to add metadata),

Added to the styles (along with the already present #initialloading:

.cp-widget iframe {

width:1024px !important;

}

Tested in Chrome, IE, Edge, Firefox. On/from Server.

Report · Jun 28, 2019

Add it on a line by itself right below the style tag set that's already there.

Because of cascading hierarchy, the line needs to be after all other style declarations.

Report · Jun 28, 2019

Did that. Still nothing. Cleared cache. etc... just to be completely sure. Still rendering at 140/175.

Report · Jun 28, 2019

Not sure why it's not working for you. I have used this fix for several Captivate projects. Is there a url you can post for us to see?

Report · Jul 01, 2019

No. And if it was, all you would see is the cut off widget (as above) stuck at 140W/175H.

What would you have me look for? Thanks.

Here's a screenshot of the relevant content of the index file...(It's there, not working).

Report · Jul 01, 2019

That looks correct and has worked for me.

One last thing to try is making sure no cache issues are causing the problem. I know you've cleared your cache, however I've found that clearing my cache hasn't always been reliable.

If possible, I would try to preview the files under a completely new url to completely avoid cache issues.

So if your captivate project is located on a server at

http://myserver.com/mycaptivateproject/index_SCORM.html

for the sake of testing, rename the directory the Captivate files are in. So for example the new url for the files may be http://myserver.com/mycaptivateproject-new/index_SCORM.html

to avoid any caching issues.

After that, if the widget is still getting cut off, I'm at a loss for what may be causing your issue. This fix has worked for me in Captivate 10 (2017) and 11 (2019).

Report · Jul 01, 2019

Oh, right. We're on HTML5, I can inspect the element in Chrome because it's nto flash. (more than one cup of Coffee today, maybe that's why).

It's around here that may be where the problem is... (bolded)

<span>

</span>

</div>

I *believe* it's this DIV that is constraining the display of the radiobutton content within (which contains an iframe). How come this is not being adjusted to the size of the radio button height/width on the screen? Inspecting the CSS on the page, and this particular element, I think this is the culprit for all that ails. Granted this does seem to contradict my earlier hypothesis of the 140/175 above, but that I could actually delve into the CSS and code, I already like it better than Flash.

It appears that Adobe Captivate creates an iframe for the radio button widget, which contains another full-up HTML page just of the widget.

If the size of the iframe isn't set properly in the CSS, then it's going to constrain its contents to just that iframe size of 240/115 and anything displayed outside of it will not be "shown through the window" of said iframe.

And I agree, that the CSS included in the index file *should* work to resize the iframe... tried adding height attribute to no avail.

--kC

Report · Jul 01, 2019

Postscript: <style type="text/css">.cp-widget iframe {width:1024px !important; height:768px !important;}</style>

Works. See. More caffeine!

What I have to do now, is fix/modify the height, because the iFrame that high is actually over the "submit" button (and also the popups for wright/wrong) and blocking it from use. Have to find that sweet spot.

Thanks for your help and don't know why my brain didn't pick up on the height until it was screaming at me to give it a shot.

Report · Jul 01, 2019

Good to hear it's working for you too.

How I'm using the radio button widget, it was only an issue with the text getting cropped off by the width, but yes it you have issues with the height getting cropped, then adjusting for that would be needed as well.

Hopefully Adobe will fix this issue at some point.

Report · Jul 01, 2019

If you want any chance of that happening, log the bug.