Wierd looking &

ghz 8months ago ⋅ 56 views

I have historically used vaadin WebComponents many times before in different projects but I am now stuck and can't seem to figure it out. Please advice.

I'm trying for test purposes to use a <vaadin-integer-field> and a <vaadin-button>

This is what they look like. Completely off, why!?

enter image description here

Component with the actual import:

import { LitElement, html, css } from 'lit';
import { Router } from '@vaadin/router';



class BoxkeyPwaClient extends LitElement {
  static properties = {
    header: { type: String },
  }

  static styles = css`
    :host {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      font-size: calc(10px + 2vmin);
      color: #1a2b42;
      max-width: 960px;
      margin: 0 auto;
      text-align: center;
      background-color: var(--boxkey-pwa-client-background-color);
    }

    main {
      flex-grow: 1;
    }
  `;

  constructor() {
    super();
  }

  firstUpdated() {
    this.initiateRouter();
  }

  initiateRouter() {

    const routerOutletElement = this.renderRoot.getElementById('router-outlet')  
    this.router = new Router(routerOutletElement)
    
    this.router.setRoutes([
      {
        path: '/',
        component: 'loading-page',
        action: async () => { await import('./pages/loading-page') },
        animate: false
      },
      {
        path: '/map',
        component: 'map-page',
        action: async () => { await import('./pages/map-page') },
        animate: false
      },
      {
        path: '/test',
        component: 'test-page',
        action: async () => { await import('./pages/test-page') },
        animate: false
      }
    ]);
  }

  render() {
    return html`
      <div id="router-outlet"></div>
    `;
  }
}

customElements.define('boxkey-pwa-client', BoxkeyPwaClient);

Component that show the above component via the router outlet.

import { LitElement, html, css } from 'lit';
import '@vaadin/integer-field';

class TestPage extends LitElement {
  static properties = {
    counter: { type: String },
  }

  static styles = css`
    :host {

    }

  `;

  constructor() {
    super();
    this.counter = 0;
  }

  render() {
    return html`
      <vaadin-integer-field value="2" step-buttons-visible min="0" max="9"></vaadin-integer-field>
    `;
  }
}

customElements.define('test-page', TestPage);

Should look like this.

Answers

It seems like the Vaadin components are not being properly styled. This could be due to a variety of reasons, such as missing or incorrect stylesheets, incorrect usage of the components, or conflicts with existing styles in your application.

Here are some steps you can take to troubleshoot and fix the styling issue:

  1. Ensure Correct Imports: Make sure you are importing the required Vaadin stylesheets in your project. Vaadin components typically come with their own CSS files that need to be included in your application. Check the Vaadin documentation for the specific components you are using to see if there are any required stylesheets.

  2. Check for CSS Conflicts: Inspect the elements using your browser's developer tools to see if there are any CSS conflicts or overrides affecting the styling of the Vaadin components. Look for styles that are being applied to the components that might be unintentionally overriding the default Vaadin styles.

  3. Verify Component Usage: Double-check that you are using the Vaadin components correctly in your templates. Ensure that you are providing the necessary attributes and properties to the components as specified in the Vaadin documentation. For example, make sure you are setting the value, min, max, and step-buttons-visible attributes correctly on the <vaadin-integer-field> component.

  4. Inspect Component Shadow DOM: If you suspect that the issue is related to the internal styling of the Vaadin components, you can inspect the shadow DOM of the components using your browser's developer tools. This will allow you to see the internal structure and styling of the components and identify any potential issues.

  5. Update Component Versions: Ensure that you are using the latest version of the Vaadin components in your project. Sometimes, styling issues can be caused by bugs or compatibility issues in older versions of the components, so updating to the latest version may resolve the issue.

By following these steps and carefully reviewing your code and component usage, you should be able to identify and fix the styling issue with your Vaadin components. If you continue to experience issues, consider reaching out to the Vaadin community or support for further assistance.

#vaadin