Alignment Issues

[mscottTU]

Great addon! Everything works except alignment.

Have a few components in the ResponsiveLayout, rows and columns that are on the left despite default alignment in the rows being set to middle center. The bottom component is in a regular vertical layout and aligning as expected.

ResponsiveLayout nestedLayout = new ResponsiveLayout();
ResponsiveRow nestedLayoutRow = nestedLayout.addRow().withAlignment(Alignment.MIDDLE_CENTER);
nestedLayoutRow.addColumn().withDisplayRules(12,6,6,4).withComponent(c);

[JarekToro]

The image you posted, is that suppose to be for xs,sm,md,lg?

[mscottTU]

That image is xs. Here's some inspector code.

There are also some nested columns and rows, however only one column contains a component and the rest are set to 0 for screen sizes where they should not appear. Also MIDDLE_CENTER is set for all rows. For example:

ResponsiveLayout nestedLayout = new ResponsiveLayout();
ResponsiveRow nestedRow = layout.addRow().withAlignment(Alignment.MIDDLE_CENTER);
nestedRow.setSizeFull();

nestedRow.addColumn().withDisplayRules(12, 12, 6, 6).withComponent(createInnerNestedLayout(cbTopic, false, true));
nestedRow.addColumn().withDisplayRules(12, 12, 6, 6).withComponent(createInnerNestedLayout(cbDocument, true, true));
nestedRow.setDefaultComponentAlignment(Alignment.MIDDLE_CENTER);
nestedRow.setSpacing(true);

public ResponsiveLayout createInnerNestedLayout(Component c, boolean isFirst, boolean isTop) {
     ResponsiveLayout nestedLayout = new ResponsiveLayout();
     nestedLayout.setSizeFull();
     ResponsiveRow nestedLayoutRow = nestedLayout.addRow().withAlignment(Alignment.MIDDLE_CENTER);

     if (isFirst) {
         nestedLayoutRow.addColumn().withDisplayRules(12, 12, 6, 4).withComponent(c);
         nestedLayoutRow.addColumn().withDisplayRules(0, 0, 6, 4);
         nestedLayoutRow.addColumn().withDisplayRules(0, 0, 0, 4);
     } else {
         nestedLayoutRow.addColumn().withDisplayRules(0, 0, 0, 4);
         nestedLayoutRow.addColumn().withDisplayRules(0, 0, 6, 4);
         nestedLayoutRow.addColumn().withDisplayRules(12, 12, 6, 4).withComponent(c);
     }
     nestedLayout.setSpacing();
     return nestedLayout;
}

[JarekToro]

Thank you for posting the inspector very helpful

I understand the issue. So because it's in xs mode the Column takes the full width. That is working right and is aligned right(100% width aligned center is still 100% width). However, the components in the Column are not aligned. Use withCenteredComponent() instead of withComponent()

[JarekToro]

Not the best picture in the world lol

Blue is the ResponsiveLayoutContainer
Green is the Row
Red is the Column
Purple Is the component of the Column.

[mscottTU]

Thanks for finding the issue!

But, there's some more strange behavior now.

The component caption is aligning left and the actual component is aligning right.

[JarekToro]

So the caption is set on the Column which is taking up the full width. If you move the Caption to the Component within the Column you will be good.

[mscottTU]

But the Caption is already set to the Component, not the Column.

Here's the instantiation
ComboBox cbDocument = new ComboBox("Use preset Document:", docTypes);

Here's the signature from Vaadin
public ComboBox(String caption, Collection<T> options)

[JarekToro]

Sorry I dont know how I missed this. You said "are set to 0 for screen sizes where they should not appear" that is not the proper way to hide and show items. Use setVisibilityForSize() or withVisibility()

This may be throwing off the CSS

[mscottTU]

Okay, I've changed the code to use setVisibilityRules(), but same result.

Also tried withVisibilityRules(), but also the same result.

Code is below:

public ResponsiveLayout createInnerNestedLayout(Component c, boolean isFirst) {
     ResponsiveLayout nestedLayout = new ResponsiveLayout();
     ResponsiveRow nestedLayoutRow = nestedLayout.addRow().withAlignment(Alignment.MIDDLE_CENTER);
     ResponsiveColumn inner1, inner2;

     if (isFirst) {
         nestedLayoutRow.addColumn().withDisplayRules(12, 12, 6, 4).withCenteredComponent(c);
         inner1 = nestedLayoutRow.addColumn().withVisibilityRules(false, false, true, true);
         inner2 = nestedLayoutRow.addColumn().withVisibilityRules(false, false, false, true);
     } else {
         inner2 = nestedLayoutRow.addColumn().withVisibilityRules(false, false, false, true);
         inner1 = nestedLayoutRow.addColumn().withVisibilityRules(false, false, true, true);
         nestedLayoutRow.addColumn().withDisplayRules(12, 12, 6, 4).withCenteredComponent(c);
     }

     inner1.addRule(ResponsiveLayout.DisplaySize.MD, 6);
     inner1.addRule(ResponsiveLayout.DisplaySize.LG, 4);

     inner2.addRule(ResponsiveLayout.DisplaySize.LG, 4);

     nestedLayout.setSpacing();

     return nestedLayout;
}

[JarekToro]

Actually What is the purpose of these lines?
The reason I ask is because Columns usally have a componant inside of them.

nestedLayoutRow.addColumn().withDisplayRules(0, 0, 6, 4);

Depending on what your trying to accomplish.
You can use withOffset()

[mscottTU]

I was just trying to get the components to appear aligned the way I wanted, but I saw that you can't set alignment for individual components. So I created extra columns to pad the components on the left and right to make it look like they're aligned Middle_Right and Middle_Left.

Does that make sense?

[mscottTU]

I'm trying a lot of different combinations of code to build this the right way, but I think withCenteredComponent(c) is the method causing the captions to display to the left of the component.

[JarekToro]

 public void test(){
        ResponsiveLayout nestedLayout = new ResponsiveLayout();
        ResponsiveRow nestedRow = nestedLayout.addRow().withAlignment(Alignment.MIDDLE_CENTER);
        nestedRow.setSizeFull();

        nestedRow.addColumn().withDisplayRules(12, 12, 6, 6).withComponent(createInnerNestedLayout(cbTopic, false, true));
        nestedRow.addColumn().withDisplayRules(12, 12, 6, 6).withComponent(createInnerNestedLayout(cbDocument, true, true));
        nestedRow.setDefaultComponentAlignment(Alignment.MIDDLE_CENTER);
        nestedRow.setSpacing(true);


    }

    public ResponsiveRow createInnerNestedLayout(Component c, boolean isFirst, boolean isTop) {

Rows can be nested in Rows Directly, No need for a new ResponsiveLayout

        ResponsiveRow nestedLayoutRow = new ResponsiveRow().withAlignment(Alignment.MIDDLE_CENTER);

        if (isFirst) {
            // if its first you want a right alignment correct?
            nestedLayoutRow.addColumn()
                    .withDisplayRules(12, 12, 12, 12)
                    .withRightAlignedComponent(c);

        } else {
            // if its not first you want a left alignment correct?
           ResponsiveColumn column = nestedLayoutRow.addColumn()
                    .withDisplayRules(12, 12, 6, 4).withComponent(c);
           column.setAlignment(ResponsiveColumn.ColumnComponentAlignment.LEFT);


        }
        return nestedLayoutRow;
    }

[JarekToro]

I believe that there was just miscommunication from the api of how they work together.

Its hard to say exactly how it should be structured because I don't know exactly how it is suppose to look.

For example you really only need nested Rows if you want multiple Columns inside another Column.

[JarekToro]

You could give this a try if you want. Again I don't know what you want the layout to look like exaclty.

Try adding the Components Directly withCenteredLayout instead nesting for one Component.

ResponsiveLayout nestedLayout = new ResponsiveLayout();
        ResponsiveRow nestedRow = nestedLayout.addRow().withAlignment(Alignment.MIDDLE_CENTER);
        nestedRow.setSizeFull();

        nestedRow.addColumn().withDisplayRules(12, 12, 6, 6)
                .withCenteredComponent(directComponent);
        nestedRow.addColumn()
                .withDisplayRules(12, 12, 6, 6)
                .withCenteredComponent(directComponent2);
        nestedRow.setDefaultComponentAlignment(Alignment.MIDDLE_CENTER);
        nestedRow.setSpacing(true);