Hello,
i tried your fantastic library and had big trouble to get the BasicFullPageUI running as expected.
It always showed up only with two button lines and not like described in the wiki.

So a compared the wiki and the test source code and found out that at the end of the init method
the file creates a panel and does a second setContent on the main layout overwriting the responsive layout.

When i removed this second setContent everything works as expected !

        setContent(responsiveLayout);

        Panel panel = new Panel("Panel");
-->         setContent(panel);
        ResponsiveLayout layout = new ResponsiveLayout(ResponsiveLayout.ContainerType.FLUID);
        panel.setContent(layout);
        layout.addRow()
                .withMargin(ResponsiveRow.MarginSize.SMALL)
                .withVerticalSpacing(ResponsiveRow.SpacingSize.SMALL, true)
                .withHorizontalSpacing(true)
                .addColumn().withDisplayRules(12, 12, 12, 12).setComponent(new Label("Test"));


    }

Upon reading some documentation and forums it seems that layouts are responsible for displaying the component captions.

If i set the Responsive layout to scrollable using this Method

responsiveLayout.setScrollable(true)

No Scrollbar apears. When i have some Panels inserted to the RepsoniveLayout wich becomes bigger if the screen is smaller.

Maybe you have a solution

Not a real issue but might make the code looks nicer: For sass styling I add custom style classes to rows and columns and nested layouts as well. Would be nice if I could just write
addColumn().withDisplayRules(...).withStyleName("mycolumn")...

Vaadin Version: 8.1.3

I'm currently getting the following exception:

java.lang.ClassCastException: cannot assign instance of java.lang.String to field com.jarektoro.responsivelayout.Styleable.StyleableComponent.visibilityCSSAdapter of type com.jarektoro.responsivelayout.Styleable.VisibilityCSSAdapter in instance of com.jarektoro.responsivelayout.ResponsiveColumn

When defining nested ResponsiveLayout objects, they need to be created with ContainerType.FLUID or the UI won't draw properly. ;-)

I suggest you set FLUID as the default container type in the no-args constructor since we only need the top-most container to be FIXED.

I have the following setup: I have two panels, which are displayed like this:

    ResponsiveLayout responsiveLayout = new ResponsiveLayout().withScrollable(true);
    ResponsiveRow row = responsiveLayout.addRow().withSpacing(ResponsiveRow.SpacingSize.SMALL, true).withMargin(ResponsiveRow.MarginSize.SMALL);
    row.addColumn().withComponent(panel1).withDisplayRules(12, 12, 6, 6);
    row.addColumn().withComponent(panel2).withDisplayRules(12, 12, 6, 6);

How can I make both panels have the same height (without knowing which one is bigger) if they are side by side, but not if they aren't?

There is currently a way to center a component in a column with the withCenteredComponent method.

I would like to have something similar to push the component at the far right of the column. I could then put that 'menu button' at the right end of a phone screen

Thanks.

IE11 only partially supports Flexbox.
Should add a fallback for using Older Syntax Flexbox on IE11

I hava a grid in a two-col row. I want the column to hide under certain circumstances and to show back. As soon as the rs-visible-xx css class is set on the col containing my grid, the last col header spans over the row below it. If this class is not there, it's all working fine.

With rl-visible-xx

Without rl-visible-xx

We have to add these CSS classes to fix a wrong behaviour with some display resolutions:

@media only screen and (min-width: 75em) {
  .rl-col-lg-2 {
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis:16.66666667%;
    max-width: 16.66666667%;
  }
}

@media only screen and (min-width: 62em) {
  .rl-col-md-2 {
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
}

@media only screen and (min-width: 48em) {
  .rl-col-sm-2 {
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
}

Is there a specific reason why ResponsiveColumn extends StyleableComponent and not CssLayout?

This introduces an unnecessary div, which makes css tweaking more difficult.

In the alpha version i was able to set percentage as width to the components and its working fine when i upgraded to new version the percentage as width is working but the responsiveness goes away.

Hi Jarek

Are there any plans to upgrade from Vaadin 7 to 8?
We're using your library in a Vaadin 8 Project currently which worked fine so far. But now we wanted to extend the ResponsiveColumn and get compilation errors.

Thanks a lot for your answer and at this point thank you for your great work as well!

Cheers, Nick

It's great to have the possibility to set margins to be hidden on some screen sizes, but I think the withMargin should be more fluent, like the ResponsiveColumn visibility :

public ResponsiveRow withMargin(MarginSize size, boolean xs, boolean sm, boolean md, boolean lg)

That way you can have something like :
row.withMargin(MarginSize.NORMAL, false, false, true, true).withMargin(MarginSize.SMALL, true, true, false, false)

What do you think?

Hi,

I tried in V8.4.3 with annotated UI and created nested example. Filled layout to a modal resizable window but nothing happened when resized.
I missed css (not required by docs) or how should be to use it?

Thanks,
Karl

@Viewport("width=device-width, initial-scale=1")
public class MyUI extends UI {
....
private void tryResponsive() {
Window dialog = new Window("Responsive - resize it");
Component layout = PopupUI.getLayout2();
layout.setSizeFull();
dialog.setContent(layout);
dialog.setResizable(true);
ui.addWindow(dialog);
}
public static Component getLayout2() {
ResponsiveLayout responsiveLayout = new ResponsiveLayout();
ResponsiveRow row = responsiveLayout.addRow();

    row.addColumn().withDisplayRules(12, 6, 4, 4).withComponent(createNestedLayout());
    row.addColumn().withDisplayRules(12, 6, 4, 4).withComponent(createNestedLayout());
    row.addColumn().withDisplayRules(12, 6, 4, 4).withComponent(createNestedLayout());

    return responsiveLayout;

}

public static ResponsiveLayout createNestedLayout() {
    ResponsiveLayout nestedLayout = new ResponsiveLayout();
    ResponsiveRow nestedLayoutRow = nestedLayout.addRow();

    Label label = new Label("Title!");
    label.setSizeFull();

    Button button = new Button("", FontAwesome.ANCHOR);
    button.addStyleName(ValoTheme.BUTTON_PRIMARY);
    button.setSizeFull();

    TextField field = new TextField();
    field.setPlaceholder("Description");
    field.setSizeFull();


    nestedLayoutRow.addColumn().withDisplayRules(12, 6, 4, 4).withComponent(label);
    nestedLayoutRow.addColumn().withDisplayRules(12, 6, 4, 4).withComponent(button);
    nestedLayoutRow.addColumn().withDisplayRules(12, 6, 4, 4).withComponent(field);


    return nestedLayout;
}

Try to be at the head of both, people who know either Vaadin or Responsive Web Design. What things they might come to expect to use here that either won't be available or is not available at this point?

In the current API, for a specific row, we can enable only horizontal or vertical spacing.

Could we add the possibility to do that with a row margin (so only set top/ bottom margin or left/right margin)?

I would like this so I can "ident" a list of element under its parent.

Thanks.

Hi,

at first i really like this addon and am using it at the moment for a project. While doing some experimenting with the best way to to use the addon i realised that I would really like to be able to define visibility rules for rows. At the moment I can simulate that by just setting visibility rules for every Column in that row but I think that this isn't really the smart thing to do, mainly because it just works when the row includes nothing but Columns.

At the moment i helped myself with the following extension:

`public ResponsiveRow withVisibilityRules(boolean xs, boolean sm, boolean md, boolean lg) {

	for (Iterator<Component> iterate = this.iterator(); iterate.hasNext(); ) {
		Component component = iterate.next();

		if (component instanceof ResponsiveColumn) {
			((ResponsiveColumn) component).setVisibilityRules(xs, sm, md, lg);
		}
	}
	return this;
}`

So is there a possibility to add this feature?

Instead of extending CssLayout, maybe we can compose out object to use them.
By doing this we don't inherit the behaviour of CssLayout and provide a cleaner api.

I guess we should implement a more generic vaadin Layout Interface.

There should be a fluent equivalent of com.jarektoro.responsivelayout.ResponsiveColumn#setAlignment :
public ResponsiveColumn withAlignment(ColumnComponentAlignment componentAlignment) {

Thanks.

Hi. Thank you for this addon!
Its possible to use only Java 7, at least for Vaadin 7?
Looking at the source, of the branch responsive-layout-1.3.4, i've note that Java 8 are used only in test classes.

When using the Responsive Layout in a Vaadin Window the Responsive Columns still get rescaled by the browser window width and height, that makes it impossible to work within a Vaadin window.

If the Window is maximized, it will, for sure, work, because it uses browser width and height.
But if the Window Size is smaller, resizing the Window won't actually make the Responsive Layout rearrange or rescale the Rows and Columns.

I want to use RL in my Vaadin 10 project.

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

Hi, can I change css "width rules"? In my case xs is to wide, so I would like to change for example:

@media only screen and (min-width: 48em)
to
@media only screen and (min-width: 33em)

and so on. But it is a built-in css. There is any possibility to change it?

Thanks.
Karl

Hi,
how set aligment of ResponsiveColumn? I used col2.setAlignment(ColumnComponentAlignment.RIGHT); but doesn't work.
I would a row with 3 columns. The first should be aligned to left, the 2nd e 3nd aligned to right.
I use the last version of vaadin responsive-layout addon and Vaadin 7.6.2
Thank you !

Given the next rules of current API usage

• A ResponsiveLayout is supposed to contain only ResponsiveRow components
• A ResponsiveRow component can contain only ResponsiveColumn elements.
• A ResponsiveColumn component can only contain a single component inside it with it's configured widths on each predefined size

Then a fluent-like api can be created to simplify the usage of the 3 main clases of this responsive layout.

Some quick-n-dirty examples

ResponsiveLayout rl = RL.makeNew()
   .addRow(RL.newRow()
                          // 0 means hidden, and optional alignment overload
                          .addColumn(0,12,6,6, grid, Alighnment.BOTTOM_RIGHT)
                          .addColumn(0,12,6,6, filterButton)
                     ).
   .addRow(RL.newRow()
                          .addColumn(0,12,6,6, newButton)
                          .addColumn(0,12,6,6, editButton)
                     )
     );
setContent(rl);

Just an initial idea, this should be worked out.

If ResponsiveColumn would implement com.vaadin.ui.SingleComponentContainer it could be used as Container for com.vaadin.navigator and probably other purposes.
pro: could easily be implemented - no new functionality
con: bit more messy API (two methods for same purpose e.g. setContent and setComponent)

There is a scrollbar showing in the Panel with the following code:

ResponsiveLayout layout = new ResponsiveLayout(ResponsiveLayout.ContainerType.FLUID)
        setCompositionRoot(layout) // 'this', is a Vaadin Panel
        layout.with {
            addRow().withMargin(ResponsiveRow.MarginSize.SMALL, true).withVerticalSpacing(ResponsiveRow.SpacingSize.SMALL, true).withHorizontalSpacing(true).with {
                addColumn().withDisplayRules(12, 12,12,12).setComponent(new Label("Test"))
            }
        }

I did some testing, and it seems to be caused by the usage of both withMargin(ResponsiveRow.MarginSize.SMALL, true).withVerticalSpacing(ResponsiveRow.SpacingSize.SMALL, true)

Thanks.

I have another project that already exists and uses Twitter Bootstrap. I'm migrating this app to be completely on Vaadin and I want to use this responsive layout plugin. But, the HTML generated is all twisted since this plugin and Twitter Bootstrap uses the same CSS class names.

Do you any idea how I could make them work together?

Thanks.

Twitter Bootstrap lets you lay out components in a fluid container (vs. column based container) which allows component to be drawn one after the other on a row and overflow when the screen shrinks.

It would be nice to have a way to do that with this lib.

It kind of work when adding a CssLayout to a col, but the margins set on the row are not applied.

When building layouts we should not make the users use hard coded strings.

This will improve the maintainability of the code as we will be using our own pre-fixed styles.

Hi,
can you please define some (or most of) classes and properties as proteced?
In my case, I want to change the rules at runtime to realize a column maximize feature. But the current rules are not available to me (even in a derived class) and I have to save them twice.

Oliver

Text field label truncating in ResponsiveColumn.

In your ColumnTest.java Example, try to put a long column name for a text box. It wont wrap automatically. It will cut the text box name. Do we have any quick fix for this?

Firstly , I have to say it is really a great addon. But I do encounter one issue recently, which is a showstopper.

some classes, like "VisibilityCSSAdapter", are not implement the "Serializable" interface. it will fail in the mod cluster environment when switch the node to another. because the session could not be replicated.

Any answer for this will be appreciated.

When GridLayout component with columns and rows added into the ResponsiveColumn it,some components start to move off the screen.

Code :
`ResponsiveLayout responsiveLayout = new ResponsiveLayout();
GridLayout lPersonalAccount = new GridLayout(3, 3);
responsiveLayout.setSizeFull();
responsiveLayout.setStyleName("border");
ResponsiveRow rootRow = responsiveLayout.addRow();
rootRow.setHeight("100%");

    ResponsiveColumn firstColumn = new ResponsiveColumn(12, 6, 4, 4);
    rootRow.addColumn(firstColumn);

    ResponsiveColumn secondColumn = rootRow.addColumn().withDisplayRules(12, 6, 4, 4);

    ResponsiveRow personalRow = new ResponsiveRow();
    ResponsiveColumn personalContent = new ResponsiveColumn(12);
    personalContent.setComponent(lPersonalAccount);

    personalRow.addColumn(personalContent);

    firstColumn.setComponent(personalRow);

    masterLayout.addComponent(responsiveLayout);`

Could you please include the project license into the repository?

Add the feature requested in #145 to the responsive-layout

When using vaadin 8.1, i'm getting this error:
Uncaught SyntaxError: Invalid or unexpected token

When using regular spacing, no scrollbar is appearing :

ResponsiveRow row = layout.addRow().withMargin(ResponsiveRow.MarginSize.SMALL).withSpacing(true)
row.addColumn().withDisplayRules(12, 12, 6, 6).withComponent(panel1)
row.addColumn().withDisplayRules(12, 12, 6, 6).withComponent(panel2)

result :

When using small spacing, a scrollbar is appearing :

ResponsiveRow row = layout.addRow().withMargin(ResponsiveRow.MarginSize.SMALL).withSpacing(ResponsiveRow.SpacingSize.SMALL, true)
row.addColumn().withDisplayRules(12, 12, 6, 6).withComponent(panel1)
row.addColumn().withDisplayRules(12, 12, 6, 6).withComponent(panel2)

Result :

Using only horizontal spacing (with small margin) : no scrollbar
Using only vertical spacing (with small margin) : scroll bar

Thanks.

In Twitter Bootstrap, the default container has a maximum width (it won't fill the width on huge screens).

Use .container for a responsive fixed width container.
Use .container-fluid for a full width container, spanning the entire width of your viewport.
ref: http://getbootstrap.com/css/#overview-container

Container width None (auto) 750px 970px 1170px

This allow applications to be centered on big screens (like Facebook for example)

Is that something you would consider adding to the library?

Hi there,
I'm trying to use a Grid inside a ResponsiveColumn. I think the trouble I meet is about the Grid's Height.
In order to force the Grid Height calculation, I've put the Grid inside a Panel container; but it doesn't work because the Grid doesn't display or better it seems to have a 0px Height.

	grid.setDataProvider(new GridDataProvider());
	grid.addColumn(Row::getCode);
	grid.addColumn(Row::getDescription);
	grid.getColumns().get(0).setCaption("Code");
	grid.getColumns().get(0).setSortable(false);
	grid.getColumns().get(1).setCaption("Description");
	grid.getColumns().get(1).setSortable(false);
	grid.setSizeFull();
	Panel panel = new Panel();
	panel.setSizeFull();
	panel.setContent(grid);
	ResponsiveLayout responsiveLayout = new ResponsiveLayout(ResponsiveLayout.ContainerType.FLUID).withFullSize();
	ResponsiveRow rootResponsiveRow = responsiveLayout.addRow();
	rootResponsiveRow.setSizeFull();
	ResponsiveColumn column = rootResponsiveRow.addColumn().withComponent(panel);
	column.setSizeFull();
    setContent(responsiveLayout);

Diving in the JavaScript at runtime I've found a DIV (yellow circled) having the class v-grid-tablewrapper with height: 0px; furthermore I noticed an upper DIV (blue coloured) having col-container class with only width: 100% attribute and not Height attribute.
After some trials it seems all working good when at runtime I manually add the height: 100% attribute and after a browser resize.
... but I'm not sure this is the right way toward my goal.
Every hint or even a workaround will be appreciate.
Thanks in advance.

I would like to be able to specify for which screen size a margin is to be applied.

For example, I would like to have a margin between my menu and content on big screen, but I don't want it on phones to keep screen space for content.

What do you think?

It would be nice to have the values configurable which decide if you are in XS, SM, MD or LG mode.

For this I would suggest to extract the values to variables like $xs-max-width and don't include the compiles css into the addon, but add a Vaadin-Stylesheets entry to the MANIFEST.MF

By the way: is there a reason that sometimes px is used as a unit and sometimes em?

Remove Inheritance from CSSLayout and gain finer control over the layout properties

Is there a way to set vertical alignment?

Here is what my UI looks like

I would like the button to be pushed down so it aligns with the combo box.

        ResponsiveLayout layout = new ResponsiveLayout()
        layout.addRow().withSpacing(true).with {
            ...
            addColumn().withDisplayRules(12, 12, 2, 2).withComponent(clientConfig)
            addColumn().withDisplayRules(12, 12, 2, 2).withComponent(toolbar)
        }

Thanks.