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:

https://jsfiddle.net/lkxh4hgy/

changing .column-test have display: inline-block solves in fiddle: https://jsfiddle.net/lkxh4hgy/1/


Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -