Hi guys,
I have one input field “a” within a container R that has a row layout.
For tablet/mobile devices, I created a container C which is similar to container R, but with a column layout.
In container C, I therefore have one input field “b” similar to “a”.
My first question is: while dealing with container layout, is it the only way to have different layouts? Because it seems this property is not changeable in the element condition “when…”.
My second question is: how do you sync “a” with “b”? if a user type “test” in the input “a”, and changes his browser screen width until reaching my tablet breakpoint, then input “a” will be replaced by input “b”. So input “b” must have the value of a so that the user doesn’t notice something has changed.
To answer the second question, I did the steps below:
- create an intermediary variable “v”
- set the “default value”/“initial content” properties of “a” and “b” to equal “v”
- whenever input “a” changes, display data with input a value in “v” and reset input “b”
- whenever input “b” changes, display data with input a value in “v” and reset input “a”
This worked, but I was quite surprised I needed all these steps and thought there might be something much simpler.
Looking forward to hearing to different approaches 