Sunday, April 28, 2013

Re: UiBinder Button created hidden not responsive after being shown

Summary of problem context: I have groups of buttons that display in the same place on the page; which group is displayed depends on what actions are available to the user.

What I did is make an "ontop" CSS style containing z-index: 9999. In my code, to make a group of buttons visible and responsive, I pass its DivElement to this method:

    DivElement[] layers = {aLayer, bLayer, cLayer, dLayer, eLayer};
    protected void showLayer(DivElement div) {
        for (DivElement layer : layers) {
            if (layer != div) {
        if (div != null) {

This appears to work OK.

I wasn't using display:none because I have been depending on layout flow for my layout, and display:none takes the attributed element out of the flow. However, I hadn't considered using it on containers (divs) rather than elements (buttons), and that might be somewhat simpler than the technique described above.

On Sunday, April 28, 2013 3:12:23 AM UTC-7, Thomas Broyer wrote:
Use display:none rather than visibility:hidden then.

On Sunday, April 28, 2013 12:00:44 PM UTC+2, brec wrote:
Its parent widget is the HTMLPanel at the top of the ui.xml/UIBinder hierarchy; its parent element, in the DOM sense, is a div.

I have just discovered that the problem relates to the fact that I have buttons in the same position, of which only certain ones are supposed to be visible at a given time. In other words, the user would see at the same position on the page one of:
ButtonA ButtonB ButtonC
ButtonD ButtonE ButtonF
BigButtonG (as wide either of the preceding groups)

The problem is that regardless of visibility, whichever of the three above displays is declared last has (in effect) a higher z-index and is the only one that will be mouse-responsive. So I am just about to implement a solution of explicitly setting div z-indexes in the code which shows/hides button groups.

On Sunday, April 28, 2013 2:23:49 AM UTC-7, Thomas Broyer wrote:

On Sunday, April 28, 2013 4:35:32 AM UTC+2, brec wrote:
In the ui.xml:

<g:Button ui:field='continu' addStyleNames='{style.continue-button} {style.hidden}'>
   <ui:text from='{strings.continu}' />

In java when it's time to show the button:

   @UiField Button         continu;




    protected void showWidget(Widget w) {

    protected void showElement(Element e) {

 The button is now visible to the eye, but not to the mouse: clicking on it does not only not invoke its handler, it doesn't exhibit the small visual effect of activation.

How is the button attached to its parent widget?

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to
To post to this group, send email to
Visit this group at
For more options, visit

No comments:

Post a Comment