No code completion for bootstrap in webstorm

Hi,

i have a project with many partial templates and included bootstrap css.

When i have a partial template like this

<div></div>

there is no completion when typing ". Only html tag completion works.

Where is the problem?

EDIT: i just saw that my angular attributes code completion (like ng-show) doesnt't work, too. But that has worked earlyer ... :(

So angularjs autocompletion works in js-files, but not in html (attributes).

Regards Dirk

29 comments

Ok my code completion for angular is working again. I had excluded some directories like bower components. But my suggestions for bootstrap classes still doesn't work ...

0

I have created a new project of type "bootstrap". Then created a html file with a link tag to the bootstrap css file. But no completion for css classes of bootstrap, an no completion for classes of other css files ...

0

Completion from /css files linked to HTML using <link> tag should work. Please can you attach a sample project that shows up the issue?

0

I have attached my sample project. I think it is possible that i have misconfigurated my webstorm.
But i have code completion for angular and for html tags and attributes. So autocompletion in html files is enabled ... only css classes won't be shown ...



Attachment(s):
sample.zip
0

Works fine for me using your project - see attached screenshot
Can you record a screencast that shows you steps, etc.?




Attachment(s):
completion.png
0

Hello,

what steps? I type "class" then "con" and there popups nothing ...

Are there properties to deactivate that? Can i attach my exported settings and you try?

Regards Dirk

0

I'm more interested in the screenshot of your editor than in your steps actualy - just to make sure that everything looks as expected. BTW, does popup appear when you press Ctrl+Space?

0

Hi Elena,

thx for your help. Bootstrap is important for us (i try this tool and maybe we will use that in our company).

I've attached 4 screenshots:

- without any typing
- with code completion for html class attribute
- after typing "con" -> nothing happen except a little yellow lamp
- after typing "Ctrl+Space"

Regards Dirk



Attachment(s):
ws4.jpg
ws3.jpg
ws2.jpg
ws1.jpg
0

Please put cursor on 'con' and hoit Alt+Enter - what popup is being shown?

0

Oh thanks now it works. There was a popup and i've clicked the last entry (i don't know what it was because it don't appear now), and after clicking i had all bootstrap suggestions.

But what was the problem? Is that the common way to activate this?

Regards Daniel

0

This entry was 'un-inject language', I suppose... Seems you had some language ingected in class value for some reason

0

Could you please tell how to inject class completion back?
I have same issue, I've uninjected class completion from "class" attribute. Now I can't find a way to take it back :) What are default settings for css-class injection?

0

You can't un-inject css from 'class' completion. But you can define your own injections that would overwrite it (in settings/language injections, for example)

0

Then I can't overcome the same issue :)
Can you help please?



Attachment(s):
1.png
2.png
1_src.png
-1

I am working on an Angular 2 project and when I try to insert .container [bootstrap class] and press Ctrl + Space, it doesn't auto-complete the <div></div> tags inside .html file for me. Earlier it was working. Now I have to type everything manually. Why is that?

0

haven't got what you mean... How is the CSS class completion related to completing tags? What did you do exactly? Screenshots/screencast that show up the issue would be helpful

0

Hi Elena,
I have figured it out. It's working now.
Thanks

-2

Hello, Let me clear one thing ,

Yesterday I was working on a LARAVEL project (which has been completed). There I used Bootstrap 3.7.x and it works EXACTLY AS EXPECTED.

Checkout the screenshot:

Like there's 5 kind of table class in bootstrap 3 for tables (table, table-striped, table-bordered, table-hover, table-condensed). I got all of them in suggestion/completion in that project

 

But today I started another project and it is plain HTML, no framework involved. I did everything (like: imported bootstrap.css using LINK tag).

But unfortunately PHPStorm showing much less suggestion. Look, its suggesting but not all of them. I told you previously there's 5 kind of table in bootstrap, but now I'm getting only 2 suggestion (excluding 'table')

Checkout screenshot

Please help me, I am a programmer and My head is already full I cannot memorize all the bootstrap classes. Please give me a working solution. I am a kind of pro in this IDE so ask me anything.

 

NB: I did not changed any setting from my ide from last laravel project to this html project & using same version of bootstrap, so where's the problem?

 

Hope I will get some solution from you, Don't hesitate to ask for more inquires, It seems many people having this problem, so we need this eliminated ASAP, I suggest making a plugin to support all bootstrap classes suggestion, I seen 2 plugins already there to help with bootstrap but in my opinion that's are just junk. I don't want to emmet like feature (which they offer), I just need BOOTSTRAP class suggestions like laravel project.
 

0

The difference is evident from screenshot: in .php file, you get completion from all .css, .less,  etc. files in your project; in .HTML, only classes from the stylesheets explicitly linked with <link> tag are available, so you can see only classes from bootstrap.css (instead of classes from tables.less, public/css/app.css, etc)

0

I know that, I can see that in the right side of the completion, but:

for example "table-striped" is actually exists in the bootstrap.css file, I checked that manually. so why not that is showing in the suggestion? 

I think this is a bug. If I explain you in more details:

Classes defined independently like:

  • .table-bordered {
  • property: value:
  • }

is appearing in the suggestion, but

if that defined like 

  • table-bordered, table-spaced > span {
  • property: value:
  • }

then its not showing in the suggestion, this is the problem,

and I'm right in this coz if I call class called "table-striped" then it actually works (but that was not in the suggestion). so we know we sure about it that, that class exists in the bootstrap file, this is why that worked regardless of suggestion of that IDE.

 

So you know it, this is definitely a bug... Please report it to the appropriate place/person

0

Hello!

I have the same issue. Although it works in index.html where I import Bootstrap from 

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">

but neither in components html.

0

If your components html files are partials (i.e. don't have `<html></html>` header, etc.), you should normally get completion from all .css, .less,  etc. files in your project - unless you have some styles explicitly linked/embedded in your partial

0

Ok, thank you for the tip. This answer http://stackoverflow.com/a/35410548 helped me include Bootstrap dir.

1

I have an issue with the way the implicit includes are working. I use a sitemesh decorator for my page html templates that includes bootstrap.css and other resources. I then edit my view jsps without any html template code. When editing the view jsps Intellij usually picks up the css files from my webroot automatically and includes them for auto-completion.

However, sometimes I want to add an additional css file for a particular view jsp. For instance font-awesome.css on the one or two pages it is used. To do this I simply add it to the header of that particular view jsp. The problem is that when I do this, Intellij stops implicitly including any of the other css from the sitemesh template and I lose autocomplete for all of the other standard project css.

There must be a way to configure this behavior. "Always Include CSS" or some such. Does anyone know how to configure this? Any html using template files for decoration seems like it would have this issue in Intellij and that is too common a development pattern for this to be an unsolved problem.

Thanks for any help.

1

>The problem is that when I do this, Intellij stops implicitly including any of the other css from the sitemesh template and I lose autocomplete for all of the other standard project css.

as I have mentioned above, in HTML templates/partials completion includes selectors from all project stylesheets - unless you have some styles explicitly linked/embedded in your partial. See https://youtrack.jetbrains.com/issue/WEB-2223 and linked tickets

0

Wow. So there are three open issues on this dating back to 2011 and still no fix?

https://youtrack.jetbrains.com/issue/WEB-2223

https://youtrack.jetbrains.com/issue/WEB-7317

https://youtrack.jetbrains.com/issue/WEB-23986

Not even any activity visible on the issues from JetBrains personnel except passing from one assignee to another. It seems to me that this would be affecting a lot of people and the fix should be very very quick to implement. You already have the code for both behaviors (include everything, include only references from the file). A simple boolean flag in the config should allow the user to select the code behavior desired. I assume you folks have a lot to work on but it seems that a junior dev could push this out in a couple hours max.

I believe that these issues should have their priority bumped as they are not getting any attention at the current level.

0

Hi everyone, 

I had this problem for a long time and I don't know why but if you put <html> tag in your template the autocomplete doesn't work.

So remove the tag <html></html> 

It works for me...

0

HTML files without <html> header are considered partials, and, as I have mentioned above, in HTML templates/partials completion includes selectors from all project stylesheets - unless you have some styles explicitly linked/embedded in your partial

 

BTW, all mentioned tickets (WEB-2223, WEB-23986, etc.) are fixed in 2018.1. IDE will suggest CSS classes from all CSS files when no variants from the linked CSS files or within the <style> tag are found or if code completion is invoked twice.

 

 

0

Please sign in to leave a comment.