Databases
StackOverflow2013
Postsdbo
POPosition textarea at bottom of div and fill to (width - 2px margins)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPosition textarea at bottom of div and fill to (width - 2px margins)
    primarykey
    data
    text
    <p>I thought we were mostly past this sort of thing, but I've discovered an inconsistency (presumably well-known to all you CSS demi-gods out there) in how Firefox and IE display something vs. Chrome.</p> <p>Take a look at this jsfiddle here: <a href="http://jsfiddle.net/smithkl42/jmgEV/1/" rel="nofollow">http://jsfiddle.net/smithkl42/jmgEV/1/</a></p> <pre><code>div.parent{ position:relative; height:200px; width:400px; background-color:blue; } textarea.child{ position:absolute; height:30px; bottom:2px; left:2px; right:2px; } </code></pre> <p>In Chrome it does what I want it to, namely, to display the <code>&lt;textarea&gt;</code> at the bottom of its parent div, and be as wide as the parent div. But in FireFox and IE, it ignores the <code>right:2px</code> line, and just gives it the default width.</p> <p>If I replace the <code>&lt;textarea&gt;</code> with a <code>&lt;div&gt;</code> (see <a href="http://jsfiddle.net/smithkl42/jmgEV/2/" rel="nofollow">here</a>, it behaves the way I want.</p> <p>Any idea why?</p> <p>EDIT: Thanks for all the suggestions. I should note that the parent element (in the real world, not in my fiddle) is gonna be changing size, so I can't use any of the suggestions that say, "Just set the width manually". For instance, I need it to be <em>exactly</em> two pixels from the left and right edges whether its parent element is 1200 pixels wide or 50. So things like setting it to a %, which would work it if was mostly fixed-width, won't work here. For other comments, see below.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKen Smith
    1. USKen Smith
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COI'm not sure of the technical reasons. I actually put together a [jsFiddle](http://jsfiddle.net/thirdender/ULHbs/) a while back illustrating how some elements respond to being absolute positioned. `IFRAME`, `TABLE`, `SELECT`, and `TEXTAREA` elements don't behave the same as other elements. The best solution I found was to add a `DIV` around the element, give that `DIV` the desired dimensions, then make the problem element `width: 100%; height: 100%;`: [jsFiddle](http://jsfiddle.net/thirdender/9TTJ6/)
      singulars
      1. POPosition textarea at bottom of div and fill to (width - 2px margins)
      1. USthirdender
    2. COjust give width in % for child textarea.. (for eg 100% or 96% )
      singulars
      1. POPosition textarea at bottom of div and fill to (width - 2px margins)
      1. USSachin
    3. CO@thirdender - Yeah, this is the only solution I've found. Still really darned odd that it works differently in FF vs. Chrome. I thought they'd worked all those bugs out of the CSS spec by now.
      singulars
      1. POPosition textarea at bottom of div and fill to (width - 2px margins)
      1. USKen Smith
 

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