Forum Stats

  • 3,769,290 Users
  • 2,252,943 Discussions
  • 7,874,980 Comments

Discussions

Text in fields disappeared/became invisible when page item in focus/clicked on.

Bigal
Bigal Member Posts: 5 Green Ribbon
edited Oct 12, 2021 7:48AM in APEX Discussions

APEX vesion 20.2

Chrome version 94.0.4606.81

Using Universal Theme - 42

This issue only happened a week or so ago and only on Modal windows. Upon clicking on a field (e.g. text field or select list), the text becomes invisible. For text fields, you cannot see what you are typing but upon losing focus of the field, the text becomes visible.

This is not happened in Normal Windows, only Modal.

This seems to happen after upgrading to Chrome v94 but cannot be sure if that is the cause.

It is also not happening on all machines with the same version of Chrome. Also, it does not happen on Firefox and IE/MS Edge.

Have anyone encountered this?

miran213Denisa BentoUser_DYNIPUser_HBSCCmrpeleJake4321omar.zkGerard Otin

Best Answer

  • Bigal
    Bigal Member Posts: 5 Green Ribbon
    Accepted Answer

    Thanks for setting the record straight. While trying to fix this issue, I was actually trying to do a little bit more - when I click on the a field, I wanted an oragne border around the field. Somehow, if I set the border for the non-focused classes to 1px, the solution didn't work.

    This is my full CSS:

    .apex-item-select, .apex-item-text, .apex-item-textarea {

    -webkit-transition: all 0.2s ease;

    -moz-transition: all 0.2s ease;

    -ms-transition: all 0.2s ease;

    -o-transition: all 0.2s ease;

    border: 1.1px solid #dfdfdf;

    }

    .apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {

    border: 1px solid #f7921e;    

    outline: #f7921e solid 1px !important;

    }


    Anyway, I tried it with only the "focus" CSS and it will work with just 1px border e.g.

    .apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {

    border: 1px solid #dfdfdf;

    }

    User_RWTFRuser4585215
«1345

Answers

  • User_5TZ74
    User_5TZ74 Member Posts: 3 Green Ribbon

    Hi, I'm facing the same strange issue.

    I also use Chrome version 94.0.4606.81 and it happens on one machine while not on another with the same chrome version. I also tried MS Edge, which is not affected by this behaviour.

    The modal pages become practically unusable over night.

    Does anyone have an idea?

    Thanks!

    Jake4321
  • Creg
    Creg Member Posts: 2 Blue Ribbon

    Apex versions 20.2 and 21.1

    Chrome version 94.0.4606.81

    We are also experiencing exactly this issue - Chrome v94, with both Apex v20.2 and v21.1, on both Mac and Windows. However only some users are encountering it, not all of us are able to reproduce it, despite being on the same version of Chrome. Firefox and Edge are fine.

    Jake4321
  • Bigal
    Bigal Member Posts: 5 Green Ribbon

    I managed to work around this issue by applying custom CSS. Still none the wiser as to the cuase.

    I applied the following custom CSS to the theme roller and the problem went away. Not the most elegant of solution but I needed to fix it fast.

    .apex-item-select, .apex-item-text, .apex-item-textarea {

    border: 1.1px solid #dfdfdf;

    }

    If the border is 1px, the disappearing act happens so I set it to 1.1px and it stop disappearing.

    Patrick MonacoJake4321
  • User_5TZ74
    User_5TZ74 Member Posts: 3 Green Ribbon

    The inline CSS didn't work for me. The border gets set but that doesn't change the behaviour on click.

  • User_5TZ74
    User_5TZ74 Member Posts: 3 Green Ribbon

    Perfect, that solution worked. Thank you very much!

  • Bigal
    Bigal Member Posts: 5 Green Ribbon
    Accepted Answer

    Thanks for setting the record straight. While trying to fix this issue, I was actually trying to do a little bit more - when I click on the a field, I wanted an oragne border around the field. Somehow, if I set the border for the non-focused classes to 1px, the solution didn't work.

    This is my full CSS:

    .apex-item-select, .apex-item-text, .apex-item-textarea {

    -webkit-transition: all 0.2s ease;

    -moz-transition: all 0.2s ease;

    -ms-transition: all 0.2s ease;

    -o-transition: all 0.2s ease;

    border: 1.1px solid #dfdfdf;

    }

    .apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {

    border: 1px solid #f7921e;    

    outline: #f7921e solid 1px !important;

    }


    Anyway, I tried it with only the "focus" CSS and it will work with just 1px border e.g.

    .apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {

    border: 1px solid #dfdfdf;

    }

    User_RWTFRuser4585215
  • User_QPAO4
    User_QPAO4 Member Posts: 3 Red Ribbon
    Hello everyone I have the exact same problem. Is there any more in-depth solution ???
    


  • miran213
    miran213 Member Posts: 6 Red Ribbon
    edited Oct 15, 2021 2:15PM

    This version of the CSS fix helped us. Thanks Creg and Bigal!

    .apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {
    
    	border: 1.1px solid #dfdfdf;
    
    }
    

    The "orange" version that Bigal suggested only worked for us on some page fields, but not all. Also, we had to put the 1.1px on the border because with the 1px it didn't work on any of the affected fields.

    We can't pinpoint the cause. We are all on the latest Chrome build and some of us have the problem, some don't. Also, our Windows builds are all over the place so that doesn't help us either; on my PC, Version 10.0.18363 Build 18363, it works, on an older Build 15-something and a never Build 19-something it doesn't .

    Doris SerrutoPatrick MonacoJose Molina
  • Tim Kimberl-Oracle
    Tim Kimberl-Oracle Member Posts: 29 Employee

    This is an interesting bug, I am curious for those running into this issue. What is your browser zoom level? Is this happening at 100% zoom level? If so... what is your operating system resolution/dpi set at?

    Doris Serruto