I have developed a MSFS toolbar app using tabulator.
https://github.com/daveblackuk/VSR
Users have noted that the MSFS internal browser does not render certain icons in tabulator correctly (although Chrome does). These include cell overflow indicators and menu icons. Whilst I recognise this is an MS bug it is likely to be way down on their priorities.
Missing overflow
I am therefore considering modifying the CSS or JS that renders these elements, by either removing them or replacing them with something (possibly an FA-Icon or img) - can someone point me to the right elements, as the element inspector in chrome does not distinguish them from the cell?
thanks
/DB
Related
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.
I am troubleshooting performance issues on IE 11 with an existing HTML page which is quite big (table with a few hundred rows containing links).
I noticed with the F12 UI responsiveness tool that the lagging is caused by many "Layout" events generated as soon as I move the mouse anywhere hover the page and which basically recompute the style of all elements (including the table cells) even if the mouse is on the page's header section.
From the documentation:
•Layout: Changes were made to the DOM that required the size and/or position of all affected elements to be computed.
How can I find the cause of this issue?
I guess there is some :hover CSS style somewhere that causes this full style recomputing, but how to find out which one?
Well it seems that the performance issue was caused by the excessive number of CSS rules which was beyond the limit described here: Internet Explorer's CSS rules limits
I have a responsive Drupal Zen subtheme that I hacked together about a year & a half ago from some CSS & HTML that a non-Drupal designer handed off to me for my website. I've known that in certain layouts, it is buggy, and needs to be fixed, but I just haven't gotten around to it. After repeatedly reaching out to a local Drupal developer (and offering to pay him), I've gotten tired of waiting, and just need to fix this thing.
My bounce rate for folks on mobile devices is awful.
The URL is http://developcents.com. The homepage looks decent on any device. Internal pages need a lot of help, though, when viewed in certain screen sizes (including mobile devices). Let's use http://developcents.com/blog as an example.
In the below scenario, my question is not how to find the CSS files themselves. Rather, my question is, how can I find the necessary CSS settings using Firebug Lite, so that I can debug the CSS through my browser, instead of having to manually update each CSS file every time I want to test a change?
I can't find the actual CSS-styled divs, blocks, etc... causing the layout to break under certain dimensions. I know how to find, and edit, the CSS within the CSS panel, but I can't track down the specific CSS in this instance.
Additionally, as a secondary question, if you want to provide pointers on what I actually need to change, then please be my guest! But if you point me in the right direction on how I can go figure it out myself, that's fine too. :)
Let's get on to the scenario (which you can easily see by testing it yourself):
When I resize my browser window down to a certain size, the links & tweets section in the left sidebar move over to the right, so that the left side of the navbar aligns with the right side of the header area, while the content spans the full width of the page, except for the left margin, which stays in place but gets wider. Basically everything below the header gets screwed up, and it's easier to see the problems than explain them (so go test it).
Using Firebug Lite in Chrome, I can't seem to find the left margin for the "main" content area (see this screenshot clearly indicating the yellow margin), nor can I find the CSS for the navbar / tweets block (which I presume is some sort of float).
To modify the CSS within Firebug or Firebug Lite just select an element inside the HTML panel or inspect it via its inspector. Inside the Style side panel you'll see all CSS rules applying to the element.
Clicking the name or the value of a CSS property opens an inline editor to allow editing it.
On the right side of each rule you'll see the name of the style sheet, which contains the rule. Hovering it displays you the full URL and clicking it allows you to inspect it within the CSS panel.
You can also edit the styles directly within the CSS panel, which lists all style sheets available on the page.
Note: The changes you do there are not permament, i.e. on the next page reload they are gone! To make permanent changes you need to edit the files on the server.
Also note that I'm referring to the panels within Firebug. The panels within Firebug Lite basically work the same, though may look and work a little bit different. Furthermore Firebug Lite is not maintained anymore, so there's no guarantee that everything is working as expected.
I just spent an hour troubleshooting an issue I had were all my paragraph elements were shifted down.
This happened after I moved the design from jsfiddle.net to my web host.
I killed an hour before I finally realized I needed to insert
p{margin:0px;}
and all was well...well still off by 1px;
Questions:
Why did this error not occur in jsfiddle.net?
Why does FF CSS Debugger not let me know that there is a margin in there or where it came from. I don't know what is was set to but it was not 0px;
I'm trying to learn from "my mistakes" so I can know what to expect next time.
Web browsers set their own default values for rendering HTML elements. This includes margins, paddings, font sizes etc. When you create a HTML document with no CSS you can see lists, paragraphs and headings are formatted in a default way.
Debuggers tend to show the values that you have applied to the document in your CSS.
To get around these sorts of inconsistencies (browsers use different defaults) some people use a 'reset' CSS file that removes this behaviour by setting as much as possible to 0.
Take a look at http://meyerweb.com/eric/tools/css/reset/
I have a page which appears just fine in FireFox / Chrome / Opera / Safari, but appears incorrectly in Internet Explorer. A quick search reveals many issues with DIVs in IE, but none of the items appeared to address this issue.
The issue is that DIV appear to expand to the entire width of the browser, in Internet Explorer; this behavior is not replicated in any of the others.
Code is here: http://pastebin.com/c46uB7GP
CSS is here: http://pastebin.com/TXWWM2Qu
IE rendered image is here: http://imgur.com/Pciv5
Chrome rendered image is here: http://imgur.com/8kwd4
Any help would be welcome in resolving this discrepancy.
Thanks,
R
You have no layout width/height specification in your current code.
Put the content inside an enclosing div that has a width specified in pixels.
It's also better practice to identify your divs with classes (or IDs, if there is only one of them) and define the actual CSS in the CSS file and not in the HTML. This way you can separate presentation from markup, so that you could send the same HTML to, say, a mobile device, but with a different CSS file for that device.