Skip to Content (Press Enter)
UserImage.jpg
Dang Quyen
128Views
7Comments
Solved
[Outsystems UI] Auto Adjust CSS on Chrome and IE
Question
Traditional Web
Application Type
Traditional Web

Hi all. 

On chrome i have scaled successfully, as shown in the picture.


however on IE chromium the scale fails, as shown below.


I used Outsystems-UI and change the following.

if style="width: 1800px; then on IE scale successfully.

How can I change style="width: 1800px; or style="width: 1580px; when changing browsers.

Thanks and best regard.

Sorry for my poor english.

0
0
21 Jun 2021
Copy Link
2021-05-18 02-27-17
Manish Gupta
Champion
Solution

Replying to Dang Quyen's comment on 22 Jun 2021 00:36:42

Hi Dang, I understand that the form block you have used should be look same in all browser. But creating the looks same with detecting the browser and fix width is not recommended. Though you are using the Traditional Web but Bootstrap concepts should be followed for the compatible UI. 

In my opinion, the width should be fix according to the resolution. Generally in OutSystems it looks same in all broswer. Please check this screen in any browser - https://personal-9qwkrkgl.outsystemscloud.com/OSMDb/Movies.aspx?_ts=637599509307127011 


So, my suggestion is to try using the CSS Classes. I think you have not used Parent Fill, Full-Width classes. Also, better to manage width by "px", try if you can use either 'col' or '%'. This will gives you more better and cross browser compatible layout. 


You can inspect and see the structure of my URL shared with you. 

See solution in context
1
0
22 Jun 2021
Copy Link
2021-05-18 02-27-17
Manish Gupta
Champion

Hello Dang

Good day to you!

Sorry, but I didn't get the question successfully and have some doubt. Please help to clear -

  1. Do you want to manage different Styles or CSS at different resolutions? Like 1800px and 1580px? So, if the screen will be at 1800 it will use specific CSS and at 1580 it will be different? - If yes, you can use the Media Queries in CSS
  2. Or do you want the web should always be in the same width in any resolution or browser? - If yes, can you share the current properties of this container? or minimal OML to check?
  3. Also, you can try with Full-width Style Class to force full-width all time of the container 


I hope this will helps you but again please I have misunderstood your question, let me know :)


Many Thanks

1
0
21 Jun 2021
Copy Link
UserImage.jpg
Dang Quyen

I want it to look the same in all browsers. like the first picture,However the display on IE is different.
Tks Manish Gupta


0
0
22 Jun 2021
Copy Link
2021-05-18 02-27-17
Manish Gupta
Champion
Solution

Replying to Dang Quyen's comment on 22 Jun 2021 00:36:42

Hi Dang, I understand that the form block you have used should be look same in all browser. But creating the looks same with detecting the browser and fix width is not recommended. Though you are using the Traditional Web but Bootstrap concepts should be followed for the compatible UI. 

In my opinion, the width should be fix according to the resolution. Generally in OutSystems it looks same in all broswer. Please check this screen in any browser - https://personal-9qwkrkgl.outsystemscloud.com/OSMDb/Movies.aspx?_ts=637599509307127011 


So, my suggestion is to try using the CSS Classes. I think you have not used Parent Fill, Full-Width classes. Also, better to manage width by "px", try if you can use either 'col' or '%'. This will gives you more better and cross browser compatible layout. 


You can inspect and see the structure of my URL shared with you. 

1
0
22 Jun 2021
Copy Link
UserImage.jpg
Dang Quyen

Replying to Manish Gupta's comment on 22 Jun 2021 04:08:45

Thank you, I'm done and learning more about CSS

0
0
25 Jun 2021
Copy Link
2025-12-09 14-11-18
Janakiraman JR

Hi Dang Quyen,

There is a javascript code to detect the browser by using that you can switch CSS,


// Detect Chrome

var chromeAgent = userAgentString.indexOf("Chrome") > -1;


// Detect Internet Explorer

var IExplorerAgent = userAgentString.indexOf("MSIE") > -1 || 

                     userAgentString.indexOf("rv:") > -1;


// Detect Firefox

var firefoxAgent = userAgentString.indexOf("Firefox") > -1


// Detect Safari

var safariAgent = userAgentString.indexOf("Safari") > -1;



These are the Js codes that detects the browser 

Thankyou.

Regards,

Janakiraman JR

3
0
21 Jun 2021
Copy Link
2025-01-31 03-15-38
Irfan Ahamed Abdul Shukoor

Thank Janakiraman JR , It helps.

0
0
21 Jun 2021
Copy Link
UserImage.jpg
Dang Quyen

Thank Janakiraman JR. i will try it.

0
0
22 Jun 2021
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.