Tab - Remove space on right and left side

Flow
1

Hi,

I have this Tab and I try to remove the space where red rectangles are, so the outer tabs are in one line with the content container beneath.

Atm my guess is it came from the scrollbuttons. But I had no success to remove them. I would need something like a “remove-scroll-buttons” theme.

here my code:

			<vaadin-tabs theme="equal-width-tabs minimal hide-scroll-buttons">
                <vaadin-tab>Tab 1</vaadin-tab>
                <vaadin-tab>Tab 2</vaadin-tab>
                <vaadin-tab>Tab 3</vaadin-tab>
                <vaadin-tab>Tab 4</vaadin-tab>
            </vaadin-tabs>

            <iron-pages>
			...

Thanks for any help,
Lars
17721142.png

2

Now I’m using the paper-tabs component.

@Vaadin defs: Make this your component a bit more flexible, please. Some of your assumptions can make it difficult to use your components.

3

Hi Lars,

That space is set here:
https://github.com/vaadin/vaadin-tabs/blob/master/theme/lumo/vaadin-tabs-styles.html#L30

You can remove it with a DOM module:

<dom-module id="my-tabs" theme-for="vaadin-tabs">
  <template>
    <style>
	  :host([orientation="horizontal"]
) [part="tabs"]
 {
        margin: 0;
      }
    </style>
  </template>
</dom-module>
4

thx all lot.

But still, it should be easier to remove them! If I would use only flow, how can I remove them? Would it even possible?

I would say: remove them if you hide the scroll btns.

Add:

I guess I will still using the paper-tabs.

Sry, but I don’t understand what is going on with your solution. And honestly, I don’t care. I’m not an frontend freak, so I like it easy.

5

Hi Lars,

If I would use only flow, how can I remove them? Would it even possible?

Yes, you’d use the same approach as presented above (DOM module). There’s unfortunately no Java API for removing those margins.

Sry, but I don’t understand what is going on with your solution.

To customize the appearance of a component we use something called DOM modules. For example, if you wanted to modify the look of a Vaadin button you would do the following:

<dom-module id="my-button" theme-for="vaadin-button">
  <template>
    <style>
	  // CSS goes here.
    </style>
  </template>
</dom-module>

And for Vaadin tabs it would be something like this:

<dom-module id="my-tabs" theme-for="vaadin-tabs">
  <template>
    <style>
	  // CSS goes here.
    </style>
  </template>
</dom-module>

Then you just place that directly in index.html, shared-styles.html or in a separate file, depending on your setup.

For example, if you’re using the Simple App starter you’d place it in shared-styles.html and you’re good to go.

6

So it wouldn’t be possible. Like I assumed.

I understand the module concept. I don’t understand this special css stuff: ":host([orientation=“horizontal”]
) [part=“tabs”]
".

Ok, I could spend some time to get it. But why?

Vaadin is a framework for Java developer. If the Java dev need to learn all about frontend development, why he should use vaadin at all?

7

Vaadin is indeed trying to make web development with Java as easy as possible. You can often implement all of your functionality without thinking about frontend technologies at all. Styling is more difficult, and we cannot provide Java APIs for all the possible things you can do with CSS.

We do our best by providing a nice looking Lumo theme out of the box, and providing theme variants with type-safe Java APIs to satisfy some of the most common use cases. You can also adjust some CSS custom properties of Lumo to change the default colors etc. across the app. If those are not enough, you need to write some more specific CSS. When you need to change the styling of internal elements inside of a component, you need to go even deeper into CSS and work with theme-modules and themable part-selectors.

As you can see, there are several abstraction levels. More common things should be more easy than the more specific ones. Working on a lower abstraction level gives you the freedom to do anything which we don’t have Java APIs for. So thinking positively, it’s great that you can always jump to the lower abstraction level if some feature is not properly supported, instead of having to hope and wait that a higher-level API is some day implemented. :slight_smile:

8

In my opinion there should at least one more method for all components: removeAllStyles(), or just a way the get blank components. In the tab case it would be useless, I know. Like I sayed: “remove them if you hide the scroll btns.”

With the dialog it is the same. I don’t understand how I can remove the border. You can guess what I do about this: paper-dialog…

I really like your framework, please do not misunderstand it. I even like the polymer stuff (atm can’t imagine to work without it). But in some areas it is gone to far away from “fight for simplicity”.

9

In my opinion there should at least one more method for all components: removeAllStyles(), or just a way the get blank components.

You can disable all Lumo styles by adding @NoTheme annotation on your view class. But this does it for all the components, so then you need to style everything from scratch.

We are aware that theming is currently one of the biggest pain points in the developer experience with Vaadin, and I think we have invested in improving this area. Hopefully we are able to make it easier…

Like I sayed: “remove them if you hide the scroll btns.”

I don’t actually think it’s related to the scroll buttons, because if you remove the margin, it will looks just fine even with those scroll buttons. I think the margins are there just to make the Lumo tabs feel more spacy (not sure though).

10

And to make this case a bit easier, you don’t really need the first part of the selector, :host([orientation="horizontal"] ), unless you also have vertically oriented tabs in your app and don’t want to remove margins from those.

So you can probably just select the component with attribute part="tabs" without worrying about the host element’s attributes:

[part="tabs"]
 {
  margin: 0;
}
11

which theme are you using? it looks great