How add jquery library or another js library without initFunctionName

Support
#1

Aloha!
I want use https://cdnjs.cloudflare.com/ajax/libs/css-vars-ponyfill/2.4.7/css-vars-ponyfill.js
I add to MainScreen a component:

<jsComponent id="polyfillVarСss" initFunctionName="">
           <dependencies>
               <dependency type="JAVASCRIPT" path="https://cdnjs.cloudflare.com/ajax/libs/css-vars-ponyfill/2.4.7/css-vars-ponyfill.min.js"></dependency>
           </dependencies>
       </jsComponent>

property “initFunctionName” requires that there be a function
How can I add this script to my page without errors?

I need to do all this because the styles in IE11 and chrome are different

#3

Hi,

The simple way to add dependencies such as CSS, JavaScript or HTML to the current page for screens and fragments is to use the ScreenDependencyUtils helper class. You can obtain dependencies from the following sources:

  • WebJar resource - starts with webjar://
  • File placed within VAADIN directory - starts with vaadin://
  • Web resource - starts with http:// or https://

This helper class has the following methods for adding and getting dependencies:

  • setScreenDependencies - sets a list of dependencies.
  • addScreenDependencies - adds dependencies paths.
  • addScreenDependency - adds a dependency path.
  • List<ClientDependency> getScreenDependencies - returns a list of previously added dependencies.

In the example a CSS file is added to the login screen:

protected void loadStyles() {
    ScreenDependencyUtils.addScreenDependency(this,
                  "vaadin://brand-login-screen/login.css", Dependency.Type.STYLESHEET);
}

As the result the following import will be added to the page header:

<link rel="stylesheet" type="text/css" href="http://localhost:8080/app/VAADIN/brand-login-screen/login.css">

Regards,
Gleb

1 Like
#5

thx!!
could you answer how to make the styles in chrome and in IE11 not differ. I will attach screenshots
IE11:
ие11

CHROME
хром

How to make them match?
theme - helium

#6

Seems that CSS variables that are used for colors are not recognized. A quick glance at a library you tried to use reveales that this library is offered as a ponyfill, not a polyfill. This means that the cssVars() function must be called at least once in order for processing to take place. See original doc for more detail.

#7

thx!
but it did not help to solve the problem.
is there any way to make it look the same in ie11 and chrome ?? using jmix

#8

The issue isn’t related to jmix directly. IE doesn’t support CSS Variables (and many other modern features). Probably you need to find another folyfill for IE.

1 Like