TextField not visible in view

Flow
1

Hey,

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

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

        FormLayout nameLayout = new FormLayout();

        TextField titleField = new TextField();
        titleField.setLabel("Title");
        titleField.setPlaceholder("Sir");
        TextField firstNameField = new TextField();
        firstNameField.setLabel("First name");
        firstNameField.setPlaceholder("John");
        TextField lastNameField = new TextField();
        lastNameField.setLabel("Last name");
        lastNameField.setPlaceholder("Doe");

        nameLayout.add(titleField, firstNameField, lastNameField);

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

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'
	```
2

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.

3

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:

customElements.get("vaadin-combo-box")

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’.

4

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.