# Shoes: Stacks and Flows

**URL:** <https://www.ruby-forum.com/t/shoes-stacks-and-flows/192563>\
**Category:** Ruby\
**Created:** [August 2, 2010, 9:29am UTC](https://www.ruby-forum.com/t/shoes-stacks-and-flows/192563 "2010-08-02T09:29:54Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![callyworld](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/f17d59/32.png) [@callyworld](https://www.ruby-forum.com/u/callyworld)\
**Post date:** [August 2, 2010, 9:29am UTC](https://www.ruby-forum.com/t/shoes-stacks-and-flows/192563/1 "2010-08-02T09:29:54Z")

</div>

I’m still learning Shoes – working on basic formatting. I’m a little  
confused, though, with the results of this code:

app = Shoes.app do  
background “#FFFFFF”  
flow :width =\> 1.0 do  
stack do  
para “North America”  
button(“View”) do  
end  
end  
stack do  
para “Europe”  
button(“View”) do  
end  
end  
stack do  
para “Asia”  
button(“View”) do  
end  
end  
end  
end

After reading the manual, I had the impression that the above code would  
produce something like this:

text text text  
button button button

Instead I get:

text  
button  
text  
button  
text  
button

---

<div class="post-metadata">

**Author:** ![callyworld](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/f17d59/32.png) [@callyworld](https://www.ruby-forum.com/u/callyworld)\
**Post date:** [August 2, 2010, 10:54am UTC](https://www.ruby-forum.com/t/shoes-stacks-and-flows/192563/2 "2010-08-02T10:54:31Z")

</div>

On 2010-08-02 08:31:23 +0100, Terry M. said:

> ```
> end
> 
> ```
> 
> end  
> text  
> button  
> text  
> button  
> text  
> button

To get what you wanted you can do it like this:

Shoes.app do  
stack do  
flow do  
para “North America”  
para “Europe”  
para “Asia”  
end  
flow do  
button(“View 1”) do  
end  
button(“View 2”) do  
end  
button(“View 3”) do  
end  
end  
end  
end

Flow seems to go left to right so having in two flows like this works,  
otherwise you get everything going left to right in the order you add  
them.

~jbw

---

<div class="post-metadata">

**Author:** ![callyworld](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/f17d59/32.png) [@callyworld](https://www.ruby-forum.com/u/callyworld)\
**Post date:** [August 2, 2010, 11:15am UTC](https://www.ruby-forum.com/t/shoes-stacks-and-flows/192563/3 "2010-08-02T11:15:37Z")

</div>

If you set the widths of the stacks explicitly, they will flow in one  
line:

app = Shoes.app do  
background “#FFFFFF”  
flow :width =\> 1.0 do  
stack :width =\> 0.33 do  
para “North America”  
button(“View”) do  
end  
end  
stack :width =\> 0.33 do  
para “Europe”  
button(“View”) do  
end  
end  
stack :width =\> 0.33 do  
para “Asia”  
button(“View”) do  
end  
end  
end  
end

You’d do the same sort of thing in HTML to get this layout, so it’s  
probably the right way to do it.

jeremy

---

<div class="post-metadata">

**Author:** ![callyworld](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/f17d59/32.png) [@callyworld](https://www.ruby-forum.com/u/callyworld)\
**Post date:** [August 3, 2010, 6:57am UTC](https://www.ruby-forum.com/t/shoes-stacks-and-flows/192563/4 "2010-08-03T06:57:12Z")

</div>

jeremy Ruten wrote:

> If you set the widths of the stacks explicitly, they will flow in one  
> line:
> 
> app = Shoes.app do  
> background “#FFFFFF”  
> flow :width =\> 1.0 do  
> stack :width =\> 0.33 do  
> para “North America”  
> button(“View”) do  
> end  
> end  
> stack :width =\> 0.33 do  
> para “Europe”  
> button(“View”) do  
> end  
> end  
> stack :width =\> 0.33 do  
> para “Asia”  
> button(“View”) do  
> end  
> end  
> end  
> end
> 
> You’d do the same sort of thing in HTML to get this layout, so it’s  
> probably the right way to do it.
> 
> jeremy

Thanks. This does what I want.

Correct me if I’m wrong, but HTML doesn’t really have the construction  
equivalent of a “flow”. I wish it did, though!

---

<div class="post-metadata">

**Author:** ![callyworld](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/f17d59/32.png) [@callyworld](https://www.ruby-forum.com/u/callyworld)\
**Post date:** [August 3, 2010, 7:22am UTC](https://www.ruby-forum.com/t/shoes-stacks-and-flows/192563/5 "2010-08-03T07:22:44Z")

</div>

It doesn’t really, but it has a similar idea. In HTML, you might  
replace the stacks with

 elements and apply a “float: left;”  
style to them, specifying the width of each one. They’d then “flow” in  
a horizontal line like a Shoes flow. That’s all I meant in my HTML  
comparison.

jeremy