Stu LeibowitzMay 12, 2016 at 10:01 pm #1767
I have two side-by-side Panels inside a Horizontal Section.
How can I “responsively” stack the two panels vertically on a smaller display?
In my current coach, as I decrease the width of my browser, the text boxes just keep getting smaller and smaller. In other toolkits I have used, the default behavior is to stack the two horizontal sections vertically when the horizontal space starts getting “too small.”Rackley BorenMay 12, 2016 at 11:00 pm #1768
The default setting for Appearance > Layout Flow is “Horizontal” which is similar to the stock Coaches and can make you end up with the ever shrinking child controls as you experienced. If you are just looking for a simple stacking then you can use “Horizontal Auto-wrap” from that drop down option. This will push everything underneath as you continue to shrink the screen.
SPARK also provides more fine grained responsive design options through the Responsive Sensor control, which allows you to setup “box factors” with desired widths. When you couple that control with the Responsive > Behaviors configuration option of the Horizontal Layout control, for example, you have a lot more options than just the wrapping mentioned above as various alignment, width, and layout of child views as well as visibility, width, height and style options become available.
Our Knowledge Base article on SPARK Layout Capabilities may come in handy for you. You also may want to take a look at the SPARK Showcase process application that should have been created when you imported SPARK into your BPM environment. There are a number of showcases for our layout controls, including the responsive sensor if you are interested in seeing a working example.
Rackley BorenStu LeibowitzMay 13, 2016 at 8:04 am #1773
Thank you for your excellent (and prompt) reply!
The Horizontal Auto-wrap is a perfect way to demonstrate my requirement. I was able to get that to work.
Just to document one additional thing I had to do to get this to work: my Horizontal Section contains two Vertical Sections. I had set the width of both the Vertical Sections to 50% (in the Appearance section). This caused the Horizontal Auto-Wrap to stack my two sections “no matter what,” even in the WYSIWYG view. Once I removed the 50% value from both vertical sections, the Horizontal Auto-Wrap worked perfectly as you described.
I will also dig into the other options you described. The documentation and examples are very thorough and well done.Rackley BorenMay 13, 2016 at 2:19 pm #1788
My pleasure. The fact that you had to go and change your layout to accommodate the is an exact reason to use the Responsive sensor as you have better control over what goes on and can set your values. If you do not want to have to be so specific, you can use the Page Layout controls mentioned in the SPARK Layout Capabilities article which are based heavily on Bootstrap’s mobile first fluid grid system that scales up to 12 columns. These controls provide functionality comparable to the new grid layout in 8.5.7 (and even let’s you have this kind of responsive design in heritage coaches).
You must be logged in to reply to this topic.