I upgraded my project's Angular version from 9 to 13 recently. Since videogular2 package is no longer supported with this version, I migrated the application to use #videogular/ngx-videogular and I exactly followed process for migration mentioned on the github page.
After migration, it appears my "Play video" button and controls like full screen, video scroll are missing. This is due to absence of class on the DOM. I compared other environments we have before changes and DOM looks a bit different. It doesn't have "vg-icon-play_arrow" on the DOM at all. This is how it looks -
We are maintaining local videogular.css and I see its already imported in style.scss which is correctly mentioned in Angular.json. I am not an expert in front end and not sure how can I find out why this is class "vg-icon-play_arrow" and flex is missing on "div" element "overlay-play-container"
Any suggestions on how to approach finding whats the problem? or what might be solution?
Here is how DOM looks
Note: I already tried using node_modules css which is recommended by #videogular/ngx-videogular by directly using in Angular.json instead of project videogular.css but it gives same results. Also all fonts files are latest as per recommendation
Related
When I try and change my current CSS or add new CSS to my style-sheet no change shows up (tags are still being styled by the old unchanged code).
For example, if I delete the contents of a class and I go into chrome debug tool using F12, I can see that the contents which I deleted are still showing up - even if I clear the cache by pressing Ctrl+Shift+R, OR by pressing Ctrl+F5!
All the other files of my website seem to be updating correctly, so if I use inline styles it will update correctly.
Strangely when I go into my websites control panel and manually download the CSS style-sheet from my server I can see that the code has indeed being updated with the new code, this is weird because upon inspecting it with F12, I can still see the old code with no changes.
I am using Microsoft Webmatrix to do my coding.
I am using the Chrome Web browser.
I am using Hostgator hosting.
I've exhausted all my trouble shooting options and have been beat by something that by all means should not occur. I think I've had a problem like this before and I think that it was solved by just waiting a day for whatever magic to work but I shouldn't have to wait. A problem like this is absolutely unacceptable in a live environment. Any ideas of what could be causing this?
FIXED!
changed: https://example.com/app/source/css/main.css
to this: https://example.com/app/source/css/main.css?v=1
You could try ctrl + shift + r (on a PC) to hard reset the browser and make sure the cache isn't displaying old CSS.
One thing is to verify you are editing the correct file. I managed to have that issue one time when I had two files named the same, but one was outside the folder with the index.html and that was the one I was editing.
Add ?v=1 behind the URL of the CSS link in the head, which will force using a non-cached version, because of the different (new) file name. The number should be unique, so if you want to use this in the future, make sure to replace the 1.
If I access http://django-guardian.readthedocs.org/en/latest/installation.html I see the raw content without any styling. The CSS files appear to load fine, but not having any affect. If I build the documentation manually on my local box it works fine.
I reported the problem as a bug and found that django-guardian provides its own theme that wasn't working. As the custom theme probably wasn't required I have removed it and now it works fine.
I am trying to replicate this example:
https://elements.polymer-project.org/bower_components/neon-animation/demo/tiles/index.html
Here's my version:
http://labs.recgr.com/polymer-dev/test1.html
As far as I am concerned, it's the same thing, and I am not getting any errors in Chrome Console, meaning all the paths are correct.
Why is it not working?
Thanks.
In your version both circles-page.html and the squares-page.html differ from the example version. Namely, the content between the template tags is missing. Thus you are loading empty pages and seeing nothing. Also, in the example you had to click on a circle to switch pages, but the circles have been removed, thus, you can't click on them. Try comparing these pages with the original versions.
I have a site that I am working on and I've been running on dev mode, where it doesn't combine all the css files that I have into a single script. Everything worked totally fine. When running on prod, all of my css files is combined into a single file. This is using assetic to do so, however what happened is that everything breaks like crazy. Can anyone tell me why this is the case? Is assetic not combining the assets in the right order?
Just for reference, here's the site that runs on dev and here's the site that runs on prod
I think what is happening is that there is an error in the combined CSS file. Some errors affect parsing the rest of the stylesheet, so it just stops. It is why you aren't encountering it as bad in the individual files as it's not the entire styling of the page stopping however I do think there will be one or two declarations that are not loading in those individual files.
Have a look here at your Dev site's CSS validation. While a bunch of the errors are just straight from bootstrap and won't cause the parsing to stop altogether, there are some other errors that could affect the rest of the parsing of the sheet.
Things like this:
#order-history .
#order-history .data-block img {
That is line 73 of http://dev.shopious.com/css/3a76827_part_6_order-history_11.css
Just check through the validation results carefully and see what errors you find.
My widget does not work once deployed even though it shows no errors in Dashcode. Apologies in advance for my inarticulartness with the terminology. I am a newbie.
To create the widget, I deleted the default .js file and pasted the JavaScript plus XHTML into the HTML page and created the accompanying CSS file.
The only code I can see that is generated is the plist.
I tried opening up all the permissions but nothing seems to change.
The OSX utilities console shows errors which are on lines beyond what there are numbers for in the code.
I don't think the JavaScript/XHTML/CSS is the problem as it works when in a web page and the widget does actually work within Dashcode.
Help appreciated,
Ruby
If you're using Dashcode, don't delete the default JS. file. This is important because it has the loaders necessary to render most of the parts in your widget. You can always add your custom javascript file. It also provides code that will allow it to work properly in Dashcode.