html - Breaking a <form> tag between different table columns -
i have <form>
using within simple table structure, attempting simple following fiddle:
https://jsfiddle.net/avrahamcool/ldnfq/
i trying create 3 columns in row spans 100% of viewport, each of resize automatically based on size of viewport evenly distributed across length of viewport.
i have haml structure unfortunately complicated fact breaking <form>
, <input>
's across 3 columns. don't know how preserve <form>
scope across 3 child <div>
s of row out messing desired css behavior of each column acting proper column of 1/3 of size.
past viewport size, column width not distributed evenly in implementation of table structure in first fiddle is.
here .haml
.front-page-test =form_for :proficiency_test |f| .column-test =f.label :first_name, 'first name' %br =f.text_field :first_name %br =f.label :family_name, 'family name' %br =f.text_field :family_name %br .column-test -@country = -right_countries = @country.collect{|x| [x,x]} =f.select(:country, right_countries, :prompt => "select country") %br =f.label :email, 'your email' %br =f.text_field :email .column-test %br = f.label :agency?, "are working agency?" %br = f.label :agency?, "yes", value: "true" = f.radio_button :agency?, true = f.label :agency?, "no", value:"false" = f.radio_button :agency?, false %br =f.label :agency_name, 'if agency\'s name?' %br =f.text_field :agency_name %br =f.submit "submit" .all-caps english proficiency test
with following css:
.front-page-test{ width:100%; display: table; table-layout: fixed; border-spacing: 20px; padding:40px; background:#3ab9a0; position:relative; top:-60px; color:white; height:200px; overflow:hidden; } .column-test{ display: table-cell; width:30%; }
here fiddle:
changing .column-test
have display: inline-block
solves in fiddle: https://jsfiddle.net/lkxh4hgy/1/
Comments
Post a Comment