Highlighted

Playbar Disappears When Rotated

New Here ,
May 25, 2018

Copy link to clipboard

Copied

Hi,

I have CSS to rotate my course to make it always in Landscape mode. This is the CSS I have:

@media (orientation:portrait){

#main_container {

transform-origin: 30% 60%;

transform: rotate(90deg);

top: -153px !important;

}

}

However, when I am in a browser and it is rotated then the playbar buttons disappear. They appear to still be in the DOM but are not showing.

Does anyone know why or how to fix this issue? I am wanting to only display my lesson in landscape mode. If there is another solution that doesn't make the buttons disappear then that would work too!

I am in Captivate 2017.

Thank you.

Views

225

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Playbar Disappears When Rotated

New Here ,
May 25, 2018

Copy link to clipboard

Copied

Hi,

I have CSS to rotate my course to make it always in Landscape mode. This is the CSS I have:

@media (orientation:portrait){

#main_container {

transform-origin: 30% 60%;

transform: rotate(90deg);

top: -153px !important;

}

}

However, when I am in a browser and it is rotated then the playbar buttons disappear. They appear to still be in the DOM but are not showing.

Does anyone know why or how to fix this issue? I am wanting to only display my lesson in landscape mode. If there is another solution that doesn't make the buttons disappear then that would work too!

I am in Captivate 2017.

Thank you.

Views

226

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
May 28, 2018

Copy link to clipboard

Copied

Hi,

Can you confirm the type of device and browser versions you are testing this with?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
May 28, 2018

Copy link to clipboard

Copied

It happens multiple places. It happens in Chrome, and it happens on an iPad when the navigators User Agent is:

Mozilla/5.0 (iPad; CPU OS 11_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E302

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
jensaint LATEST
Explorer ,
Mar 13, 2019

Copy link to clipboard

Copied

For anyone still looking for a solution to this, I may have one for you. I just found a similar issue the other day in Chrome.

I have a 1280x720 scalable HTML5 training, and the playbar would disappear when the screen was resized any higher than 1357w x 937h in landscape. It was still in DOM (still active) but not showing. I tracked it back to a missing css style call for webkit browsers. It would affect Chrome and some other webkit-dependent browsers, so it could be a similar issue described in the original post.

The solution, which is adding a line of code to your <style> tag in your index.html file, is written up on my blog​. I also submitted it to Adobe - hopefully they'll be able to provide a more permanent solution.

I hope this helps!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Captivate User Guide
New Group