Web responsive application on version 11

Rank: #33671

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.

on 2018-12-24

Chin Hin Wan

Rank: #33671

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!

See solution in context

on 2018-12-24

Pankaj pant

Champion

Rank: #36

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

on 2018-12-24

1 reply

on 2018-12-24

Show thread

Hide thread

Chin Hin Wan

Rank: #33671

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.

on 2018-12-24

Rushabh Shah

Rank: #8916

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

on 2018-12-24

3 replies

Last reply on 2018-12-24

Show thread

Hide thread

Pankaj pant

Champion

Rank: #36

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

on 2018-12-24

Palak Patel

Rank: #299

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.

on 2018-12-24

Rushabh Shah

Rank: #8916

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

on 2018-12-24

Palak Patel

Rank: #299

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

on 2018-12-24

2 replies

Last reply on 2020-11-02

Show thread

Hide thread

Chin Hin Wan

Rank: #33671

Palak Patel wrote:

Dear Palak,

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

many thanks.

on 2018-12-24

Hayasaka Kenichi

Rank: #27867

Replying to Chin Hin Wan's comment on 24 Dec 2018 06:55:21

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?

on 2020-11-02

Pankaj pant

Champion

Rank: #36

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

on 2018-12-24

1 reply

on 2018-12-24

Show thread

Hide thread

Chin Hin Wan

Rank: #33671

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!

on 2018-12-24

Pankaj pant

Champion

Rank: #36

It seems you can't but it should show.

Regards,

Pankaj

on 2018-12-24

1 reply

on 2018-12-24

Show thread

Hide thread

Training

Documentation

Web responsive application on version 11