TextField not visible in view


I was just trying to create my first Vadin-Form ever.

public class VaadinTest extends VerticalLayout  {
    public VaadinTest() {
            add(new Text("Welcome to MainViews."));

        FormLayout nameLayout = new FormLayout();

        TextField titleField = new TextField();
        TextField firstNameField = new TextField();
        firstNameField.setLabel("First name");
        TextField lastNameField = new TextField();
        lastNameField.setLabel("Last name");

        nameLayout.add(titleField, firstNameField, lastNameField);

                new FormLayout.ResponsiveStep("25em", 1),
                new FormLayout.ResponsiveStep("32em", 2),
                new FormLayout.ResponsiveStep("40em", 3));

When inspecting the result in chrome I see that some input vadin-form-layout and vadin-text-field have been rendered. They are however not visible. It feels like I am missing some CSS or,… but I have no idea.

ext {
	set('vaadinVersion', "14.1.27")

dependencyManagement {
	imports {
		mavenBom "com.vaadin:vaadin-bom:${vaadinVersion}"

dependencies {
	implementation 'com.vaadin:vaadin-spring-boot-starter'

Hi, your code is working for me on Chrome & Firefox, without any special CSS settings in place. You might want to try with a new empty project from https://vaadin.com/start/v14 to see if the issue persists.

Please try out one of the following Gradle-Vaadin example projects, they will guide you how to use Vaadin 14 with Gradle and the Vaadin Gradle plugin:

  1. https://github.com/vaadin/base-starter-gradle (plain Java Servlet)
  2. https://github.com/vaadin/base-starter-spring-gradle (Spring Boot)

The problem most probably is that the JavaScript part of Vaadin was not loaded at all. You can confirm that by opening the browser dev-tools, the JavaScript console and type in:


If it says Undefined then the JavaScript part hasn’t been loaded properly. Please check the server-side log for any signs of errors, most probably related to ‘npm’ or ‘webpack’.

Also please see the [Vaadin Gradle Plugin]
(https://github.com/vaadin/vaadin-gradle-plugin/) documentation for more explanation on how to use Gradle with Vaadin 14.