button container items align left?

Flow
1

Hello,

I’m trying to align button content to left if button got bigger width… Items in container are justify to center. Is there any chance to change it to left?

I’m using V13 right now.

In css there is:

.vaadin-button-container {
    justify-content: center;
}
2

I resolve this problem… dom is needed…

<dom-module id="menu-item" theme-for="vaadin-button">
    <template>
        <style>

            .vaadin-button-container {
                justify-content: left;
            }

        </style>
    </template>
</dom-module>
3

Hi Rafal, I’m having the same need.

Added your code on /frontend/styles/shared-styles.css and still not working. Any help? Thanks.

4

Gustavo Madruga:
Hi Rafal, I’m having the same need.

Added your code on /frontend/styles/shared-styles.css and still not working. Any help? Thanks.

Hi Gustavo,

If you’re using V14 you can do import stylesheets using the @CssImport annotation.

MainView/Layout/Root.java (whatever your UI root is called)

@CssImport(value = "./styles/components/text-field.css", themeFor = "vaadin-text-field")

Then in text-field.css you put the styles Rafal posted above.

text-field.css

.vaadin-button-container {
  justify-content: left;
}
5

Worked man, thank you!!!

6

Can you explain me
How I can add this style only for one button?

7

Лешик ツ:
Can you explain me
How I can add this style only for one button?

There a multiple ways. One would be to add a class name:

button.addClassName("special");

Then in your CSS you target that button with:

:host(.special) .vaadin-button-container {
  justify-content: left;
}
8

I use Vaadin 14

Template js

          <vaadin-button id="btnSignByFacebook" class="btn-primary text-left">
            <fontawesome-icon class="social-icon" prefix="fab" name="facebook" fixed-width slot="prefix"></fontawesome-icon>Sign in with <b>Facebook</b>
          </vaadin-button>

Style js

        :host(.text-left) .vaadin-button-container {
          justify-content: left;
        }

But nothing changes =(

9

I guess if you’re using JS files then a DOM module would be required.

<dom-module id="my-button-styles" theme-for="vaadin-button">
 <template>
  <style>
   :host(.text-left) .vaadin-button-container {
    justify-content: left;
   }
  </style>
 </template>
</dom-module>
10

Joacim Päivärinne:
I guess if you’re using JS files then a DOM module would be required.

<dom-module id="my-button-styles" theme-for="vaadin-button">
 <template>
  <style>
   :host(.text-left) .vaadin-button-container {
    justify-content: left;
   }
  </style>
 </template>
</dom-module>

Thanks you_