I'm writing a website that uses a rich Material Design theme on top of Bootstrap 4. So far I have been able to make all the browser chrome match the site at least somewhat (Chrome's autofill indicator being the most difficult to date), but ever since I started developing in Firefox Quantum, I'm running into difficulties hiding the focus ring around input fields:
According to the MDN docs, I should be able to apply the outline: none property to input:focus or input:-moz-focusring, however none of these seem to work. I can see the property showing up in the style inspector, and Firefox doesn't show that it's being overridden by anything, but the focus ring still shows up.
I understand it's important to have indication of focus, however seeing as I already have my own clear indication of focus, I would prefer to hide the browser-provided one as it interferes with my styling.
Okay, so, I solved this while trying to reproduce it in JSFiddle (which I wouldn't have been able to do). It's ridiculous.
On my site, I'm compiling Bootstrap and Material Design from source along with my own SCSS so that I can override the colors and options for the two. It turns out that Material Design overrides the enable-shadows option for Bootstrap, but only if the SCSS is referenced for both, so it's impossible to reproduce in JSFiddle (where the SCSS has already been compiled to CSS).
The offending rule is in Bootstrap's mixins/_forms.scss file under form-control-focus. It's new in the latest minor version of Bootstrap, apparently, because I've tested in Chrome since updating and the rectangle shows up there, too (whereas it did not before updating Bootstrap). The rule won't show up in the inspector because opening the inspector unfocuses the control, and the :focus state doesn't trigger the JS event to let Bootstrap know it's focused, which led me to believe it was browser chrome highlighting the control.
Related
Some frontend form validation code is changing disabled attribute of a submit button in a form.
For the 2 states (enabled/disabled), they are different css rules applied, one of these is the text color of the button element.
Something that looks like a bug is happening on Safari/Webkit based browser in version 14+ only. The bug is not present on previous safari versions for instance.
The text of the button stays greyed out even after the button being enabled and color rules is updated in CSS rules. In the Devtools, computed property shows the proper color value (see screenshots), but it is not being applied by the browser.
Is this a known issue?
Note: I am using material-UI framework, which means there are some extra layers of code which interfere and makes it difficult to post a simplified sample of code.
But since it is only happening on specific platforms, my guess is that material-ui does not play any role in the root cause.
This was indeed a bug in Safari, affecting version 14.1 to 14.6.
It is fixed since version 14.7.
See here for the root cause.
Some more insight here too.
I am using Monaco Editor 0.22.3 in combination with StencilJS and TailwindCSS. Everything works great, except for an annoying visual glitch in the intellisense dropdown as depicted here:
As you can see, the last suggested item is partially obscured.
I suspect it might have something to do with some style coming from TailwindCSS, but I'm pretty much at my wits end here. I tried to use the F12 element inspector to see if I can find some hints, but that is proving to be close to impossible since the intellisense dropdown disappears as soon as it loses focus.
Any hints would be much appreciated!
UPDATE 1
Here's a screenshot with a bigger editor to demonstrate that the dropdown itself does not appear to be clipped:
UPDATE 2
Here's an animated gif showing the issue when trying to debug the HTML elements using the browser developer tools:
As you can see, the dropdown disappears as soon as I click anywhere else.
The issue comes from a fairly common css class being used: .tree. Libraries such as tailwindcss add padding-bottom to it for example. To undo some of its additions for the monaco editor we added the following to our css file:
.monaco-editor .suggest-widget div.tree {
white-space: unset;
padding-bottom: 0;
}
And to get get to that solution for other libraries and styling artefacts:
It should have been quite easy but the suggestion dialog has a tendency to hide when we try to observe it. so a UI guy and I spent a while going through the playbook to try to debug it. The only successful way to inspect it was to abuse the JS debugger by running (which was a hint from a stack overflow post that I'm struggling to find to give credit), and just cause the JS engine to pause:
Run:
setTimeout(5000);
This gives us 5 seconds to get the suggestion window to show (or set to a relative amount of time to the problem). After which, you could mostly inspect it as normal with a quick shortcut:
ctrl+shift+c that brings up the debuggers element selector.
Here we are, the suggestion was from the following post:
How can I inspect disappearing element in a browser?
break on subtree probably would have worked, but we became a bit impatient stepping through the changes. ctrl+ / didn't seem to help in this case, which left the odd setTimout to save the day.
The drop down is clipped at the editor's boundaries. I actually wonder how you can see the last empty part outside of the editor.
For inspection: use your browser's dev tools to see how the containers overlap. This will avoid that the editor hides the drop down.
Update
After your update I think now that somehow the styles are messed up. You will have to figure out a way to show the popup and still navigate the DOM tree in the developer tools. Try to locate the parent and see if that popup is only hidden (it still shows up then in the tree) or if it is dynamically created or is a portal, which lives in a completely different part of the tree.
If that cannot be done then try to disable all CSS you have and see if that solves the issue. If so enable the CSS piece by piece to find the culprit.
I have encountered an annoying problem while trying to debug some CSS in Chrome. I am rather new to CSS, and using Chrome's "Computed" window in the CSS developer tools has been very handy in figuring out where CSS properties I'm trying to assign are being overwritten later down the chain. (Please feel free to correct any incorrect terminology so I can be on the same page).
Here's an example of how it helped me successfully change the color for an active jQuery UI Tab:
http://1drv.ms/1yJzyec (don't have enough rep points yet to post a picture. This goes to my OneDrive.)
I need to use this approach to figure out what's going wrong with my CSS for a hovered or focused element. Here's the problem: as soon as I click into Chrome's developer tools to see the chain of inheritance for a specified element, it is no longer hovered/focused because I've clicked into the developer tools, preventing me from seeing the inheritance.
Are there any other tools out there that can help me dissect an HTML element's CSS inheritance chain in real-time?
Thanks!
Using Chrome developer tools, you can force the element to be in the hovered state.
Click on the Toggle Element State icon (dash-bordered box with pointer) to show this.
I am writing some CSS files, but when I make a mistake, Chrome appears to just silently ignore the parts that I screw up, and renders the rest.
This makes it annoying to debug since I can't figure out what is going wrong.
So, is there a way to get Chrome to "scream at me in big red letters," so that I can spend less time finding the error and more time fixing it?
While you can not "debug" CSS, because it is not a scripting language, you can utilize the Chrome DevTools Elements panel to inspect an element & view the Styles pane on the right. This will give you insights as to the styles being overridden or ignored (line threw). The Styles pane is also useful because of it's ability to LiveEdit the document being inspected, which may help you iron out the issues. If the styles are being overridden, you can then view the Computed Style pane to see the CSS that is actually being utilized to style your document.
To bring up the Chrome DevTools window, hit Ctrl+Shift+I in a Chrome browser tab. (Command+Opt+I for a mac)
For more info visit https://developer.chrome.com/devtools/index
As CSS is not a scripting language, you cant properly debug it. Anyway if you know where it goes wrong you can try to tune it by hand.
Aditionally you've got the w3c validator here: http://jigsaw.w3.org/css-validator/ which may give you some feedback
I'm using the Sencha ExtJS Framework in Version 4.05 and i have the following problem. I am displaying Ext.Grids which have a pagination toolbar at the bottom of the Grid. On the Sencha Sample Page the Grids will display some buttons (first-page, prev-page, next-page, last-page, refresh) with icons on it.
Unfortunately the icons are not displayed in my Grids:
As you can see, the buttons are actually there, and they're working correcrly, only the icons are not displayed.
The references to the images are correct and the images are there and accessible for the browser. (If i view the css of the button in Firebug and hover the imageurl it will display the correct icon).
One thing i noticed is, that for some reason the <span> Element which should display the icon is "grayed out" in the firebug view. (On the Sencha example page it is not).
The CSS of that element looks fine for me:
Note: The complete CSS File used can be found HERE
A short note on the Theme: i made this grey theme (named "documents") just by changing the main colour of the .sass template and compiling the ext-all.css to a new one for my theme. So i didn't change anything with the icons.
Any suggestions what could cause this problem?
Hard to debug without access to the actual code. However, I noticed that both in the CSS you copied above as well as the css link you posted (which was supposedly the whole css), that neither set of css (that I could find) had any reference to the x-btn-icon class by itself, and yet that is the class (along with x-tbar-loading) that is on your grayed out span element. So, what is that class doing? Where is it defined? There may reside your issue.
EDIT: I went to the Sencha website and firebugged an icon on the grid sample. When I deleted the x-btn-icon class from the element, I believe I duplicated your problem. So it seems that the necessary definition of that class is missing from your css. On their site it is defined in the ext-all.css.