342
Views
13
Comments
Solved
Web responsive application on version 11
Question

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.

UserImage.jpg
Chin Hin Wan
Solution

Pankaj pant wrote:

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 

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!


2018-08-26 20-34-32
Pankaj pant

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

UserImage.jpg
Chin Hin Wan

Pankaj pant wrote:

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

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.


2019-10-09 05-09-10
Rushabh Shah

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

2018-08-26 20-34-32
Pankaj pant

Rushabh Shah wrote:

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 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

2026-03-16 00-00-40
Palak Patel

Pankaj pant wrote:

Rushabh Shah wrote:

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 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

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


2019-10-09 05-09-10
Rushabh Shah

Pankaj pant wrote:

Rushabh Shah wrote:

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 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

Hey Pankaj,


I think I misunderstood the case. Apologies.

Palak seems to be correct.


Regards,

Rushabh Shah


2026-03-16 00-00-40
Palak Patel

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

UserImage.jpg
Chin Hin Wan

Palak Patel wrote:

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

Dear Palak,

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

many thanks.


UserImage.jpg
Golden Daffodil

I have same problems i.e. I want to use in apple  tablet for web development system but  CSS  design is all random.You solved with google chrome  way?

2018-08-26 20-34-32
Pankaj pant

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 

UserImage.jpg
Chin Hin Wan
Solution

Pankaj pant wrote:

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 

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!


2018-08-26 20-34-32
Pankaj pant

It seems you can't but it should show.


Regards,

Pankaj

UserImage.jpg
Chin Hin Wan

Pankaj pant wrote:

It seems you can't but it should show.


Regards,

Pankaj

Thanks Pankaj ! The problem has been solved.

Also thanks all who try to help me.

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