CODEWITHSUNDEEP
vaadin
Tom Elam
Tom Elam

Reputation: 93

<vaadin-horizontal-layout> is vertical, not horizontal

I have a question about Vaadin components. I've successfully added them to static web pages using their declarative APIs (HTML APIs). (See https://web-call.cc/ .) The HTML API for element (https://vaadin.com/components/vaadin-ordered-layout/html-examples) shows usage like this:

<vaadin-horizontal-layout>
  <div>Item 1</div>
  <div>Item 2</div>
</vaadin-horizontal-layout>

but I have to add the style display: flex; to make the layout horizontal. Why must I do that? (I got the idea from viewing the layout with Dev Tools in Chrome, which showed the horizontal layout with that style.) When I added that style rule for both the horizontal layout and the vertical layout, the vertical layout went horizontal, too! The documentation doesn't show that style being applied to the layouts; only to the items contained in those layouts. Am I missing something?

Upvotes: 2

Views: 117

Answers (1)

Tom Elam
Tom Elam

Reputation: 93

The reason the layouts were misbehaving is that I forgot these imports:

import '@vaadin/vaadin-ordered-layout/vaadin-vertical-layout.js'
import '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout.js'```

Upvotes: 4

Related Questions