Problem with AbsoluteLayout

[jonas.esser]

Hello,

I tried to place three checkboxes with a AbsoluteLayout side by side, but they are rendered in wrong positions.

Here is my code, the resulting divs and a picture:



public class MyTabItem extends TabItem {

public MyTabItem() {
ContentPanel content = new ContentPanel();
content.setHeaderVisible(false);
content.setLayout(new AbsoluteLayout());
content.setSize(600, 800);

CheckBox checkBox1 = new CheckBox();
checkBox1.setBoxLabel("Checkbox1");
CheckBox checkBox2 = new CheckBox();
checkBox2.setBoxLabel("Checkbox2");
CheckBox checkBox3 = new CheckBox();
checkBox3.setBoxLabel("Checkbox3");

content.add(checkBox1, new AbsoluteData(0, 20));
content.add(checkBox2, new AbsoluteData(100, 20));
content.add(checkBox3, new AbsoluteData(200, 20));

this.add(content);
}

}Resulting Divs:


<div class="x-panel-bwrap">
<div id="ext-gen170" class="x-panel-body x-panel-body-noheader x-abs-layout-container" style="width: 600px; height: 800px;">
<div id="x-auto-102" class="x-form-check-wrap x-form-field x-abs-layout-item" style="position: relative; left: 100px; top: 20px;">
<input id="x-auto-101" class=" x-form-checkbox" type="checkbox" style="position: relative; left: 0px; top: 1px;" tabindex="0" value=""/>
<label class="x-form-cb-label" for="x-auto-101" htmlfor="x-auto-101" style="position: relative; left: 1px; top: 0px;">Checkbox1</label>
</div>
<div id="x-auto-104" class="x-form-check-wrap x-form-field x-abs-layout-item" style="position: relative; left: 200px; top: 20px;">
<input id="x-auto-103" class=" x-form-checkbox" type="checkbox" style="position: relative; left: 0px; top: 1px;" tabindex="0" value=""/>
<label class="x-form-cb-label" for="x-auto-103" htmlfor="x-auto-103" style="position: relative; left: 1px; top: 0px;">Checkbox2</label>
</div>
<div id="x-auto-106" class="x-form-check-wrap x-form-field x-abs-layout-item" style="position: relative; left: 300px; top: 20px;">
<input id="x-auto-105" class=" x-form-checkbox" type="checkbox" style="position: relative; left: 0px; top: 1px;" tabindex="0" value=""/>
<label id="ext-gen174" class="x-form-cb-label" for="x-auto-105" htmlfor="x-auto-105" style="position: relative; left: 1px; top: 0px;">Checkbox3</label>
</div>
</div>Best Regards,
Jonas

GXT Version: 2.1
GWT Version: 2.0

[jrk]

The following code snippet worked for me:



TabPanel tabs2 = new TabPanel();
tabs2.setAutoHeight(true);
tabs2.setAutoWidth(true);
tabs2.setPlain(true);

TabItem test4 = new TabItem("Tab2");

ContentPanel content = new ContentPanel();
content.setHeaderVisible(false);
content.setLayout(new AbsoluteLayout());
content.setSize(600, 800);

CheckBox checkBox1 = new CheckBox();
checkBox1.setBoxLabel("Checkbox1");
CheckBox checkBox2 = new CheckBox();
checkBox2.setBoxLabel("Checkbox2");
CheckBox checkBox3 = new CheckBox();
checkBox3.setBoxLabel("Checkbox3");

content.add(checkBox1, new AbsoluteData(0, 20));
content.add(checkBox2, new AbsoluteData(100, 20));
content.add(checkBox3, new AbsoluteData(200, 20));

test4.add(content);
tabs2.add(test4);

[jonas.esser]

Hello jrk,

thank you for testing my code. I try your code in a clean gxt-project and it worked.

I am in process to migrate a gwt-ext application to a gxt application.
I think some javascript or stylesheets from gwt-ext leading to this result.

I hope once I removed all gwt-ext dependencies completely, it works.

Best Regards,
Jonas