weird behavior of elements in responsive layout

I wanted to make two datepickers in one row for big screen and for smaller screen I wanted it to be in two rows. Seems exactly like description of what webix responsive option could handle.

This is what I got http://webix.com/snippet/4f6017d4

But when I resize window (I tried on mobile too) I see that first datepicker become bigger than first one. Weird, cause I set width property for both of them.
I managed to make it better using additional cols and paddings (otherwise I got another kind of size and position problem)

http://webix.com/snippet/bd6fa65a

but this setup looks little too much complicated, what’s going on, what did I miss?

is it bug, is it expected behavior?

anyone from the dev team?

Hello and sorry for the delay.

We will try to improve the current behavior in the upcoming major release, but for now, the best way is to set the fixed width to the datepicker’s input and the minimal width for the entire control:

http://webix.com/snippet/ac7a6c75

Thanks. Can you provide any info about what will be improved for responsive design in upcoming major release? Do you mean 4.0? In the blog post regarding 4.0 (and in trello roadmap) I didn’t saw responsive design improvements mentioned.

Existing “responsive” functionality of layouts is a bit clumsy, it doesn’t always work correctly. So the major part of improvement will be to have a stable functionality of existing “responsive” features.

Additionally, we plan to:

  • add a special support for datatable, which will be able to change the set of visible columns, based on a screen size.

  • add float layout support, which will rearrange elements automatically based on screen size ( without need to define “responsive” attributes manually )

Any idea when we can expect 4.* release?

The release is scheduled for the end of September/beginning of October