Disable tablet/mobile Layout

Hello!

I'm having trouble in reactive application. Is there anyway to disable the layout of tablet/mobile and only have the layout of desktop?

Also, when you split screens, is there anyway to make the content 100% and open a horizontal scroll bar to see all the page?

Hi Madalena,

You can use Adaptive/DisplayOnDevice widget to display the content only on desktop

This widget will give you 3 content as mentioned in the above screenshot. Put all the code to be displayed on the desktop into OnDesktop placeholder. Then the content will be visible only on desktop and not in Tablet or Mobile.

Cheers!!

Thanks,Aadhavan S

Thanks for the answer Aadhavan!

The problem here is that i'm using a theme that when the resolution is going small, the theme turns into tablet or mobile. And i don't what to have that behavior... But i have to use that theme. So i need to find a solution to disable that.

Hi @Madalena Nascimento 

Outsystems Compiles the screens with Meta tag in Head element
And it is having following by default

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1">

We need to change the meta tag content to viewport-fit=cover, width=1280px, initial-scale=1

Use the following Javascript on OnReady of the screen to Update the Meta tag

document.querySelector('meta[name="viewport"]').setAttribute("content", "viewport-fit=cover, width=1280px, initial-scale=1");

This will make a horizontal scroll in tablet and mobile view

Otherwise Use the following css to achieve that

body {

    width: 1280px;

    overflow-x: auto;

    height: 100%;

}


Thanks & Regards,

Janakiraman JR.

Hi @Madalena Nascimento We can follow 2 different way to solve this problem.

1. Disable tablet and mobile Layout 

Using this CSS theme will disappear in mobile and tablet and only show only in Desktop view.

@media(max-width: 1199px){ body{ display: none; } }


2. With horizontal scroll

If you want to show scroll on mobile and tablet view

@media(max-width: 1199px){ 

body{ max-width: 1199px; margin: auto; overflow-x: scroll;  width: 100%; } 

}


Thanks,

Ankit Maharshi

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.