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);

[mscottTU]

Some Ugly examples: At size MD i'd hope to see something like this where the green rectangles are the components - they look like they're right aligned and left aligned because of the empty columns to the left and right of them.

At size XS the components appear in a single column and they are centered.

But, if they are aligned right, then at size XS, then they will show up on the right size of the single column.

And the other components will show up on the left side.

[mscottTU]

Whatever is happening with withRightAlignedComponent(c) and withCenteredComponent(c) is responsible for the strange behavior of the Captions.

It would be perfect otherwise!

[JarekToro]

Ugly yet descriptive.

Try this (each row is like 4 of the Orange Boxes with the directComponent being the green.)

ResponsiveLayout nestedLayout = new ResponsiveLayout();

        //first Row
        ResponsiveRow row = nestedLayout.addRow()
                .withAlignment(Alignment.MIDDLE_CENTER)
                .withSpacing(true);

        row.addColumn().withDisplayRules(12, 12, 4, 4)
                .withOffset(ResponsiveLayout.DisplaySize.MD,2)
                .withOffset(ResponsiveLayout.DisplaySize.LG,2)
                .withCenteredComponent(directComponent);
        row.addColumn().withDisplayRules(12, 12, 4, 4)
                .withCenteredComponent(directComponent);

        //second Row
        ResponsiveRow row2 = nestedLayout.addRow()
                .withAlignment(Alignment.MIDDLE_CENTER)
                .withSpacing(true);

        row2.addColumn().withDisplayRules(12, 12, 4, 4)
                .withOffset(ResponsiveLayout.DisplaySize.MD,2)
                .withOffset(ResponsiveLayout.DisplaySize.LG,2)
                .withCenteredComponent(directComponent);
        row2.addColumn().withDisplayRules(12, 12, 4, 4)
                .withCenteredComponent(directComponent);

 //third Row
        ResponsiveRow row3 = nestedLayout.addRow()
                .withAlignment(Alignment.MIDDLE_CENTER)
                .withSpacing(true);

        row3.addColumn().withDisplayRules(12, 12, 4, 4)
                .withOffset(ResponsiveLayout.DisplaySize.MD,2)
                .withOffset(ResponsiveLayout.DisplaySize.LG,2)
                .withCenteredComponent(directComponent);
        row3.addColumn().withDisplayRules(12, 12, 4, 4)
                .withCenteredComponent(directComponent);

[mscottTU]

Okay, I'm out of time for today, but I'll try this tomorrow. Thanks!

In the meantime, is there anyway we could investigate what's happening with these methods?

withRightAlignedComponent(c) and withCenteredComponent(c)

Because the columns and rows are doing what they should. They're perfect. And, the components would be aligned on the right and the center as they should. It's just the captions that are weird. But they are only weird when those two methods are used.

If there was a way to get those methods to work as they already do, but fix the caption issue, then this issue would be solved :)