Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Short answer: <s>no.</s> (It is now possible with CSS transform. See the edit below)</p> <p>Long answer: The problem with using "fixed" positioning is that it takes the element <strong>out of flow</strong>. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:</p> <pre><code>#fixedContainer { position: fixed; width: 600px; height: 200px; left: 50%; top: 0%; margin-left: -300px; /*half the width*/ } </code></pre> <p><a href="http://jsfiddle.net/HFjU6/1/" rel="noreferrer">http://jsfiddle.net/HFjU6/1/</a></p> <h3>Edit (03/2015):</h3> <p>This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use <code>translateX(-50%)</code>. This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like <code>50%</code>) because it will be relative to the parent and not the element it's applied to. <code>transform</code> behaves differently. Its values are relative to the element they are applied to. Thus, <code>50%</code> for <code>transform</code> means half the width of the element, while <code>50%</code> for margin is half of the parent's width. This is an <a href="http://caniuse.com/#feat=transforms2d" rel="noreferrer">IE9+ solution</a></p> <p>Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:</p> <pre><code>.fixedContainer { background-color:#ddd; position: fixed; padding: 2em; left: 50%; top: 0%; transform: translateX(-50%); } </code></pre> <p>If you want it to be centered, you can do that too:</p> <pre><code>.fixedContainer { background-color:#ddd; position: fixed; padding: 2em; left: 50%; top: 50%; transform: translate(-50%, -50%); } </code></pre> <h3>Demos:</h3> <p><a href="http://jsfiddle.net/b2jz1yvr/" rel="noreferrer">jsFiddle: Centered horizontally only</a><br/> <a href="http://jsfiddle.net/b2jz1yvr/1/" rel="noreferrer">jsFiddle: Centered both horizontally and vertically</a> <br/>Original credit goes to user <a href="https://stackoverflow.com/users/1387396/aaronk6">aaronk6</a> for pointing it out to me in <a href="https://stackoverflow.com/a/28773941/854246">this answer</a></p>
    singulars
    1. This table or related slice is empty.
    1. POFixed position but relative to container
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USJoseph Marikle
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POFixed position but relative to container
      singulars
      1. PTQuestion
    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. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWorked beautifully for me. Although I needed mine to the left of and already centered, unfixed div, so just had to decrease the left margin until it was aligned. No stays aligned no matter what the width of the windows. Thanks. +1
      singulars
      1. PO
      1. USIain M Norman
    2. CO@Joseph any idea why `position:fixed` without specifying `top` or `left` _sometimes_ works? Some browsers appear to default the element to where it would normally be, if it had normal positioning. http://stackoverflow.com/questions/8712047/positionfixed-when-left-top-right-bottom-arent-specified-desired-results-in
      singulars
      1. PO
      1. USFlash
    3. COwhat about without fixed height and width ? In my case I haven't given any signal width to any container even up to body tag. What solution you will say me to do.
      singulars
      1. PO
      1. USmfq
 

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