Skip to Content
0

CSS to to allow a design studio display in only in portrait

Oct 31, 2017 at 08:18 PM

59

avatar image

Hi experts

I am trying to prevent design studio to display in landscape (portrait only) and I have tried to use the below css to achieve this and it is not working as I don't know what I am doing wrong.

/* Smartphones (portrait landscape) ----------- */

@media screen

and (min-width : 320px)

and (max-width : 768px)

and (orientation : portrait)

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Tammy Powlas
Oct 31, 2017 at 08:33 PM
0

Hi Robert - which version and SP of Design Studio are you using?

Consider using Lumira Designer which has an adaptive layout https://help.sap.com/viewer/4f58d91f03e441b68d3187e94be27df2/2.0.2.0/en-US/2e39302ef2184dce8a7265fb04f6f228.html

Show 5 Share
10 |10000 characters needed characters left characters exceeded

Thanks Tammy for your response.

I am currently using Design Studio 1.6 SP3

I couldn't open the link to the suggestion you made

0

Hi Robert - that is strange; it is a link to the SAP Help at help.sap.com

Any chance you could download Lumira Designer 2.0 SP2 to evaluate the adaptive layout for your needs?

0

Thanks Tammy for the support. We currently do not have any plans of implementing Lumira anytime soon

0
0

Thanks Vidhya

0
Mustafa Bensan Nov 02, 2017 at 10:59 AM
0

Hi Robert,

The CSS media feature orientation is not intended for forcing the device orientation to landscape or portrait. It simply allows you to apply different styles based on whether the orientation is landscape or portrait. In other words, orientation:portrait will not force/switch the orientation to portrait.

If you provide a screenshot of your application with a description of what layout you would like to see in both portrait and landscape orientations then we can try to suggest design approaches accordingly.

Regards,

Mustafa.

Show 3 Share
10 |10000 characters needed characters left characters exceeded

Thanks Mustafa for your response.

landscape.jpg

portrait.jpg

Please see the above screenshot of the application both in landscape and portrait as displayed on an iPhone 6.

What I am trying to achieve is to prevent the application from displaying in landscape on an iPhone (Portrait only)

Regards

Robert

landscape.jpg (49.2 kB)
portrait.jpg (37.4 kB)
0

Hi Robert,

If you are consuming the Design Studio application directly in the iOS Safari browser (as appears to be the case in your scenario), then you CANNOT lock the orientation in Portrait Mode using CSS. This is by design and explained in the answer of the following post:

https://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-iphone-web-application

As suggested in the above post, you could display a message when the device is in landscape orientation to alert the user that this mode is not supported.

If you consume the Design Studio application from the SAP BI Mobile app for iOS, which is the SAP recommended approach, then the iPhone version of the app is locked in Portrait mode as per your requirement.

Regards,

Mustafa.

0

Thanks Mustafa

Whilst still dealing with this, is there also a design issue when design studio application is consumed directly in IOS safari browser and scroll is not available but on a desktop browser the scroll is. Is there a way around this

0