0

My Vaadin web application uses custom buttons that extend from CssLayout. Click listeners are added to the layout/button with addLayoutClickListener.

Often when the layout/button is clicked, no event is fired.

It seems that the event is only fired when the mouse is not moved at all between press and release. Traditional UI buttons allow mouse movement between press and release, as long as the pointer is still within the button area during release (the 'pressed and armed' state).

Do I absolutely have to use com.vaadin.ui.Button or com.vaadin.ui.NativeButton?

Can someone maybe provide some explanation for why the layout approach does not work reliably?

Reto Höhener
  • 5,419
  • 4
  • 39
  • 79
  • Perhaps you have some components inside the Layout which catch some parts of the click? – André Schild Feb 02 '18 at 13:13
  • What is the reason that you are not using Vaadin's `Button`? Alternatively you can try to implement your own button as custom widget (I can give you some pointers on HOWTO if you need). – Steffen Harbich Feb 02 '18 at 13:17
  • @SteffenHarbich initially the reason was that I was not able to customize the style of the default buttons within a reasonable amount of time (Valo Theme was too complicated for me). This click problem might force me to try again, though. – Reto Höhener Feb 02 '18 at 13:25
  • @AndréSchild there is exactly one Label added to the CssLayout, containing the button text. – Reto Höhener Feb 02 '18 at 13:26
  • Maybe one of the add-on fits your requirements (e.g. https://vaadin.com/directory/component/labelbutton/0.2.0 for label like buttons) – Steffen Harbich Feb 02 '18 at 13:31
  • @SteffenHarbich thanks for the suggestion, but I try to avoid addons as much as possible. If I cannot figure out the layout problem, I will invest again in customizing the Valo theme. – Reto Höhener Feb 02 '18 at 13:36
  • 2
    If you explain the exact styling problem I may find some time to help you with that. – Steffen Harbich Feb 02 '18 at 13:43
  • @SteffenHarbich thanks a lot for the offer, I might come back to it. – Reto Höhener Feb 02 '18 at 13:46

1 Answers1

1

I was not able to customize the style of the default buttons within a reasonable amount of time (Valo Theme was too complicated for me)

Use button.setPrimaryStyleName("my-button") and you’ll have a blank slate to apply your own CSS.

Jouni
  • 2,830
  • 15
  • 12