IntelliJ doesn't support the Bootstrap CSS classes autocomplete - javascript

I work with a Java/HTML/JavaScript/Bootstrap project. When I work in the front-end, IntelliJ doesn't autocomplete the CSS classes for the Bootstrap.
What I see over the online that the people have issues when they tried to reach the Boostrap over the online. In my case, I have it downloaded locally in the project.
Btw, I use Ultimate edition if someone is wondering. What do I need to make it work?

It seems that the path to bootstrap.min.css is not resolved as it's highlighted in yellow.
Check that the path is indicated correctly. As far as I see, your 'css' folder is in 'static' folder etc.

Related

Problem with transition in Bootstrap 5.5.2 on bundle.js

I tried to implement zoom.js used to zoom images like in medium site.
I linked both the css and js file, it works. But whenever I zoom out the transition doesn't work. I suspected the bootstrap's bundlejs file. I downgraded from 5.2.2 to 3.0.0 and it worked fine. I exactly don't know what's happening, please help me with that.
Thanks in advance!
I didn't knew what you have written in your code as you haven't attached it but I think what you have done is that you used code from the old bootstrap (3.0.0) and that code is changed for bootstrap 5.2.2. Bootstrap changes it's code a little bit in some versions and make documentation of it very clearly. You should go to it's documentation page for more assistance and you can also post your code here if you are unsure what is changed in bootstrap 5.

CSS Variables Polyfil - IE11 for LitePicker JS

I am using a DatePicker js library called LitePicker JS for a project which has been flawless so far. It uses no dependencies and has been easy to style. The only issue is that it does not work in I.E11 due to the litepicker using CSS variables. The documentation on the LitePicker Js library site recommends using an ie11CustomProperties polyfill to make it work but It. I installed the script via npm - tried it, the script does load fine (i can see it in the header using dev tools for IE), the datepicker opens when you click in the form field but the styling is still all broken in I.E11.
From me checking one of the CSS properties using dev tools, this is what is happening:
instead of width: 266px;
the browser is reading it as:
-ieVar-width: var(--litepickerDayWidth);
Which is incorrect.
As much as IE11 is ridiculous to need to support these days unfortunately I've been told it needs to work in it. If anyone has any experience with this polyfill could I get some advice on what is going wrong? This is the LitePicker:
https://wakirin.github.io/Litepicker/
and this is the polyfill:
https://github.com/nuxodin/ie11CustomProperties
Any help would be massively appreciated.
Thank you
Hi i am the author of this polyfill.
To make css-variables work, i have to rewrite all the stylesheets.
In IE11 width:var(...) fails and is skipped by the css-parser.
Bud -ieVar-width: var(...) is not skipped and the polyfill later can read it.
If you can make me a demo on https://jsbin.com/, I can check it out.

VS code Intellisense support in PHTML-files for inline css / inline javascript

I am using Visual Studio Code since a few days and I was wondering if it is possible to have support for Intellisense inside inlined css-blocks and/or inlined javascript in '.phtml'-files.
I could not find a solution online only a few people complaining about this not working from a few months back but I nothing that worked for me.
It would really help me a lot if someone has any idea how to solve this or at least a step in the right direction, or if I have to move the css and js into external files (of course thats better(!) but thats not the point here ;))
Thanks in advance.
This works for me after 2 changes in vscode.
User settings
I added below to the user settings
"files.associations": {
"*.phtml": "php"
},
Extension
Installing the intelliphense extension
And now both php as well as css intellisense works
Make sure you have no other conflicting extension enabled which may cause issue.
Also do have a look at the below open thread
https://github.com/Microsoft/vscode/issues/670

FontAwesome [Webpack] not loading

I'm currently developing my Cortana-App and have a big problem with FontAwesome :)
Since I recently switched to React + Redux and Webpack [Better Structure + Less Space] I had to everything new.
And now comes the problem, I can't use FontAwesome properly. It just displays a white square... I checked many topics on this [Directory Issues, not properly set up webpack-loader], but didn't found anything that fixed the problem. No errors in console of webpack, no errors in developer console.
Here's the link to my project:
https://github.com/khayalan-mathew/gymdonapp/tree/feature/react-redux
The ReactElement i use font-awesome in is:
https://github.com/khayalan-mathew/gymdonapp/blob/feature/react-redux/src/components/test.jsx
I hope somebody can help me :) If you have found the right solution please send a pullrequest or write it down below
-Mathew
There is a known issue from css-loader generating wrong file paths. This won't happen in production build, but still annoying when it render squares in development mode.
Until this issue is fixed, you can disable css-loader source map to see the font rendered correctly in development. Find somewhere in your webpack config that write css?sourceMap and change it to css.

Foundation 5 JS not working in Rails app

I am trying to get Foundation 5 javascript components (any of them) to work in a Rails 4.2.0 app, but nothing I have tried seems to work. I am using the foundation-rails gem, and have followed the documented steps to install it.
To test that Foundation JS works, I've inserted the basic HTML for a tooltip, explained here, to show a tooltip link:
<span data-tooltip aria-haspopup="true" class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
On the page, the tooltip link is styled correctly, however, the tooltip function itself does not work and falls back to the system alt text, as shown below:
My first guess was that there is something wrong with the way I included the Foundation JS files, However, I have double-checked the source for pages in my app, and they all seem to be there:
I have also verified that $(document).foundation() is being included in the Rails app's application.js:
The JS components of Foundation still don't function, even if I place $(function(){ $(document).foundation(); }); in a script tag right before the element that it affects.
How can I debug this? Is there something I can run in the JS console to figure out what is going on?
It turns out I was able to fix this right after I applied the bounty! It seems the issue was somehow related to how Rails caches assets in development environments (this article says a little bit about it).
Basically, I had recently upgraded Foundation 4 to Foundation 5, and I didn't realize it but the SCSS assets being served were still Foundation 4's assets, not those of Foundation 5. I accidentally figured this out when I restarted my computer and all of a sudden tooltips worked.
If anyone else has this issue, I would try wiping rails cache by running the command rake tmp:clear and seeing if that fixes it.
Yeah, you can add
config.serve_static_files = true
in your development.rb config file and make sure you don't precompile, this makes rails load the assets from the original location every time, which reflects changes that are made instantly.

Categories