title: Dojo Table Container cols based on screen size
body: <p>I am using <strong>Dojo UI</strong> for the layout of a form application. I am using <strong>Dojo Table Container</strong> to hold form elements. Based on the screen size i would like to set the columns (data-dojo-props="cols:) of the Table Container to either 1, 2 or 3 however i am not able to set a dynamic value for the Table Container Columns. Under is a sample of the container with elements.</p>
  
  <p>How can i set the value of <code>data-dojo-props= cols:</code> at runtime ?</p>
  
  <p>I know it can be done with java script by detecting the screen size and using <code>dijit.byId().set("attribute", value)</code> however this deals with design and layout and i prefer if it is handled by css. So i need a css solution.</p>
  
  <pre><code>&lt;div data-dojo-type="dojox.layout.TableContainer"
       data-dojo-props="cols:2,customClass:'employee_labels', labelWidth:210"
       id="EmployeeContainer"&gt;
  
   &lt;input type="text" id= "fname" /&gt;
   &lt;input type="text" id= "lname" /&gt;
   &lt;input type="text" id= "age" /&gt;
   &lt;input type="text" id= "phone" /&gt;
  
  
  &lt;/div&gt;
  </code></pre>