I've just downloaded IntelliJ IDEA 15 and am having issues with CSS class autocomplete from linked stylesheets. An example is when I link Bootstrap's stylesheet in the header as shown below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
The CSS classes don't autocomplete. The only way I've been able to achieve this is by actually attaching the stylesheet within my project. On the contrary, my JavaScript linked assets show correctly and can also be referenced within the project. I have downloaded most all of the necessary plugins including LiveEdit, Emmet, CSS-x-fire, and all other necessary tools.
If anyone can help me with this, it would be greatly appreciated. This software seems to be very robust and I'd like to continue using the IntelliJ product suite.
Consider to remove Web facet from your project module. (Open the project structure dialog) It helped me in similar situation.
Related
I am working on a reactJS application that uses ant design for the UI. Recently we released this application to production where the computers are pretty locked down. This application is an intranet application and these computers have no internet access. So, because of that, the ant design icons on the modals were showing up as empty boxes. I did some digging and saw that the icons are using CSS classes.
For example, this is the CSS class for the red error "X" on the error modal:
.anticon-cross-circle:before
{
content:"\E62E"
}
I'm not too familiar with the CSS content attribute so I went to www.w3schools.com and read up on it a bit and tested this particular content value on their Try It page for this attribute and I got the empty box that I got in my production environment.
Does anyone know what needs to be done to import these icons into my project so that they can be used offline?
Thanks
What I think is happening is that Ant Design is defining the CSS font definition with a URL to the corresponding font-file. Since the computers are offline, it cannot find those definitions.
In the documentation I see that they also provide SVG Icons, which should work completely offline. I think this is worth a try. The steps to implement this can be found here and it should be available from version 3.9.0: https://ant.design/components/icon/#SVG-icons
Have you tried downloading the icon library into your project folder?
https://github.com/ant-design/ant-design-icons/tree/master/packages/icons-react. Looks like they have assigned their own codes to their own icons so you'll need to have them offline.
You will nessd the css file tabler-icons.css and the woff file tabler-icons.woff and assign a font-family named tabler-icons within your style.css using #font-face
I am trying to build a new design on an old system that is using DOJO, eventually we are going to move to AJAX to handle the data calls. Is there a default or minified CSS file so I don't have to use their themes? (i.e. Claro, which is the theme that was and still is applied)
It says you can make custom themes, but there has to be a bare bones version out there somewhere.
Thanks for your time.
The bare minium CSS is available in dijit.css
(you can see the file on the CDN: https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/dijit.css)
As dojo team says about this file :
Essential styles that themes can inherit.
In other words, works but doesn't look great.
So be aware it will be ugly!
But you can build your own theme starting from that.
dojo comes with out of the box the following themes:
Claro
Tundra
Soria
Nihilo
There is no really a default CSS a part of the CSS which is included in on of the listed theme. But as ben point out in his answer, there is a dijit.css which is a very essential base of CSS which other themes can in-heritage from.
You can apply them adding the following in your HTML file:
<link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css" />
<body class="claro">
Or you can use a CDN, example for claro (just change the name for css file in order to get a different theme):
https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css
The CDN version is an unique file and easy to include in your app but it is not minified.
If you need to have a minified version, you could use the dojo build to compact all your project files and included CSS for your theme minified.
More info here:
https://dojotoolkit.org/reference-guide/1.10/dijit/themes.html#id10
I use Spring and have found this answer to similar question, however it not at all satisfactory since it requires changing project structure:
Get Eclipse to recognise CSS included via context in Spring MVC project
So the question is, can I somehow set Eclipse to ignore "Undefined CSS class" warning.
It's not just about Spring, I might have some CSS classes I use in JavaScript that are not present in CSS spreadsheet or any other reason. The warning is shown on every element on html that uses css class that it cannot find, say:
<div class="js-something">Something</div>
This class is not going to be defined in .css file since it is only used in JavaScript. Same thing with Spring where .css is connected with:
<link href="<c:url value='/css/style.css'/>" rel="stylesheet" type="text/css" />
Or in AngularJS project where html files are added with ng-include. This warning is really barely helpful, it probably should be even disabled by default. I've looked all through Eclipse settings but couldn't find any way to ignore this kind of warnings. Can anybody help me get rid of those?
Allright, I've found it. Funnily enough, it is under "Validation" if you edit project preferences, but not in overall preferences, that's why I couldn't find it when searching preferences by "Validation".
In project preferences: Web Resources -> Validation -> CSS
In overall preferences: Web -> HTML Files -> Web Resources -> CSS
Finally my projects are no longer riddled with yellow markers.
I know that my question has already a huge number of topics, but I think it could be helpful for the community to have a clear answer in one topic.
This is about modifying your CSS while using Mobile Angular UI, with a bootstrap template.
This is how a project is organized with Mobile Angular UI :
bin
bower_components
hooks
node_modules
platforms
plugins
src
www
I have my index.html in src/html/ and my other webpages in src/templates.
My index importations look like :
<link rel="stylesheet" href="css/app.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
thanks to that, I can see the bootstrap template on my webpages. But I don't know how to modify it. The two solutions I saw are creating a design.css and import it after the two other .css, but it doesn't work.
I also saw that normally we should import bootstrap.min.css, but it has no effect on my webpages.
So How could I modify the global design for my webpages, like for example the background color, keeping the Bootstrap template ? Shall we go into the less files ? What's the aim of these two css responsive.min and app.min ?
How should we organize the CSS files while working with Mobile Angular UI ?
Thanks a lot !
By the way, which version of Mobile angular UI are you using ? I think those stylesheets are not available. I have git cloned the project, and i can't see them.
And now I can answer your question. If you download the framework well, you will have a src directory. In this src directory you have less/variables.less, where you can change most of the customizable elements of your interface.
Then you gulp build again to have appropriate dist/css/*.css elements.
Hope that help.
In my asp.net mvc application, I'm using bundling for css. When I created a new css stylesheet and used the same id names as another page in the application, the styles on the first page were messed up.
I must be doing something wrong as I know that the same id can be used on different pages, but I don't find others having this problem when I searched the web on the subject.
Please help. Thanks.
The two CSS files are styling with the same ID (yet intended to style different pages) are bundled together and causing styling problems on those IDs.
This is because the page is loading the bundled CSS file then all the styles (from both CSS files) are applied to that ID regardless of page. The solution is to only load the relevant CSS file (and not bundle) or of course use different IDs.
id re-use throughout an application is unusual and often overcome by using class instead.
^^ summarized from comment discussion
You should be able to look in your developer tools (firebug, chrome devtools) and see which styles from which stylesheets are messing things up. Or am I misunderstanding the problem?