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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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

0
Comment actions Permalink

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
Comment actions Permalink

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

0
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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



Attachment(s):
1.png
2.png
1_src.png
-1
Comment actions Permalink

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?

-1
Comment actions Permalink

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
Comment actions Permalink

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

-3
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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

1
Comment actions Permalink

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
Comment actions Permalink

>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
Comment actions Permalink

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
Comment actions Permalink

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
Comment actions Permalink

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.