Hide a div added to a layout using set content in smartGWT?

Question

I am using smartGWT, to add a div I used the method setcontent provided by smartGWT and wrote HTML inside.

like this

    m_Holder = new HLayout();
    m_Holder.setHeight("10%");
    m_Holder.setWidth100();

    m_Holder.setContents("<div id=\"scrollable\" class=\"scrollablediv\" style=\"width: 98%;"
                    + "height: 80px; visibility: visible; overflow: auto; position: relative;  border: 1px solid gray;\">"
                    + "<div id=\"legenddiv\"style=\"width: 100%; height: 10%;"
                    + " background-color: #FFFFFF;\"></div></div>");

now when I try to hide this layout it hides the layout but not the divs. These divs lose their position and come in front of everything. What I am doing is this

    Label legendLabel = new Label( "<font size=\"3\"><span class=\"nobr\">Legends</span></font>" );
    legendLabel.setHeight(12);
    legendLabel.setWidth(80);
    m_ToggleHandlerLayout.addMember(legendLabel);
    m_ToggleHandlerLayout.addClickHandler(new ClickHandler()
    {
        @Override
        public void onClick(ClickEvent event)
        {
            if(m_Holder.isVisible())
            {
                m_Holder.hide();

            }
            else
            {
                m_Holder.show();
            }
        }
    });

This code works fine and hides the div if I use only one div, instead of nested div in HTML code. What I was also thinking is writing a JavaScript code and call it using native method inside the clickhandler itself and use it to hide the divs outside. But, I don't want to do it that way.

Any suggestions.

Answer 1

One way of doing this is, make these native functions like this...

private final native void hideScrollableDiv() /*-{
    $doc.getElementById('scrollable').style.display = "none"
}-*/;

private final native void showScrollableDiv() /*-{
    $doc.getElementById('scrollable').style.display = "block"
}-*/;

and call them in the clickhandler

    public void onClick(ClickEvent event)
        {
            if(m_legendHolder.isVisible())
            {
                m_legendHolder.hide();
                hideScrollableDiv();
            }
            else
            {
                showScrollableDiv();
                m_legendHolder.show();
            }
        }

Still if someone have other solution, that will be great.