Loading of custom CSS in "om" (distraction-free) mode


Think I have stumbled across a bug relating to loading of custom CSS when running in “om” (distraction-free) mode.

I am trying to customize the CSS for #findInput (basically the width of #findInput) when running in “om” (distraction-free) mode, however the custom CSS is down-prioritized when #findInput receives focus (by #findInput.focused).

This is not an issue in non-distraction-free mode, as there is no CSS overloading that happens when the #findInput receives focus.

The above issue makes it impossible to be able to customize the search field in the distraction-free mode.


Hello Saurabh,

Could you please tell what exactly you’d like to do with CSS? Just increase the width of the #findInput?
You can specify a couple of CSS rules, like #findInput, #findInput.focused - would it work?


Hello Kirill,

Yes, I have already tried to customize the width using #findInput and #findInput.focussed.
But that does not work due to the issue I described in my post i.e. my custom CSS is down-prioritized when #findInput receives focus (by #findInput.focused) (e.g. when it has a search filter).
I have tested this in distraction-free mode.

However, after playing around, what did work was setting the following CSS
span#ffContainer {
width: 200px;
With this I am able to set the width. I am not sure if this is the ideal solution, but it does work as compared to #findInput which does not work.

Hi Saurabh,

The correct way is indeed to set width on #ffContainer , as the inner field gets its width from the parent.


Great, thanks for your confirmation Kirill :blush:

1 Like