I am using turbo table for displaying data. But I am not getting borders for table. I installed PrimeNG from CLI and imported themes in styles section in angular-cli.json.
You will need to make sure the following is present :
In your index.html file the following link references:
<link rel="stylesheet" type="text/html" href="/node_modules/primeicons/primeicons.css" />
<link rel="stylesheet" type="text/html" href="/node_modules/primeng/resources/themes/redmond/theme.css" />
<link rel="stylesheet" type="text/html" href="/node_modules/primeng/resources/primeng.min.css" />
Then make sure the styles.css has the right theme import e.g:
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
Also make sure in your package.json the dependencies is there:
"primeicons": "^1.0.0-beta.6",
"primeng": "^6.0.0-beta.1"
Related
I have a ASP.NET MVC project which uses JQuery Datatables to show a table.
The problem: the css stylesheet isn't applied when links to local css file. I've tried the following:
<link rel="stylesheet" type="text/css" href="~/Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="../Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="/Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="Content/datatables.min.css" />
But this one (at the same place of my HTML) is working:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
Even current sorting column highlight from this css doesn't work!
Of course, the CSS file exists in my project's Content folder, and its contents is totally the same, because I even try to copy the file from https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css and put it in project's Content folder.
So, the question is why doesn't the first HTML link snippet work?
Maybe, a bug in the MVC (it's up to date)?
jQuery DataTables distribution includes CSS, JS and image files (in the images folder).
Use Download builder, select Download tab and download all required files.
Also you should not use ~ in your URL. Most likely that is the reason why CSS is not applied. Use absolute URL /Content/datatables.min.css or relative URL Content/datatables.min.css instead.
I'm currently working on an email template with thymeleaf in a jhipster application.
My problem is that i can't use bootstrap css in thymeleaf template.
I understand that thymeleaf is a server-side technology and cannot load bootstrap css that exists on client-side (via node_modules), but when i saw answers to these two questions question1 and question2 i tried by similarty to import my css like this
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/content/css/global.css|}" />
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/content/css/vendor.css|}" />
but thymleaf still can't load this two files, i have no errors on console but css classes (bootstrap and mine) are just ignored.
PS : global.css contains my css classes, and vendor.css is the default jhipster file that calls bootstrap
vendor.css
#import '~bootstrap/dist/css/bootstrap.min.css';
#import '~font-awesome/css/font-awesome.css';
My template is located under
/src/main/resources/mails/applicationReport.html
My css is located under
/src/main/webapp/content/css/vendor.css
/src/main/webapp/content/css/global.css
So how can i use css classes from global.css and vendor.css in thymleaf?
UPDATE
After Gaël Marziou's answser i added these two lines to /demain/webpack/webpack.common.js
{ from: './src/main/webapp/content/css/global.css', to: 'global.css' },
{ from: './src/main/webapp/content/css/vendor.css', to: 'vendor.css' },
and in /src/main/resources/mails/applicationReport.html i call these two files like that
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/global.css|}" />
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/vendor.css|}" />
but Thymleaf stills ignore my css classes
Your CSS files are bundled by webpack, so content/css/global.css does not exist in your built webapp and cannot be accessed by URL, check it by unzipping your war file.
However, you could have both bundled stylesheets and original css files in your war file by adding these files to the configuration of CopyWebpackPlugin see in webpack-common.js file.
First Grails (2.3.6) app here. Trying to add a custom CSS file to my views/index.gsp:
<html>
<head>
<link rel="stylesheet" type="text/css" href="path/to/main.css" />
</head>
<body>
...
</body>
</html>
Inside my grails-app directory, where the views subdir lives, I would have expected to see a resources or css directory, but don't see anything. So I ask: where do I place main.css so that it's available to index.gsp at runtime?
Your css should not go under grails-app/views. It should be under web-app/css/. Then you can do something like this in your GSP...
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
I've started using meteor and want to know what is a good way to migrate a HTML file that refers to many CSS files. So far, I found that meteor will automatically load all CSS files in an alphabetic order. My two questions are as follows:
Where should I locate the CSS files? (or from where I can control which directories are loaded)
Is it possible to load specific CSS files in particular order?
Here are the current references I have in my HTML file, before migrating to meteor.
<!-- Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Libs CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/fonts/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="vendor/owl-carousel/owl.carousel.css" media="screen">
<link rel="stylesheet" href="vendor/owl-carousel/owl.theme.css" media="screen">
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css" media="screen">
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-animate.css">
<!-- Current Page Styles -->
<link rel="stylesheet" href="vendor/rs-plugin/css/settings.css" media="screen">
<link rel="stylesheet" href="vendor/circle-flip-slideshow/css/component.css" media="screen">
<!-- Skin CSS -->
<link rel="stylesheet" href="css/skins/blue.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/theme-responsive.css" />
Thank you for your help! :)
There is no need to provide reference of stylesheets in meteor. Just put your css file in client/stylesheets folder. Meteor will automatically apply these css rules.
As stated by #imslavko you can find Meteor behaviour at https://guide.meteor.com/structure.html
However these rules are more relevant for .js code and .htmltemplate files: Meteor merge and minimize all .css in a single file (as long as they are provided by you and not on a CDN) so you will find a single <link rel="stylesheet"> reference in your <head>.
Remember to put all frontend files inside client folder, to avoid unnecessary server loading and availability.
So you can choose your convenient folder structure for .css files, for example put them all in client/stylesheets or use other subfolders to better manage them.
I'm having some issue with importing a .css file in my jsp within the eclipse using this tag
<link rel="stylesheet" href="css/style.css" type="text.css">
The structure of my pages is so
WEB-INF
>jsp
>css(folder)
>style.css
>home.jsp
So basically home.jsp and the css folder are parallels, a relative url like the one i'm using should be fine according to most tutorial.
Do you see some problem?
Thank you
<link rel="stylesheet" href="css/style.css" type="text/css" />
Change it to a slash.
In your structure the css folder is style and in your link it is css
<link rel="stylesheet" href="style/style.css" type="text/css">