Setting first column width CSS in CellBrowser via DOM API

[sevendays]

I raised query around a month ago about setting the width of the first column in a CellBrowser in GWT. There is a bug that stops this from occurring - it always displays with a default width of 200px because this is the generated HTML for the wrapper divs:

<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; bottom: 0px; width: 200px;">

<div style="position: absolute; overflow: hidden; left: 200px; top: 0px; bottom: 0px; width: 8px;">

My original post is here: https://groups.google.com/d/msg/google-web-toolkit/Zmz_1XDq4dI/R2LxcPQqNQ4J

So as a work around I am trying to set the width style dynamically through the GWT DOM API. Here is some sample code showing my approach:

Button test = new Button("Test");

test.addClickHandler(new ClickHandler() {

@Override

public void onClick(ClickEvent event) {

Element browserElement = browser.getElement();

NodeList browserChildNodes = browserElement.getChildNodes();

for (int i=0; i<browserChildNodes.getLength(); i++) {

Node n = browserChildNodes.getItem(i);

int divCount = 0;

if (n.getNodeType() == Node.ELEMENT_NODE) {

Element e = Element.as(n);

if (e.getTagName().equalsIgnoreCase("DIV")) {

System.out.println("Before mod: " + e.getAttribute("style"));

if (divCount == 2) {

Style s = e.getStyle();

e.setId("col1");

s.setWidth(400.00, Unit.PX);

e.setAttribute("style", "position: absolute; overflow: hidden; left: 0px; top: 0px; bottom: 0px; width: 400px;");

} else if (divCount == 3) {

e.setId("col1Dragger");

e.setAttribute("style", "position: absolute; overflow: hidden; left: 400px; top: 0px; bottom: 0px; width: 8px;");

}

System.out.println("After mod: " + e.getAttribute("style"));

divCount++;

}

}

}

}

});

However, when 'button Test is clicked, it makes no difference to the style attribute. The 'after mod' println shows the same results as 'before mod'. Checking the HTML, also shows no change.'  I have also tried the above code in the initialization code for the CellBrowser; nothing changes in the rendered HTML.

I am sure I am looking at the right divs, as a println of the style attibute matches perfectly. 

setId(), also has no effect.

I have also tried e.getStyle().setProperty("width", Unit.PX), and this had no effect.

Why is the DOM manipulation having no effect?

[John LaBanca]

We haven't had a change to fix this yet.  CellBrowser uses a SplitLayoutPanel that has a fairly complicated structure, so DOM manipulation isn't likely to work.

As a workaround, you can get access to the SplitLayoutPanel in CellBrowser and set the widget width directly.  Subclass CellBrowser and override getWidget() to return a SplitLayoutPanel, then do the following:

SplitLayoutPanel splitPanel = cellBrowser.getWidget();

splitPanel.setWidgetSize(splitPanel.getWidget(0), 400.0);

Thanks,
John LaBanca
jlab...@google.com

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[sevendays]

This worked. Thank you John.

[Joe Schmoe]

Can you please show code how to do this?
Don't see how I can get access to the SplitLayoutPanel.

[Joe Schmoe]

Can you please show a few lines of code how to access the
SplitLayoutPanel from within a subclass of CellBrowser. I can't get it
to work.

Thanks

On Feb 3, 7:55 pm, John LaBanca <jlaba...@google.com> wrote:
> We haven't had a change to fix this yet.  CellBrowser uses a
> SplitLayoutPanel that has a fairly complicated structure, so DOM
> manipulation isn't likely to work.
>
> As a workaround, you can get access to the SplitLayoutPanel in CellBrowser
> and set the widget width directly.  Subclass CellBrowser and override
> getWidget() to return a SplitLayoutPanel, then do the following:
>
> SplitLayoutPanel splitPanel = cellBrowser.getWidget();
> splitPanel.setWidgetSize(splitPanel.getWidget(0), 400.0);
>
> Thanks,
> John LaBanca

> jlaba...@google.com

>
>
>
> On Wed, Feb 2, 2011 at 9:38 PM, sevendays <fux...@gmail.com> wrote:
> > I raised query around a month ago about setting the width of the first
> > column in a CellBrowser in GWT. There is a bug that stops this from
> > occurring - it always displays with a default width of 200px because this is
> > the generated HTML for the wrapper divs:
>
> > <div style="position: absolute; overflow: hidden; left: 0px; top: 0px;
> > bottom: 0px; width: 200px;">
> > <div style="position: absolute; overflow: hidden; left: 200px; top: 0px;
> > bottom: 0px; width: 8px;">
>
> > My original post is here:

> >https://groups.google.com/d/msg/google-web-toolkit/Zmz_1XDq4dI/R2LxcP...

> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>
> > .

[Oli Evans]

Thanks for the tip. 

Mr Schmoe, this worked for me:

        CellBrowser cellBrowser = new CellBrowser(model, null) {

            

            // HACK: workaround for setDefaultColumnWidth not setting the width of the first column!

            // SEE: https://groups.google.com/forum/?pli=1#!topic/google-web-toolkit/T8ObWAWDPqI

            public void setDefaultColumnWidth(int width) {

                super.setDefaultColumnWidth(width);

                SplitLayoutPanel splitPanel =  (SplitLayoutPanel) getWidget();

                splitPanel.setWidgetSize(splitPanel.getWidget(0), width);

            }

        };

        cellBrowser.setDefaultColumnWidth(300);        

So we apply the suggested fix inside an anonymous subclass of CellBrowser, where we override the damaged version of setDefaultColumnWidth to also set the width of the CellBrowser's SplitLayoutPanel.

Hope that helps,

O!

[Noopur]

I am using GWT 2.5.6 and cell browser does not have getWidget() method. Following is my code :-

1. CellBrowser browser;
   
2. Builder<String> builder = new Builder<String>(model, "Item 1");
   
3. browser = builder.build();
   
4. browser.setHeight("300px");
   
5. browser.setWidth("700px");
   
6. browser.setDefaultColumnWidth(233);
   
7. browser.setMinimumColumnWidth(233);

browser.getWidget() does not exists. Is something to do with GWT version  ?