I have this very weird IE11 behavior which occurs with some of our customers out of the blue.
We have a large table filled with several codes. Every code has its own (background) color assigned. Say the code is SOS, the css for its class is:
.cellSOS {
background-color: #ff1837;
color: #ffffff;
height: 18px;
}
The HTML for a td looks like this:
<div class="cellSOS" onmouseover="anyAction()"><p>SOS</p></div>
In this case there are +/- 120 different codes.
If I load the page in IE11 the (background) color for all codes are shown correctly. Now the problem: if open the same page in a new tab, all codes have a (background) color, except SOS. The same problem when the page is opened with window.open.
If I use the developer tool (F12) and examine the cells, all cellXXX elements have their style defined (the same format as .cellSOS). But when I examine a cell containing SOS, the style is not there.
I tried moving the class within the css to another position to see if that gave another result, but still it was SOS without (background) color.
I compared the HTML for the page displayed correctly and the faulty page and they are both the same.
The problem occurs not with all our customers, but when it occurs it is always just one code that gives this problem and in that case it is always the same code, no matter where I define the style.
I also tested it in IE8 and there it shows fine. FireFox and Chrome also display correctly.
Solved, sort of:
I have found the cause, but not an explanation.
The codes used are activities, used in a planning system. There are also users in this system. There was a user with the code Sos, and that caused the cell for activity SOS to display without a style.
Note: there is no connection whatsoever between the classes for activities and users.
Also a fun fact: if I change the user code to SOS (all uppercase, now it is exactly equal to the activity code) the problem does not occur.
Related
I have this site here (using bootstrap 4.1.2):
https://secure2.convio.net/cco/site/SPageServer/?pagename=RFL_NW_QC_Impact
And for some reason the dropdown button in the top right works on mobile, and on most of desktop but screen sizes between 786px to 991px won't work, any smaller or larger and it works perfectly.
Someone else created this page so I'm trying to help fix the issue but I can't pinpoint what's causing it. Doesn't seem like a situation where z-index would need to be used because it can still be clicked it just doesn't expand.
I checked the console and fixed the errors that came up but that still didn't solve the issue. Normally it's on mobile where I have this problem because something is overlapping the button but it doesn't seem to be the problem this time.
any help would be greatly appreciated.
thanks!
Opening/closing the menu is done by two custom functions contained in a <script> tag placed in <head>, on lines 187 and 195, respectively.
Each of them has the entire body of code wrapped in a condition:
if ($(document).width() <= 768) {
...
}
Change both conditions to if ($(document).width() <= 992).
You also have another, potentially bigger problem:
On line 391, you have …</script>, ending the current script abruptly, which is a sign that code was copy/pasted from a browser source code, without properly viewing the entire source code (when viewing large chunks of code, Chrome shows the first n lines and hides the rest under …, which acts as a link to the rest of the code). I'm surprised your console isn't bleeding heavily.
The proper way to retrieve the source of a particular tag is to right-click on it in dev-tools and select "Edit as html". In the opening editor window, you can Ctrl+A, Ctrl+C to copy the entire contents of that tag.
I am making project in Angular 5. When I inspect the CSS there is tag. If we want to change or find out that CSS is coming from which file basically or which line number of that file (like we do in normal html page). How can I find it?
With angular, the CSS is injected straight into the html page during compilation.
Therefor it's not possible to see where the CSS came from with the DevTools.
However, it is possible to see the CSS styles applied to an element, if you want to find out which file it came from, you will have to search the project.(ctrl+shift+f)
If you're using Google Chrome, you can use the developer console. Safari has a similar interface, but I'm not as familiar with that.
To access the developer console on Chrome, use keys Cmd-Option-I and you should see a console pop up on the right of your browser window. Next, if it isn't already selected, select the Elements tab at the top. You should now see the html that your browser rendered into the site.
Next, you'll want to select the element you want to inspect. You can either do this by accessing the nested HTML structure directly, or if you select the mouse icon at the top left of the window, you can select an element on the webpage and it will be expanded in the developer console.
Once you've selected an element (it should be grey/blue highlighted), you can see its styling at the bottom of your tab. The styling is in decreasing hierarchy order: the top elements override the bottom ones. You can see the styling is grouped based off of the id/class that it is applied to and at the top of each section is the file line of from which the styling came. Click that link to see the file!
Our team (not only my computer) has a wierd rendering issue for Angular 2, that only happens in Chrome.
Namely, when navigating the app or refreshing in mid app, many of the items in DOM are invisible. EG. paragraphs and headers that have text in them, but the text is not rendered for the end user, but the text is seen in the inspector DOM.
The DOM will regain visibility if you edit a random CSS attribute in the inspector. This CSS doesnt even have to be applicable to the invisible DOM item at hand, ala. the invisible item could be a paragraph in the header, and switching a random footer span-s top position on/off will make the header paragraph regain visibility.
Before toggling a random CSS element
After toggling a random CSS element
This happens on pages that have a fixed loader applied to them, eg. a component that has position fixed, a superhigh z-index and encompasses the whole screen. This page loader is displayed until ngOnInit finishes, meaning it is pretty fast most of the time. Disabling this loader seems to fix the issue.
This also sometimes happens to text in {{ var }} tags, when the var value is loaded after the page has loaded.
We have tried toggling the loader with either
*ngIf="true/false"
OR
[style.display]="block/none"
Neither of these solutions work, some of the dom is still invisible.
Does anyone have a clue as to why this happens?
I think this question has been answered here: custom #font-face does not load in chrome (chrome custom fonts not rendering)
I have done a quick test and it seems to have fixed things.
Basically I was including the custom font many times (each time a SCSS file was added to a component), so I have moved it, so it's only being loaded a single time, and it now loads fine.
The issue is multiple inclusion in google chrome, I face similar issue when using angular4 and material lite.The problem is i imported fonts in every component and fixed it by importing font in single main parent component.
I am facing a strange issue, Below are the steps to reproduce it
Close all instances of a browser (any) and then run the below link, notice that the styles don't get applied.
https://libenc.iaea.org/iii/encore/home?lang=eng&suite=def&advancedSearch=true&searchString=
Go to this link in adjacent tab - https://libenc.iaea.org/iii/encore/?lang=eng
Now, refresh the page with the first link, the styles gets applied.
If you compare the page source at stage 1. and stage 3., you can notice that the source in 3. contains these additional includes
What is causing this to happen? Is there any way to have these styles included while at stage 1.?
I don't have access to modify these pages since its hosted by another vendor.
UPDATE:
Below is almost exactly similar link from another user of the same vendor which works perfectly.
http://encore.lipscomb.edu/iii/encore/home?lang=eng&suite=cobalt&advancedSearch=true&searchString=
I've been asked to fix a few bugs on a website, and one of them is throwing me for a loop. Due to the style layout of this particular site, when a user selects and copies text from a specified area, they copy rich text data which if pasted into a rich text editor, results in a large black text on black-background blob.
Ideally, I would like to strip all style data, or somehow enable plain text copying on a particular set of data.
Is this possible? Or would I have to resort to something like a a Flash applet like what GitHub uses for Git URLs?
If you're happy with using JavaScript to solve the problem you can capture the "oncopy" events (credit to #FirstZero) on the elements you wish to restyle, and then restyle the element using JavaScript and style it back again after a timeout.
If you are okay using jQuery you can use JavaScript similar to the following:
$('p').bind(
'copy',
function(e) {
var copyElem= $(e.target);
var defaultColor = copyElem.css('color');
copyElem.css('color', 'pink'); // Change the color to pink for copy
window.setTimeout(
function() {copyElem.css('color', defaultColor);}, // Change it back
1
);
}
);
(Try it out in jsFiddle)
Note that this would be neater if there existed an onaftercopy event, but unfortunately there doesn't seem to.
I've only tested the above solution in Chrome, but it should work in Firefox (since 3.0), latest versions of Chrome and Safari, and in Internet Explorer. It will probably not work in Opera.
Many many years ago, I made a custom form that replicated the look of a menu on a video game. At the time, Firefox didn't allow many form UI widgets (Firefox 2.something?) to be styled with CSS. Apparently in the last few years that has changed.
What I wound up doing to resolve this problem was creating a very large input text-box with the content passed in via the value="" attribute. (<input type="text", not <textarea)
Despite the ability to style input boxes and their content, this information is not retained when copying the text itself. So I completely side-stepped the issue, and the fixes are live!
It was quite a bit simpler too, absolutely no-JS required.