I would like to use the flag-icon-css library in my Angular 8 project. I've managed to import it and the flags are showing, however, they are only displaying as squares. How do I get them to display as rectangles?
I installed the library through npm and added this code to my global styles file (per this answer: Can angular cli use flag icon css?):
$flag-icon-css-path: '~flag-icon-css/flags' !default;
#import "~flag-icon-css/sass/flag-icon";
This is the code I use in my template:
<span class="flag-icon flag-icon-us"></span>
I am not using the flag-icon-squared class. Still, the flag is only displayed as a square.
EDIT (Added to clarify):
If I increase the width of the span, the span widens, but not the flag itself. I also tried using flag-icon-background, with the same result.
I checked the svg image itself, and it is a rectangle, however, I noticed that it also has a lot of whitespace on its left side. So that might be causing the issue - the span is displaying the whitespace and only part of the flag.
I'd appreciate any suggestions!
The reason this is happening is because the 1x1 and 4x3 ratio SVGs are being copied to the root folder after a build - you can see if this you view the style of the icon and hover over the background image URL. The 1x1 images are being used by the CSS which is why the flags are always square - I'm not sure why this was not an issue in Angular 7.
A work around is to manually copy the images into your assets folder and manually update the CSS to point to your assets folder. The downside is that you will have to manually update the CSS every time you update the npm package.
See here:
https://github.com/lipis/flag-icon-css/issues/514
I've recently has the same problem.
I overcame this by renaming the SVG files and redirecting the paths referenced in the styling files.
Specifically, you can see the changes I made here: https://github.com/nunnsy/flag-icon-css/commit/2eabbda9daf6a53627a7d4952eae0d1164bb04fc
This is by no means a long-term fix, I just needed a quick hack personally and figured someone else may want some guidance.
I understand Angular was copying the files and overwriting the 3x4 with the 1x1 due to them having the same name (separated by folder), hence the renaming out of the folder with the size now in the file name: XY_xx.svg
Even trying to reconfigure image hashing did not solve my issue - if someone has a way of implementing this, I'd appreciate to know how you implemented it. Or, any other solution, I'll be watching this question.
I'm experiencing the same issue in debug mode but not for a production build. So if it's an issue you do not want to spend a lot of time on, know that it won't exist in a production environment, building with the --prod flag solves it.
If you don't need square ones
Fast ugly hack: change the names of folders 1x1 and 3x4
I think it is correct to download images bypassing npm
Related
I've recently updated from angular 10 to 12.
I use SCSS.
After updating I noticed my logo is behind the content and all my z-index values have # prepended to the values and I don't know the reason why nor can't find any good information on where this change originates from or what is the cause.
Nothing changed in my config files or build pipelines except src package.json updates for packages
I also use angular material as my UI components library and have bootstrap spacing module imported additionally
I know the CSS is invalid. (after build). It's valid in design time but after build in runtime it gets hashtag prepended for whatever reason.
This was NOT the case before updates
Here's the design time
Is this some new angular feature that I'm missing here. Can't find anything relevant in docs.
Is this tied to Ivy?
Edit:
I believe this could be tied to recent sass API changes moving from #import to #use statements. ng update command should (according to docs) update and refactor scss for me but that's not the case.
Once I'm done refactoring if it fixes the issue I'll post it as answer here
Update to the latest available version of Angular. I had the same issue with 12.0.1, after ng update (12.0.5) the issue was fixed.
Check if it is inheriting the z-index from parent class. If it is then place it outside the parent class.
I've built a library that will be used by several Angular applications (multiple teams and no monorepo). This library includes a scss-theme. This theme uses two SVG-files. However, I can't get it to work. The path is always incorrect.
My theme scss:
.test::before {
content: url('/test.svg');
}
I've written a Schematic that can be used by the library consumers to store the images inside a subdirectory of the assets folder of the application (e.g. src/assets/test-path). The Schematic does work as expected.
It does work when I add the following style inside the client's scss:
#import "test-company/test-lib/theme";
.a-client-test::before {
// This is just an example and assumes that the test image is located at this path.
background-image: url('../../assets/test-path/test.svg');
}
But as soon as I remove the line above (that actually uses the image from the assets folder and is not required at all). The path won't work anymore.
I've tested the following paths inside the library: ./test.svg, ~/test.svg, /test.svg. Only the latter does work but only with additional styles like the one above (that wouldn't be used) on app side. That's something I want to avoid as maybe we provide 50 icons on the library-side and it would be tedious to add these classes only to use the assets.
Some additional information:
I've added node_modules to the predecessor options in angular.json.
All other styles are working correctly. Only the image doesn't work.
I know that I can use ccsUrl: "inline" option inside the ng-package.json. However, I think this option only works (as far as I know) on styles that are used by components. But I actually copy the theme styles over after the build process. Additionally, the number of icons that are used inline shouldn't be too big, otherwise, the bundle size will increase and is therefore not an option for me.
I also don't know what is best practice for a scenario like that. I just couldn't figure out a proper way so far. But I assume writing a Schematic that copies over files is also not the best approach. Maybe there is a better way (e.g. a way to reference assets from the library but keep in mind I have the styles inside my library and the path is, therefore, complicated to figure out for all modules).
Just to make it clear again: My library has a scss file that uses an image. That image path is clear at the built time but doesn't work when used by an app. I can copy over the images, but that only helps when those images are used by the app somewhere in the styles. Then the path /image.svg works. The image as well as the scss that makes use of it are provided by my application.
Thanks for your help!
Hope you all doing great.
I am using SCSS and Bootstrap in my Angular Application and as we know once Angular app runs, it converts these SCSS files to CSS version of it.
How can I check CSS file size generated as a whole for application as I need to show some reports for optimization tasks.
Any idea. I tried googling and here on Stack Overflow but couldn't find required solution. I can't even see any CSS file in Network tabs of Browsers.
Any Suggestion?
Assuming you are using Angular CLI for your project, which uses webpack internally...
Once you build a project. A dist directory is generated in the project root. Take a look into it and you'll find all the .js and .css bundles it might have generated.
Note - The size will vary based on what kind of build you do. For a production build, the sizes are going to be minimal, for other kinds of builds, if any, the sizes may differ.
You should go first in the Networks tab then reload the page. Once you reload it, click on CSS filter then you would see all the list of CSS included in your app, with the file size.
I didnt find any css generated in Network like above answer but I did a trick.
I went to webpack folder and there I found one generated CSS. ( Searched through a random CSS Selecto ).
I right clicked and saved it on desktop. If you check the properties of this CSS file, it shows the size in KB.
Note: I'm open to other solutions if this is the wrong approach
I want to used https://github.com/twitter/css-flip for rtl support on
my project
The documentation is sparse and seems to make a lot of assumptions. I can successfully run the CLI against a .css file but not a scss file as I suspected.
I was thinking about adding a step that ran the css-flip on the compiled styles like so:
css-flip app/assets/stylesheets/application.css > app/assets/stylesheets/application.rtl.css
One, I'm not sure this is the best approach, and Two, if it is reasonable, how could I run the css-flip command on the assets after they've been compiled?
I'm not sure if this is the right approach, but I'd say you can use css-flip to generate your css files, and afterwards, I see 2 different solutions. (In the case you don't want to use Pete suggestion about the direction property, but I assume you may want some custom style depending of the orientation of the language.)
1 - depending on the version of your site, you change the asset being loaded.
2 - Or, I'd say you concat your two css files generated to put both behind a class (probably with the help of a preprocessor such as sass), and you put this class on your body, and change it whenever the user changes their language settings.
solution 1 creates lighter css file, but your user need to reload the page when they change language, whereas solution 2 creates bigger css file, but user won't need to reload their page when they change language.
Hope this helps.
I recently setup django-grappelli on my first django app. While I like the way it looks I want to customize the colors, and other CSS.
From my research, it looks like I will have to use Compass but I've never used Compass before and want to double check that this is the best method before I embark on that path!
Is Django-grapelli even the right choice for some one that wants to customize the color theme?
Things I tried
Modify the CSS in the Grappelli stylesheets but they are formatted in a way that makes it tedious.
Extend the style sheet but I am not sure where to do this for the admin.
Create a custom.css but could not figure out where to put the path
Thanks for your advice!
It seems to me like Compass is just a tool to write CSS. I've never used it, but at the moment I don't see how it could make modding the admin interface any easier than doing it manually!
Whenever I make changes to the admin (I've made changes to Grappelli, like you're trying to do), I always use what you've listed as number 2. I've never had any troubles! I can try to help you out, if you'd like to try again.
What I do first is go to my Python install directory and copy the Grappelli source from Lib/site-packages. I put this code in my project directory as a project-level app. So, if you're using Django 1.4, you'll have a folder that has your project folder as well as manage.py in it. Put the code there.
Then, using your favorite web developer tools (I prefer Chrome's), figure out which stylesheet you need to modify and which css file it's in. I do this by right-clicking the element and selecting Inspect Element. This brings up the dev tools, and at the right it tells you the css file its referenced from as well as which line its on. If you open up that css file in your favorite text editor and make changes to it, it should work!
Let me know if you're having any trouble with this. I can try to help you out further.
(and, P.S., I wasn't trying to be pedantic with a basic overview of the use of Chrome's developer tools. I was just trying to be helpful by not assuming anything. I hope you don't take it as an insult.)