Remove style from gwt dialogbox header

Question

How to remove dependent styles?

In GWT dialog box, I need to remove the style .dialogtopleft from .gwt-Dialogbox . dialogtopleft .gwt-Dialogbox . dialogtopleft .

How to remove it?

Answer 1

You would need jQuery to do that easily. You can find some jQuery wrappers for GWT, but you can also do it using plain DOM traversal.

I have a small recursive method to find element by given class name. It returns the first element found or null.

public Element findChildElementByClassName(Element parent, String className) {
    List<String> classNames = Arrays.asList(parent.getClassName().split(" "));
    if(classNames.contains(className))
        return parent;
    else {
        Element foundElement = null;
        NodeList<Node> childNodes = parent.getChildNodes();
        for(int i = 0; i < childNodes.getLength() && foundElement == null; i++)
            if(childNodes.getItem(i).getNodeType() == Node.ELEMENT_NODE) {
                Element childElement = (Element) childNodes.getItem(i);
                foundElement = findChildElementByClassName(childElement, className);
            }

        return foundElement;
    }
}

I hope it's self explaining, but you need to notice that node type must be checked before casting it to an element.

You should use it this way:

DialogBox dialogBox = new DialogBox();
// ... initialize dialogBox
dialogBox.show();

Element dialogTopLeftElement = findChildElementByClassName(dialogBox.getElement(), "dialogTopLeft");
if(dialogTopLeftElement != null)
    dialogTopLeftElement.removeClassName("dialogTopLeft");