Databases
StackOverflow2013
Postsdbo
POCSS Grid System for Forms (Multi-Column)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Grid System for Forms (Multi-Column)
    primarykey
    data
    text
    <p><strong>For future reference here is the final result with pixel perfect precision:</strong></p> <p><a href="http://i45.tinypic.com/2mn16xt.jpg" rel="noreferrer">fluid CSS form http://i45.tinypic.com/2mn16xt.jpg</a></p> <p>The CSS code:</p> <pre><code>._25 { width: 21%; display: inline; float: left; margin-left: 2%; margin-right: 2%; } ._50 { width: 46%; display: inline; float: left; margin-left: 2%; margin-right: 2%; } ._75 { width: 71%; display: inline; float: left; margin-left: 2%; margin-right: 2%; } ._100 { width: 96%; display: inline; float: left; margin-left: 2%; margin-right: 2%; } label { width: 100%; } input { border: 1px solid #B3B3B3; width: 100%; -moz-border-radius: 3px; } textarea { border: 1px solid #B3B3B3; width: 100%; -moz-border-radius: 3px; } select { border: 1px solid #B3B3B3; width: 100%; -moz-border-radius: 3px; } </code></pre> <p>And some sample HTML code:</p> <pre><code>&lt;div class="_50"&gt; &lt;p&gt;&lt;label for="in_user"&gt;Username&lt;/label&gt;&lt;input id="in_user" type="text" value=""/&gt;&lt;/p&gt; &lt;/div&gt; &lt;div class="_50"&gt; &lt;p&gt;&lt;label for="in_pass"&gt;Password&lt;/label&gt;&lt;input id="in_pass" type="text" value=""/&gt;&lt;/p&gt; &lt;/div&gt; </code></pre> <hr> <p>Recently I've started using CSS grid systems and I find the whole process of designing a webpage much more simpler. Now I'm trying to stylize form elements but <strong>I'm having a really hard time making forms with columns</strong>, take the following example:</p> <ul> <li>div (width = 400px) <ul> <li>form <ul> <li>ul <ul> <li>li .half <ul> <li>label</li> <li>input (should be 200px wide)</li> </ul></li> <li>li .half <ul> <li>another label</li> <li>another input (should also be 200px wide)</li> </ul></li> </ul></li> </ul></li> </ul></li> </ul> <p>Basically I'm applying a class that has a width attribute of 50% but putting both inputs side by side makes the row to be bigger than 100% (400px) - I guess this is because of <strong>borders, margins and paddings</strong>.</p> <p><a href="http://i48.tinypic.com/2wmgy0n.png" rel="noreferrer">mockup of what I&#39;m trying to achieve http://i48.tinypic.com/2wmgy0n.png</a></p> <p><strong>Is there any CSS grid system that I can use to have multi-column forms while still making all the form elements have the same size</strong> (inputs, selects and textareas); eg. 1 input in 1 column should have 400px while 2 columns should have 200px each.</p> <p><strong>EDIT: Wufoo <a href="https://examples.wufoo.com/forms/workshop-registration/" rel="noreferrer">has</a> <a href="https://examples.wufoo.com/forms/buy-a-tshirt/" rel="noreferrer">some</a> <a href="https://examples.wufoo.com/forms/mike-and-jennys-wedding-rsvp/" rel="noreferrer">examples</a> of what I'm trying to do but I'm too ignorant at CSS to understand all that code and I would appreciate if someone could give me some pointers.</strong></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAlix Axel
    1. USAlix Axel
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS Grid System for Forms (Multi-Column)
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCSS Grid System for Forms (Multi-Column)
      1. USAlix Axel
      1. VTBountyStart
    3. VO
      singulars
      1. POCSS Grid System for Forms (Multi-Column)
      1. This table or related slice is empty.
      1. VTUpMod
    1. COAre you trying to re-invent the table? if so, there's an element for that ;-) There are times when a table is the right choice for the job.
      singulars
      1. POCSS Grid System for Forms (Multi-Column)
      1. USscunliffe
    2. CO@scunliffe "There are times when a table is the right choice for the job" Yes, and that is to present tabular information :)
      singulars
      1. POCSS Grid System for Forms (Multi-Column)
      1. USEric Bréchemier
    3. COif you don't want to learn to use a css template, i suggest you use the wufoo examples (code + css) and adjust them as you like.
      singulars
      1. POCSS Grid System for Forms (Multi-Column)
      1. USMaxime ARNSTAMM
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload