PDA

View Full Version : ColumnLayout and scrollbars



Feltros
10 Jul 2009, 8:06 AM
I've been using the form ColumnLayout inside a LayoutContainer - My basic setup is


LayoutContainer main;
LayoutContainer left;
ContentPanel right; //Because I needed to have a heading

FormData formData = new FormData("-5");

LayoutContainer rightLower;


All initialised. Left filled with junk so I can see its size/setup.



FieldSet form = new FieldSet();
form.setLayout(new FormLayout()); //With label align set to left, I just cba to type it out

form.add(some comboboxes,formData);
form.add(rightLower,formData); //Makes no diff if I have this added with formData or not


ComboBoxes have listeners so that they add to rightLower depending on circumstances.

The first problem is this: If I set ColumnData to .5 then the panels decide they are slightly too large to fit next to each other (in columns) and re-arrange to be left on top, right underneath.



main.add(left, new ColumnData(.5));
main.add(right, new ColumnData(.5));


The solution so far is to set it to .49 for each and it works, but I found this a bit peculiar having not specifically set up any sizes for the panels and theres nothing inside forcing them to be bigger than 50% width.

This solution however breaks when I choose an option that adds enough rows to rightLower to mean a vertical scrollbar has to appear in the main panel (next to the rightPanel) forcing it to again re-arrange so it goes underneath the left panel.

To get this not to happen I have to use new ColumnData(.45) and this ends up leaving a massive gap to the right of the right panel looking awful!

To summarise: The 2 panels refuse to fit with ColumnData set to .5 despite nothing obvious forcing them not to; if a scrollbar turns up (because right panel is increasing in size) the width problem is even worse as the inner panels don't take into account the change in available space! Lowering the ColumnData width leaves a big whitespace and has to be lowered ridiculously to fix the issue.

Any help is massively appreciated :) Hope i've been clear as to whats going on.

sven
10 Jul 2009, 8:07 AM
columnLayout.setAdjustForScroll(true) :)

Feltros
10 Jul 2009, 8:10 AM
Thought i'd mention what i've tried so far to fix:

Adding directly to the FieldSet instead of rightLower in case the extra layoutContainer was behaving peculiar has no effect.
Leaving left panel empty has no effect, when the scrollbars turn up it still takes up more than 50% of the new width of the main panel; forcing the right panel to go onto a new row.
I've not setSize() on any component inside anything.

Feltros
10 Jul 2009, 8:13 AM
Sven - I thought that'd be a genius moment then and everything would work perfectly... alas it didn't. The two panels still refuse to sit alright at .5, it works at .49 (with ridiculous whitespace) and the panel still moves when the scrollbars turn up :S

Edit - My bad, the scroll works now, but it still won't sit at 0.5 :S

sven
10 Jul 2009, 8:14 AM
You should post a fully working code that people can run to demonstrates the issue you have

Feltros
10 Jul 2009, 8:17 AM
Apologies, your solution is now working perfectly, I found one of the junk bits in my left panel was forcing size still.

Thanks for the assistance, much faster reply than i've ever had before :P

navi75
4 Aug 2009, 9:28 AM
I am using IE7 with GXT2.0.1 and GWT1.7. I am facing the columnLayout isuue even if i set the columnLayout to be .49 for my left and right fieldset. In IE7 it still displays the fieldset in one row and moving the other fieldset into another row taking the whole width.

Below is the code snippet for the same

public class FormTest extends FormPanel {

public FormTest() {
super();
FormData formTestData = new FormData("80%");
setId("formTestPanel");
setPadding(0);

setHeading("Form Test");

setLayout(new FormLayout());
setButtonAlign(Style.HorizontalAlignment.CENTER);

LayoutContainer mainContainer = new LayoutContainer();
ColumnLayout mainColumnLayout = new ColumnLayout();
mainColumnLayout.setAdjustForScroll(true);
mainContainer.setLayout(mainColumnLayout);

LayoutContainer leftContainer = new LayoutContainer();
leftContainer.setLayout(new FormLayout());
leftContainer.setStyleAttribute("paddingRight","20px");

LayoutContainer rightContainer = new LayoutContainer();
rightContainer.setLayout(new FormLayout());
rightContainer.setStyleAttribute("paddingLeft","20px");

TabPanel mainTabPanel = new TabPanel();
mainTabPanel.setId("mainTabPanel");
mainTabPanel.setBorders(false);

TabItem Item1 = new TabItem();
Item1.setStyleAttribute("padding","5px");
Item1.setText("Item1");
Item1.setLayout(new FormLayout());

FieldSet leftInfoSet = new FieldSet();
leftInfoSet.setHeading("Enter Information");
leftInfoSetsetCollapsible(true);

FormLayout leftInfoLayout = new FormLayout();
leftInfoLayout.setLabelWidth(75);
leftInfoSet.setLayout(leftInfoLayout);

TextField<String> Title1 = new TextField<String>();
Title1.setFieldLabel("Title1");
leftInfoSet.add(Title1, formTestData);

TextField<String> Title2 = new TextField<String>();
Title2.setFieldLabel("Title2");

leftInfoSet.add(Title2, formTestData);

FieldSet rightInfoSet = new FieldSet();
rightInfoSet.setHeading("Enter Information2");
rightInfoSet.setCollapsible(true);

FormLayout rightInfoLayout = new FormLayout();
rightInfoLayout.setLabelWidth(75);
rightInfoSet.setLayout(rightInfoLayout);

TextField<String> Name = new TextField<String>();
Name.setFieldLabel("Name");
rightInfoSet.add(Name, formTestData);

TextField<String> Telephone = new TextField<String>();
Telephone.setFieldLabel("Telephone");
rightInfoSet.add(Telephone, formTestData);

leftContainer.add(leftInfoSet);

rightContainer.add(rightInfoSet);

ColumnData leftColumnData = new ColumnData(.40);
ColumnData rightColumnData = new ColumnData(.40);

mainContainer.add(leftContainer,leftColumnData);
mainContainer.add(rightContainer,rightColumnData);

Item1.add(mainContainer);

mainTabPanel.add(Item1);

add(mainTabPanel);

Button saveButton = new Button("Save");
saveButton.setMinWidth(5);

Button cancelButton = new Button("Cancel");
cancelButton.setMinWidth(5);

Button previewButton = new Button("Preview");
previewButton.setMinWidth(5);

setId("form-contentPanel");
setHeading("Form Test");
setLayout(new FitLayout());
setWidth(1200);
setHeight(400);
setCollapsible(true);
setButtonAlign(Style.HorizontalAlignment.CENTER);
addButton(saveButton);
addButton(previewButton);
addButton(cancelButton);

}

Also i have a horizontal panel which has the ThemeSelector, when i select any other theme from the ThemeSelector, it reloads the whole page again which shows the fieldset in one row and does not layout them in the column.

Why the reload of the theme is causing an issue with the layout of the fieldset to break from the column to displaying them in a row.