HTML Import not Working

Flow
1

Hi guys, my HTML import is not working. I want to edit the css of the label under the vaadin-form-item.

Am I doing something wrong?

@HtmlImport("customhtml/custom-form-layout.html")
public class WebexEvent extends MainContent {

    public WebexEvent() {
        add(new Button("VIEW FORM"), event -> {
			viewForm().open();
		});
    }
	
	Dialog viewForm() {
        Dialog dialog = new Dialog();
        dialog.setWidth("500px");

        TextField firstname = new TextField();
		firstname.setWidth("100%);
		
		TextField lastname = new TextField();
		lastname.setWidth("100%");

        FormLayout form = new FormLayout();
        form.addFormItem(firstname, "Firstname: ");
        form.addFormItem(lastname, "Lastname: ");
        form.setId("sources-form-layout");
        form.setSizeFull();

        dialog.add(form);
        return dialog;
    }
}

<dom-module id="vaadin-form-layout" theme-for="vaadin-form-item">
   <template>
     <style>
       :host(#sources-form-layout) {
         /* default state styles, label aside */
         font-size: 18px;
       }

       :host(#sources-form-layout) [part~="label"]
 {
         /* label on top state styles */
         font-size: 18px !important;
       }
     </style>
   </template>
 </dom-module>

Below is the css that is only available after performing inspect.

element.style {
    width: 100%;
    height: 100%;
}

<style>…</style>
:host([theme~="spacing"]
) ::slotted(*) {
    margin-top: var(--lumo-space-m);
}
<style>…</style>
:host([theme~="spacing"]
) ::slotted(*) {
    margin-top: 1em;
}
<style>…</style>
:host {
    --vaadin-form-layout-column-spacing: var(--lumo-space-l);
}
2

Hi Jet, is your CSS styled defined in custom-form-layout.html or a global style sheet? If it’s the latter you should be ok (assuming of course, that the global style sheet is imported elsewhere).

Also you may want to put src/ or frontend:// in the htmlimport to make sure Vaadin is looking in the right place:

From HtmlImport.class:

Note that you should (almost) always use URLs starting with frontend:// so that the framework can resolve the files to either VAADIN/frontend/es5 or VAADIN/frontend/es6 depending on if the browser supports ES6 classes (most browers) or not (IE11 and Safari <= 9). Polymer elements rely on importing dependencies using relative paths ../../other-element/other-element.html, which will not work if they are installed in different locations.
HTML imports are added to the page after any @JavaScript dependencies added at the same time.

Example: @HtmlImport("frontend://paper-slider/paper-slider.html") on the class com.example.MyConnector would load the file http://host.com/VAADIN/frontend/es[56]
/paper-slider/paper-slider.html before the init() method of the client side connector is invoked.
3

Martin Israelsen:
Hi Jet, is your CSS styled defined in custom-form-layout.html or a global style sheet? If it’s the latter you should be ok (assuming of course, that the global style sheet is imported elsewhere).

Also you may want to put src/ or frontend:// in the htmlimport to make sure Vaadin is looking in the right place:

From HtmlImport.class:

Note that you should (almost) always use URLs starting with frontend:// so that the framework can resolve the files to either VAADIN/frontend/es5 or VAADIN/frontend/es6 depending on if the browser supports ES6 classes (most browers) or not (IE11 and Safari <= 9). Polymer elements rely on importing dependencies using relative paths ../../other-element/other-element.html, which will not work if they are installed in different locations.
HTML imports are added to the page after any @JavaScript dependencies added at the same time.

Example: @HtmlImport("frontend://paper-slider/paper-slider.html") on the class com.example.MyConnector would load the file http://host.com/VAADIN/frontend/es[56]

/paper-slider/paper-slider.html before the init() method of the client side connector is invoked.

Hi Martin, What do you mean by defined in my custom-form-layout.html?

4

Jet Dario:

Hi Martin, What do you mean by defined in my custom-form-layout.html?

Hi Jeff, I was referring to the content of custom-form-layout.html. Is that you have in the second source code?

5

Martin Israelsen:

Jet Dario:

Hi Martin, What do you mean by defined in my custom-form-layout.html?

Hi Jeff, I was referring to the content of custom-form-layout.html. Is that you have in the second source code?

Hi Martin, yes… But I finally get to understand it after reading this https://github.com/vaadin/vaadin-themable-mixin. It seems that each vaadin component have different approach since I was able to find a work around for the Vaadin Grid previously. I have no idea about this local CSS and Shadow DOM.

6

Jet, the vaadin-form-item element doesn’t have a label part defined. So you cannot use [part~="label"] . That would work for a vaadin-text-field theme (theme-for=“vaadin-text-field”) but not for vaadin-form-item. Since you are using the FormLayout.addFormItem(Component, String) method, the label is put inside a label which means you can easily use something like this:

<custom-style>
    <style>
        label {
            font-size: 32px;
        }
    </style>
</custom-style>

Any label element would change though, but you can fix that by adding a custom CSS class name if needed. In that case, you should use the FormLayout.addFormItem(Component, Component) method:

TextField firstName = new TextField();
Label firstNameLabel = new Label("First name");

FormLayout form = new FormLayout();
form.addFormItem(firstName, firstNameLabel);

<custom-style>
    <style>
        label.big-font {
            font-size: 32px;
        }
    </style>
</custom-style>

Keep in mind that you should use something like @HtmlImport("frontend://styles/some-styles-file.html") in your Java class if your HTML file is in the src/main/webapp/frontend/styles/ directory.

7

Hi Al, Yes, I actually realized that just last night. I was also able to edit it using

.form-layout vaaadin-form-item label {
	font-size: 18px;
}

Im still trying to get used to editing the css since in Valo almost all component styles are predefined. lol

8

Good to hear!

9

This doesn’t work at all :frowning:

Have been trying for constant 4 days now.

Put the HTML in resources

/src/main/resources/META-INF/resources/frontend/src/main-view.html
Dint work

Put the HTML in frontend folder
/frontend/src/main-view.html

Doesn’t work

SImple importing here
@HtmlImport(“src/main-view.html”)

Even tried with this. Nothing seen in the ‘inspect element’
@HtmlImport(“./src/main-view.html”)

10

Hello Somendu Maiti,

are you using Vaadin 14? If so, are you using Compatibility Mode? HTML imports are only supported in Compatibility Mode of Vaadin 14.

-Olli

11

I am using vaadin 14. New on this.

Just checked with compatibility mode thingy.

I am not sure how that works?

Can you elaborate please?

12

Vaadin 14 has two modes: Compability mode and Npm mode.

Compability mode supports Polymer 2 and Html imports. It’s mainly meant for people who are migrating their app from earlier versions like Vaadin 13 which also used Polymer 2 and Html imports. If you have a custom Polymer 2 component, you might want to use Compatibility mode until you get the chance to migrate it to Polymer 3. You can read more about compatibility mode here: https://vaadin.com/docs/v14/flow/v14-migration/v14-migration-guide.html#compatibility-mode

Npm mode is the new default and it’s using Polymer 3 as the client side component library. In Npm mode, Html imports are no longer supported; you import web components or Polymer templates as @JsModule instead.

13

Sigh!!!
Well that clarifies why the import was looking only for @JSModule and html was not at all getting read.

The @Tag(“main-view”) still can be seen in the back end.

I am making a fairly new app and using the starter kit for spring-boot.

Thank you so much for the guidance :slight_smile:

14

Hi guys,

My Vaadin 14 app works perfectly fine on chrome. On Safari, it does not load and is giving Typeerror(screenshot attached).
And ofcourse, the page does not load css and is not pretty. Any guidance here would be much appreciated.

17897186.png