Search code examples
javahtmlcssgwtdocklayoutpanel

SetStyleName to gwt dockLayoutPanel child

I've started building a small search engine for an index I created using Lucene. I use the GWT to create the GUI I like but I'm stuck in a problem. I am trying to add some results inside a FlowPanel which is inside the center of a DockLayoutPanel so I can have scrolling the page as I like. My problem is (as I found out ) that in order for scrolling to work ( and not have the browser window cut my results ) is to make every DockLayoutPanel child to not have position:absolute. My problem is that I cannot remove it ( or I don't know how ). When I disable it from chrome inspector scrolling works but when I re-enable it it cuts the flowPanel. Here is the java code : 

public static void loadCellTrees(HashMap<Integer,LinkedHashMap<String,String>> searchResults, List<RootCategories> list)
{           
        VerticalPanel westTrees = new VerticalPanel();
        TreeViewModel treeModel = new CellTreeWidget(list);
        CellTree tree = new CellTree(treeModel, null);
        HTMLBuilder builder = new HTMLBuilder(searchResults);

        tree.setStyleName("tree");
        tree.setAnimationEnabled(true);

        dock.clear();
        westTrees.clear();
        westTrees.getElement().setAttribute("align", "center");
        westTrees.add(tree);

        FlowPanel resultsPanel = new FlowPanel();
        resultsPanel.setStyleName("resultsPanel");

        for(int i=0; i<searchResults.size(); i++)
        {
            HTML box = builder.toHTML(i);
            box.setStyleName("resultBox");
            resultsPanel.add(box);
        }

        dock.addWest(westTrees, 20);
        dock.addNorth(RootPanel.get("wrap"),20);

        dock.add(resultsPanel);
}

at the beginning of my code I add the dock (DockLayoutPanel ) to my RootLayoutPanel.

enter image description here

as I show at the first image... with position set to absolute I can have the scrollbar and the results are cut, but if I disable position: absolute as shown in the second pic

enter image description here

the scrollbar is enabled and I can have full access to all of my results.

The scrollbar is set like this : 

RootLayoutPanel.get().getWidgetContainerElement(dock).getStyle().setOverflowY(Overflow.AUTO);

What I am trying to do is remove position for every dockLayoutPanel's child or set it to something else that doesn't creates me a problem.

Solution

  • I found a solution. On CSS styling simply I had to write 

    .cw-DockPanel > div {
    position : initial !important;
}

    If anyone has to suggest a better way than to use !important i would be glad to hear it.