Vaadin missing icons of all components - icons

We use the Vaadin valo-theme and component icons like the arrow of the combobox or the icon of the datefield are missing. We tried to put font-awesome manually, but the icons are still missing. We can't explain why.
Can somebody help?
My log output is full with stuff like this:
INFORMATION: Requested resource [/VAADIN/themes/valo/fonts/open-sans/OpenSans-Light-webfont.woff] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.
I'm not sure if its related to our problem.
Instead of the icons there are just this signs

We changed the Java version of the project form 1.7 to 1.6. That solved the problem.

I just had exactly the same problem.
We are using Wildfly 8.2 to deploy the application. The problem occured by enabling GZip compression for the server (following this blog post: How to enable GZIP compression in Wildfly 8.2).
Disabling it made everything work again. Currently I am still investigating why this is a problem.

Related

How to solve CSS intellisense for VSCode not working?

Well, this is embarrassing, basically, the CSS Intellisense stopped working out of the blank, not sure if I can relate it with the installation of TailWind Intelissense extension, interestingly it works on SCSS files, but if I try it in a vanilla HTML + CSS project it does not work. I am using Fedora 35. I already tried restarting the editor as recommended on the official website.
I had the same issue. So, I solved it by adding
"files.associations": {
"*.css": "css",
"css": "css"
}
to my my settings.json file. Don't know is it is going to help you, but anyway. Good luck!
I know this is a little late for the answer, but I had the same issue when using tailwind.
Given that you are using tailwind, most likely there is a chance you are using postcss, which you can confirm by checking postcss.config file.
If that is the case, then install the postcss vscode extension, and follow the instructions:
Open the command palette and select Preferences: Open Settings (JSON)
Add the following configuration:
{
"emmet.includeLanguages": {
"postcss": "css"
}
}
This should fix your css autocomplete, it is what worked for me.
When I'm using a basic style.css file, even after adding "postcss": "css" in "emmet.includeLanguages":{} CSS Intellisense still doesn't work.
Disabling the postcss VSCode extension allows CSS Intellisense to work properly for me.
if you install extension POSTcss try to disable
Another late answer but it seems this is still an issue when using the extension PostCSS Language Support.
Solved by uninstalling that extension and replacing with PostCSS Intellisense and Highlighting.
Here's what the official website says if IntelliSense isn't working:
Troubleshooting #
If you find IntelliSense has stopped working, the language service may not be running. Try restarting VS Code and this should solve the issue. If you are still missing IntelliSense features after installing a language extension, open an issue in the repository of the language extension.
…
A particular language extension may not support all the VS Code IntelliSense features. Review the extension's README to find out what is supported. If you think there are issues with a language extension, you can usually find the issue repository for an extension through the VS Code Marketplace. Navigate to the extension's Details page and select the Support link.
You should probably try:
Disabling any extensions that may be related to the issue. You mention that it may have to do with the TailWind Extension; try disabling or uninstalling that and see if the intellisense starts up again.
Restarting the editor again.
Filing an issue on their GitHub page if it's still not working.
I came to this question having a similar issue and found I just needed to manually change the language mode in the bottom right to CSS rather than Post-CSS. Obvious in hindsight, but just recording here in case anyone hasn't tried it.
I have installed this extension in vs code. CSS, HTML and Bootstrap intelligence showing up.
IntelliSense for CSS class names in HTML
Follow these steps:
Click on Select Language Mode option in the Status Bar of VSCode
Click on Configure File associations for .css in the modal opened
Configure the language you want to associate your *.css files to. Here in our case, you need to select CSS
Reload VSCode window if changes don't get reflected

Vaadin Valo Stylesheets

I'm having a problem using Vaadin (in Eclipse) and its associated styling engine Valo, and the TouchKit package. I mention all of these because I'm not sure which, if any, is causing the problem. The name of my custom theme (which imports Valo) is simply "touchkit".
I have the project running on a Tomcat server on localhost and accessible in my browser. I wanted to tweak some of the CSS so I edited the appropriate file WebContent/VAADIN/themes/touchkit/touchkit.scss. After editing this file, I recompile the theme and see the appropriate changes in the generated file styles.css. Then I go to load up the application in my browser, and things get weird.
I can load the page and, using Chrome's developer tools, see that the page requests styles.css for download, as expected. It gets a 200 OK response from the server, but when I view styles.css, it contains just a single \n. This is also true in Safari. Even using cURL to download styles.css yields the same result. In the Eclipse editor, and when I inspect it in the terminal, styles.css is ~12,000 lines long. Why can't my browser or cURL get that data?
I can view similar project demos on Vaadin's own site and the stylesheet (which should be almost identical to mine) is loaded correctly. Also, other Vaadin projects on my localhost server have their stylesheets loaded correctly (though they do not use Valo). Compiling the theme in Eclipse yields no errors. Because the issue presents itself across a variety of graphical and non-graphical clients, I'm starting to think the issue is with Tomcat. But I can get to the directory from which Tomcat serves files and styles.css is correct in that folder too. There's no apparent reason that Tomcat would be serving a blank file.
You may have guessed from the description, but I'm working on a Mac. Any help is appreciated!
PS Mods - I also asked this question over at Superuser since it wasn't 100% a programming question. However, I'm new at Superuser and couldn't create tags for Vaadin or Valo, so I'm asking here where there might be a better chance of getting an answer.
Hard to say, since your are doing everything fine. My best bet would be the tomcat implementation you are using, maybe there's something weird there. Try upgrading to latest if it's not or to a previous version.
FYI I'm using Tomcat 7.0.55.
PS: your attempts are in run/debug from eclipse or have you made a .war form the project and deployed it with the Tomcat-Manager?
Regards
add below to your gwt.xml, and touchkit is not valo aware see https://vaadin.com/forum/#!/thread/8264224/8264223
<set-configuration-property
name='touchkit.manifestlinker.additionalCacheRoot'
value='src/main/webapp/VAADIN/themes/MyTheme:../../../VAADIN/themes/MyTheme' />

Compass Bootstrap CSS cache issue

I'm currently running Compass and Bootstrap 3 through a Vagrant VM Box.
I've managed to successfully setup the project using both the Compass and Bootstrap Gem's.
I've now started writing my styles. Upon save I can see which files have been modified and if a the CSS has been re-compiled through SuperPuTTY, when using compass watch --poll. However, when either compiling via compass watch or through compass compile, I only occasionally see the changes through my browser.
I don't believe this to be a browser caching issue, as I've turned it off via dev tools, I've also tried clearing the cache, as well as directly opening up the newly compiled CSS and adding a ?1234 cache buster to the end of the URL. I'm also getting no errors upon compile (these are also normally displayed within SuperPuTTY).
I have a suspicion the problem may lay in the bootstrap plugin as this require 'bootstrap-sass' is loaded in the config.rb file, I'm currently investigating this.
Is anyone aware of any fixes for this, or aware of any issues/bugs with Compass compiling the Bootstrap SCSS code?
/------ UPDATE ------/
After further investigation this seems to be a caching issue. The file seems to be correct on the server after compiling, but when it arrives at the browser it seems to retain the old version. The browser cache is disabled, this is where my confusion now lays, as it should request a new file upon refresh.
We seemed to have fixed the problem by adding a no-cache rule for our header, and also disabling sendfile in the Apache vhosts file. This combination seems to have resolved the issue

401 unauthorized error access CSS files MVC

First things first, yes I am fully aware this has been addressed here before, however none of the solutions seem to resolve my issue. My problem is simply that I have created a new web project and everything works fine with the default code template that VS2013 has provided, the problem I am currently runing into is adding my own CSS files. This is the process I went through to add them:
added CSS folder under the already existing Content directory
Linked to CSS files in the header CSHTML (I can be sure it is linked properly as it is not a 404 error
but when i run the project i get: Status Code:401 Unauthorized (pulled form the network explorer in chrome dev tools), nothing more. I have tried everything from modifying my config file to setting WindowsAuthentication to true and even moving NTLM to the top, to going into IIS and giving everyone access to every possible function to the CSS directory, been at this for an hour and I'm simply lost, any ideas?
Edit: if it helps at all this is the erro i get when i navigate to one of the CSS files:
I found the issue and I feel incredibly stupid about it, as it turns out all of my css files had encryption set on, i simply had to turn it off: right-click
*.css file > Properties (General tab) > Advanced button > Encrypt contents to secure data checkbox.
Works like a dream. If anyone ever purchases a template form ThemeForest, be wary of that.

ASP.NET MVC does not catch styles when published

I have an ASP.NET MVC application that works fine when I run it on Visual Studio. But when I publish it, all the styles dont seem to work. Are there any general guidelines on why styles dont work for an MVC application when published because right now I have no clue on what is happenning??
Any ideas and suggestions are appreciated!
There are many reasons why your css styles might not show up.
Caching: Maybe your browser use a cached version of your css file(s). Check with fiddler or clear the browsers cache
Wrong relativ path to the css file(s): You should specify relative paths when including css files in your views (use Url.Content("~/...") for getting the right url). This is an issue when you use not the same path on your IIS and your IDE.
But the first check in any cas is to run fiddler and see
Is the browser requesting the right css file(s)
Is the server returning the file or a 404, 304, ... status code
It is possible that you have defined the styles in a new file and have not included the new css file in your project (in Visual Studio .net).
VS.Net does not publish those files which are not part of the project.
Get Firebug, inspect the element that should have the style applied and see what CSS is actually present.
Take a look at the CSS Panel and see the CSS files that are being linked (click the down arrow in the master.css as shown in the image below).

Resources