AtlasUI (Mendix8.3) and IE11 - not fully supported

3
Hi all, I just noticed that the Latest AtlasUI seems to be not fully working with IE11. Does anyone have more experience on this? E.g. for radiobuttons most of the styling seems to be ignored Chrome:  â€“ IE 11:  What I can find in this case is that this is related to massive usage of input:before and input:after, which just does not work (in IE11). If I start customising based on this styling it gets even worse (Standard Atlas is still very similar to standard IE11 styling) How should you handle these problems? regards, Fabian  
asked
2 answers
3

Hi Fabian,
I was able to (partially) fix your issues by adding the following code. Unfortunately it will not be exactly the same as on other browsers, as IE11 doesn’t support :before & :after on input elements.


Checkbox (theme/styles/web/sass/core/widgets/checkbox.scss):

input[type='checkbox']::-ms-check {
    color: $form-input-border-color;
    border-color: $form-input-border-color;
    border-radius: $form-input-border-radius;
    background-color: $form-input-bg;
}

input[type='checkbox']:focus::-ms-check,
input[type='checkbox']:checked::-ms-check {
    color: $form-input-border-focus-color;
    border-color: $form-input-border-focus-color;
    background-color: $form-input-bg-focus;
}

 

Radio Buttons (theme/styles/web/sass/core/widgets/radiobuttons.scss):

input[type='radio']::-ms-check {
    color: $form-input-border-color;
    border-color: $form-input-border-color;
    background-color: $form-input-bg;
}

input[type='radio']:focus::-ms-check,
input[type='radio']:checked::-ms-check {
    color: $form-input-border-focus-color;
    border-color: $form-input-border-focus-color;
    background-color: $form-input-bg-focus;
}

Don’t forget to compile your SCSS to CSS after adding the code. You can use Calypso for that. :)
 

An alternative to the fixes above is to comment out the following from theme/styles/web/sass/main.scss.

@import 'core/widgets/checkbox';
@import 'core/widgets/radiobuttons';

This will exclude the styling from Atlas. But then you would have even more differences as these inputs look different on every browser.

answered
2

are you sure its Atlas and not IE?

 

this is a screen shot from chrome, edge and FF from radio button default styling.

from: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_radio

if atlas is doing something with radio buttons, you could just remove that bit from atlas, radio buttons are always different depending on your browser and OS, so would make sense to leave that to the browser to make it look native to what ever system you are using them on. (unless you want to do something crazy)

answered