Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Original answer appears below the <code>hr</code>; the answer to the question, for clarity, appears to be a combination of <code>box-sizing</code> (and its vendor-previxed variants), in order to include the <code>border-width</code> and <code>padding</code> in the defined <code>width</code> of the elements(s) (rather than their width being defined-width + border-width + padding) and <code>font-size: 0</code> for the parent element, which removes the errant space between the two <code>input</code> elements (although the space is, technically, still there; it just doesn't have any size to influence the position of the surrounding elements).</p> <p>So, the CSS is that from the second example below:</p> <pre><code>fieldset input[type=text] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; width: 350px; } fieldset div input[type=text] { width: 105px; margin: 0; } fieldset div input[type=text] + input[type=text] { float: right; width: 245px; } div.name { font-size: 0; }​ </code></pre> <p><a href="http://jsfiddle.net/davidThomas/3UP9H/11/" rel="nofollow">JS Fiddle demo</a>.</p> <hr /> <h3>Original answer follows:</h3> <p>One way seems to be:</p> <pre><code>form { width: 350px; } fieldset { width: 100%; } ​fieldset input[type=text] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: inline-block; width: 350px; }​​ fieldset div input[type=text] { width: 105px; margin: 0; } fieldset div input[type=text] + input[type=text] { float: right; width: 241px; }​ </code></pre> <p><a href="http://jsfiddle.net/davidThomas/3UP9H/7/" rel="nofollow">JS Fiddle demo</a>.</p> <p>The use of <code>box-sizing</code> (and the vendor-prefixed variants) is to simply include the <code>border</code> of the element, and any assigned <code>padding</code> within the defined width of the element.</p> <p>I've used self-closing <code>input</code> tags in the linked demo, since <code>input</code> elements, so far as I know, don't have closing tags <code>&lt;/input&gt;</code>.</p> <p>I've amended the above, slightly, to remove the issue of the errant space (between the sibling <code>input</code> elements in the <code>.name</code> element from requiring arbitrary corrections to allow them both on the same line (hence the strange <code>width: 241px</code> in the above CSS):</p> <pre><code>form { width: 350px; } fieldset { width: 100%; } fieldset input[type=text] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: inline-block; width: 350px; } fieldset div input[type=text] { width: 105px; margin: 0; } fieldset div input[type=text] + input[type=text] { float: right; width: 245px; } div.name { font-size: 0; }​ </code></pre> <p><a href="http://jsfiddle.net/davidThomas/3UP9H/8/" rel="nofollow">JS Fiddle demo</a>.</p> <hr /> <p><strong>Edited</strong> to remove the fixed-width measurements, and replaced with relative, percentage, based units (as in the original question):</p> <pre><code>form { width: 350px; } fieldset { width: 100%; } fieldset input[type=text] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: inline-block; width: 100%; } fieldset div input[type=text] { width: 30%; margin: 0; } fieldset div input[type=text] + input[type=text] { float: right; width: 70%; } div.name { font-size: 0; }​ </code></pre> <p><a href="http://jsfiddle.net/davidThomas/3UP9H/9/" rel="nofollow">JS Fiddle demo</a>.</p> <p>Unfortunately there's no way to set the width of the <code>input</code> elements to <code>100%</code> by default, while still allowing sibling <code>input</code> elements to have differing widths. Or, there is, but it's substantially more awkward and requires you to explicitly identify both siblings as, although it's possible to select the second, or later, sibling with the <code>+</code> or <code>~</code> combinators it's not possible to select the <em>first</em> sibling based on its having subsequent siblings (without JavaScript, or other scripting language, whether client-, or server-, side).</p>
    singulars
    1. This table or related slice is empty.
    1. POHow to justify form input fields with css?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USDavid Thomas
    1. USDavid Thomas
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COinteresting. i'll look at box-sizing. the inline-block is extraneous.
      singulars
      1. PO
      1. UStribalvibes
    2. COAs to the `inline-block`: *agreed*.
      singulars
      1. PO
      1. USDavid Thomas
    3. COnot concerned with the selectors generally, just the box-sizing to make the fields align. if you pare down your answer to just the second edit/demo i'll accept it. @saluce was on the right track with this too. thanks guys!
      singulars
      1. PO
      1. UStribalvibes
 

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