Web responsive application on version 11

hi all,

I am working on a website by creating web application (top menu theme) with the web responsive in order to available for the mobile view.

but i find a issue that when i finished the development on the website and open the mobile view, most of the thing is broken. May i know did anything i did it wrong or some setting i missed?

it is just a demo and there is the same issue for my own website. i just create the webscreen by using the sample.

i assume that the mobile view just like the SILK UI (at least SILK UI is working for the menu bar). 

Thanks all.

Hi Chin,

Just now created a website using os11 the responsive part is working as aspected.

Can you please share the URL so that we can take a look at HTML DOM to verify the issue.

Regards,

Pankaj Pant

Hi Chin Hin Wan,

You will have to customize the CSS for different devices like:

.desktop .StyleClassName {

// CSS Code here

}

.phone .StyleClassName {

// CSS Code here

}

.tablet .StyleClassName {

// CSS Code here

}

Regards,

Rushabh Shah

Rushabh Shah wrote:

@Rushabh Do you think that defining all the CSS like this will work?

If the platform is capable of doing all these media query why should anyone write that much of code?

In this case, media queries are not working so only the things are not responsive.

Regards,

Pankaj

Hi Chin,

I think you are monitoring your changes in Service Studio.

Can you run your web application on your Mobile Browser. It should work as expected.

Also you can run your web application in Web Browser(i.e. Google Chrome) and use Toggle Device Toolbar to quickly check your application responsiveness.
i.e. Google Chrome -> F12 -> Ctrl+Shift+M -> Select the desired device from dropdown list.

Regards,
Palak Patel

Pankaj pant wrote:

Totally agree with you Pankaj.
@Rushabh, OutSystems handles that all by default. No need to write media queries manually. 

Pankaj pant wrote:

Hey Pankaj,

I think I misunderstood the case. Apologies.

Palak seems to be correct.

Regards,

Rushabh Shah

Pankaj pant wrote:

Dear Pankaj,

Thanks for the reply, and here is my URL:

https://chinhin-wan.outsystemscloud.com/PreviewInDevices/?DeviceName=Desktop&URL=/topmenu1/Entry1.aspx?_ts=636812595649247456

it is the development URL, coz it is a demo to show my issue.

Actually i just create web application by using "top menu" theme and create a webscreen by using the templates of "Account Dashboard".

Please advise the issue.

many thanks.

Palak Patel wrote:

Dear Palak,

Thanks for the reply, would you please refer to my last reply?

many thanks.

Hi Chin,

As I tested your application in the real device.

It is working fine please look at the screens but it should also work in the emulator.

Regards,

Pankaj 

Pankaj pant wrote:

Hi Pankaj,

Thanks for testing! i think i may found the reason why i cannot display normally.

But may i have the other related question? That's mean i cannot show the screen correctly when i am making changes on Service Studio? 

Thanks!

It seems you can't but it should show.

Regards,

Pankaj

Pankaj pant wrote:

Thanks Pankaj ! The problem has been solved.

Also thanks all who try to help me.