Ruby green_shoes flows

Question

System Setup

Windows 10 Education Edition 64bit
Ruby 2.3.0
green_shoes installed via gem install green_shoes

I am new to green shoes and ruby in general. I was trying to write a simple real income calculator for my economics class and was having trouble with it.

The code that I wrote works fine with the regular shoes install but I wanted to use a gem version so I selected green_shoes which seemed the best.

The problem I am having is that the para objects are supposed to display to the left of the edit_line objects like

Para Edit_Line

but are instead displaying like

Para
Edit_Line

Im not sure what I am doing wrong but if somebody could help it would be awesome.

My Code

require 'green_shoes'
Shoes.app(title: "Real Income Calculator", width: 400, height: 180) do
    stack do
        para "Real Income Calculator"
        flow do
            @nip = para "Nominal Income"
            @nip.style(margin_right: 10)
            @nit = edit_line
            @nit.style(width: 150)
        end
        flow do
            @cpip = para "CPI"
            @cpip.style(margin_right: 10)
            @cpit = edit_line
            @cpit.style(width: 80)
        end
        @calc = button "Calculate"
        @calc.click do
            ni = @nit.text.to_i
            cpi = @cpit.text.to_i
            ri = (ni/cpi)*100
            alert(ri)
        end
    end
end

Code that I modeled this after from green_shoes manual page http://ashbb.github.io/green_shoes/Check.html

Shoes.app do
  stack do
    flow do
      check; para "Frances Johnson", width: 200
    end
    flow do
      check; para "Ignatius J. Reilly", width: 200
    end
    flow do
      check
      para "Winston Niles Rumfoord", width: 200
    end
  end 
end

Answer 1

Maybe you should "upgrade" to either Shoes3.3.1 or Shoes4 (below tested on 3.3.1, should be ok on Shoes4 too)

Shoes.app title: "Real Income Calculator", width: 400, height: 180 do
    stack do
        para "Real Income Calculator"
        flow do
            @nip = para "Nominal Income", margin_right: 10
            @nit = edit_line "", width: 150
        end
    end
end