Issue with importing CSS file in Vaadin Java

Currently, I am tackling the eighth part of the Vaadin Tutorial series.

Watch the video here: https://www.youtube.com/watch?v=ttuBu8dYNn0

For the text version, visit:

I am currently facing a challenge with the final step of importing the provided CSS file. Despite following the tutorial closely, the form style remains unchanged. It appears that the CSS file is not taking effect.

Running on Vaadin Version 14.4.2

Here is a snapshot of my project folder including the MainView:

https://i.sstatic.net/YEZ7u.png

CSS File:

/* List view */
.list-view .content {
    display: flex;
}

.list-view .contact-grid {
    flex: 2;
}

.list-view .contact-form {
    flex: 1;
    padding: var(--lumo-space-m);
}

@media all and (max-width: 1100px) {
    .list-view.editing .toolbar,
    .list-view.editing .contact-grid {
        display: none;
   }
}

This is how my web app currently looks like:

https://i.sstatic.net/x1BJS.png

But it should actually resemble this:

https://i.sstatic.net/9xPyE.png

javacssvaadinvaadin-flowvaadin10

Answer №1

Resolved once I integrated this additional dependency to address another problem:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-validation</artifactId>
</dependency>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Aligning content in Bootstrap with vertical centering

I am currently working on aligning a simple piece of code vertically. Check out the code on JS Fiddle: https://jsfiddle.net/3kj44net/ .container-fluid { padding-left: 20px; padding-right: 20px; } <link href="https://maxcdn.bootstrapcdn.com/boots ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Display the spring form on a JSP page that has already been loaded using an ajax request

Imagine a situation where there is a JSP that has already been displayed to the client. Within this JSP, I have added a link that should trigger a request to the server. The server will then send a Spring form with a command object in it, and this form sho ...

javaajaxspringjspspring-mvc

How can I dynamically adjust the font size of content in a React Material-UI Button when it's unexpectedly

In my web application project, I have created multiple choice questions where each answer is displayed within a single button: <Button fullWidth={true} variant="contained" onClick={(answer) => this.handleAnswer(this.state.answers[0].tex ...

htmlcssreactjsfrontendmaterial-ui

Revolutionary CSS and jQuery for an Exceptional Top Navigation Experience

I would like to create a top navigation similar to the one on Facebook, using CSS and jQuery. Here is an example: Additionally: Notice how the arrow in the popbox always remains beneath the selected navigation item, and all popboxes have the same width. ...

jqueryfacebookcssfacebook-like

Eliminate the navigation bar option from a website template

Is there a way to permanently eliminate the menu button in this theme? Any guidance would be appreciated. Here's the link to the theme: https://github.com/vvalchev/creative-theme-jekyll-new ...

javascripthtmlcssthemesjekyll

Fading text that gradually vanishes depending on the viewport width... with ellipses!

I currently have a two-item unordered list positioned absolutely to the top right of the viewport. <header id="top-bar"> <ul> <li> <a href="#">David Bowie</a> </li> <li> ...

javascripthtmlcss

How can one identify a C style comment block (/* */) without capturing those contained within a string using regex?

I have encountered an issue with my program that processes standard C files. While I have successfully configured it to identify comments, I am struggling to prevent it from mistaking comment blocks within a string. For example: printf("This should be cou ...

javacregexcomments

container div not fully extending to parent's height

I'm attempting to make the container div reach the full height of its parent element. The parent (body) is styled with the color info, while the container div is styled with the color primary. The intention is for the color of the container to stretch ...

htmlcssbootstrap-4

Two hyperlinks are not visible

I've added 2 links in my header component, but for some reason, they are not displaying. It's strange because everything appears to be correct. These 2 links are part of a list within a ul element. <nav class="navbar navbar-expand-lg navbar-d ...

htmlcsstwitter-bootstrap

Guide to transmitting webcam feed from server to servlet

I am trying to display the webcam connected to my server in a servlet. I have come across suggestions to use getUserMedia();, however, this only captures the user's video webcam feed and not the server's. Is there a way to achieve this? My servl ...

javajavascriptservletsstreamwebcam

Java - Rearrange Map<String, List<String>>

I am currently working with a Map called "data" containing key-value pairs of Strings and Lists of Strings. The initial structure of the data looks like this: data = { Salad=[Salad Bar Station, Green Pepper & Tomato Salad, Lo Mein Noodle Salad], ...

javaandroidarrayssortinghashmap

"Need help with resolving issues in my React Bootstrap Navbar? Learn the latest updates on fixing Navbar Brand Collapse here

Having issues with my React.js website navbar created using bootstrap. The menu button doesn't show up when the navbar collapses at a certain point. Can someone spot what's missing in the code below? Tried toggling by following a tutorial, but i ...

htmlcssreactjsnavbarreact-bootstrap

I am having trouble aligning these elements next to each other

Can anyone help me figure out why these elements won't center on the page? <ul id="contact"> <h1> Contact </h1> <p> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2e6d0c7c3cfd1d6cdd5cac7c7ced1 ...

htmlcss

When using the <a> tag in an ASP.NET MVC view, the hyperlink may be missing

When utilizing ASP.NET MVC 5, I encountered an issue within my view where I am attempting to incorporate "Edit | Delete" functionality within a table. Strangely, I am able to generate a hyperlink for the Edit function, but not for the Delete function. Wit ...

htmljquerycssasp.net-mvc-5

Ways to enhance multiple ng-repeats efficiently with css grid

Looking to create a CSS grid table with 5 columns and an undetermined number of rows. The goal is to display a pop-up element when an element in the first column is clicked, covering columns 2 through 5. This ensures that only the first column remains visi ...

htmlcssangularjsgrid-layout

I have a parent DIV with a child DIV, and I am looking to use jQuery to select the last child DIV. The parent DIV has an

In my HTML code, I have a parent div called "allcomments_4" which contains several child divs with unique IDs (oneEntry), each with their own children. My goal is to locate and retrieve the content inside the last child of the parent node (lastComment) and ...

javascriptjquerycss

Utilizing CSS animation triggered by a timer to produce a pulsating heartbeat effect

Here's a unique way to achieve a heartbeat effect on a spinning circle. The goal is to have the circle double in size every second and then shrink back to its original size, resembling a heartbeat. To achieve this, a JavaScript timer is set up to remo ...

javascriptcsscss-animations

Tips for adjusting the angle in SVG shapes

I have designed an svg shape, but I'm struggling to get the slope to start from the middle. Can someone please provide assistance? <svg xmlns="http://www.w3.org/2000/svg" fill="none"> <g filter="url(#filter0_b_1_2556)"&g ...

javascripthtmlcsstypescriptsvg

What causes materialui styles to vanish upon refreshing in nextjs?

After consulting the materialui documentation (https://material-ui.com/guides/server-rendering/), I was able to find a solution, but I am still unsure of the underlying reason. Why does the style work initially during rendering but disappear upon subs ...

cssmaterial-uinext.jsserver-side-rendering

Having trouble displaying dynamically added images in my jsx-react component. The images are not showing up as expected

import React from "react"; import ReactDOM from "react-dom"; var bImg = prompt("Enter the URL of the image you want to set as the background:"); const bStyle = { backgroundImage: "url(bImg)"; // The link is stored ...

javascriptcssreactjsjsx