[Outsystems UI] Auto Adjust CSS on Chrome and IE
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.

Champion
Solution

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. 

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

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


Champion
Solution

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. 

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

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

Thank Janakiraman JR. i will try it.

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