MadCap Software Forums

Hi,

I am using Flare 8.1 and generating WebHelp Mobile output. Everything looks fine when viewing the output using the ipad. As you turn the device in your hand to go from Portrait to Landscape mode, the content adjusts accordingly.

However, when using the iphone 4 and 5 with ios 6.1.2, we see issues with the display of topic content when rotating the device. For example, if we open a topic so that you are seeing content in a vertical position (landscape mode), it appears fine. Then, when you rotate the device horizontally (now portrait mode), the contents to do not elongate to fill the horizontal viewing area. The topic width from the landscape mode is maintained. Extra area to the right is just filled with white space. Rotating the phone back and forth and switching between topics does not seem to make a difference. The width used in the landscape mode always remains.

We cannot find anything in the Flare Help about this issue or on the forums. We are starting to wonder whether it has something to do with images. The images, which are about 3 inches wide, fit fine on the ipad, but they are too wide for the landscape mode of the iphone. When viewing the images in landscape mode on the iphone, you can easily scroll horizontally to see their content. We have not set the size of our images based on percentage values or anything like that.

We do not see any settings on the WebHelp Mobile Output tabs that allow you to have images to automatically adjust their size when viewing them on various mobile devices so that they fit in the viewing window. We are hesitant about setting the size of the images to use a percentage value (such that their width is based on a percentage of the style container in which they reside) because of performance issues scaling and then generating the image dynamically each time you open a topic.

Has anyone else seen this issue, and if so, do you have any recommendations on how to resolve it?

Thanks

Just an update on this posting for anyone who may be encountering this same issue...

As a workaround, I created an image style class named img.maxwidth100% and associated the image to that class so that the size of the image adjusted appropriately to the window in which it was being displayed.

I also contacted Madcap Technical Support. They did some testing and it became apparent that this was a product defect that had to do with the size of images that fit fine within the window of the ipad screen but were too wide for the window of an iphone as suspected.

They have submitted a defect report regarding this issue, which exists as of Flare Version 9.0.

Your workaround is just what I would have suggested. Those max-width and min-width settings can be exceptionally helpful. They are one of the basic foundational principles of responsive/adaptive layout -- which I get to talk about next week at MadWorld! In fact, I'm working on that part of my presentation right now.