Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Because you want to have things "shift", then you don't really see the fact that it is growing from the right to the left, but <a href="http://jsfiddle.net/7ZUeu/30/">I think this achieves what you are desiring</a> (it tweaks some other margins, and adds a relative shift):</p> <pre><code> div { width:100px; height:100px; float:left; margin:5px; position: relative; right: 0; box-shadow: 2px 2px 10px rgba(0,0,0,0.5); background-color:rgba(25,25,25,0.7); transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; } div:hover { width:200px; height:200px; margin:10px 115px 0px -105px; right: -110px; } </code></pre> <p>Note, simply because of the nature of floats and having the items shift, you will get some bizarre behavior with many elements. <a href="http://jsfiddle.net/7ZUeu/31/">Play around with this fiddle</a> when it is downsized so there are at least two rows of divs.</p> <p><strong>Explanation of Margins</strong></p> <p>The <code>115px</code> right margin pushes the following element over (the "shift" you wanted) making space for the element to expand. It is the width of the element, plus the <code>5px</code> margins on the elements, plus the fact that the larger size element is increasing its margin to <code>10px</code>. It is <em>into</em> this space that the <code>right</code> shift occurs. The direction of the expansion itself happens through the <code>-105px</code>, which is what causes the element to expand left (as you originally wanted).</p> <p>UPDATE to your newer pictures: <a href="http://jsfiddle.net/7ZUeu/61/">Take a look at this fiddle</a>. There are still some small bugs, but functions nicely based on a set of three div's (there is an extra non-semantic <code>span</code> to make my functionality work).</p>
    singulars
    1. This table or related slice is empty.
    1. POHow to change where a CSS transition starts from?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USScottS
    1. USScottS
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to change where a CSS transition starts from?
      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. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI like the idea of using a relative shift, but unfortunately, this doesn't have the top right to bottom left transition I'm looking for. Nevertheless, this is leaning me towards a closer answer; +1.
      singulars
      1. PO
      1. USShrey Gupta
    2. CO@Bagavatu: I don't think your TR/BL transition is _visually_ possible if you are wanting to shift elements for two reasons: 1) mine actually [IS doing that](http://jsfiddle.net/7ZUeu/37/), but it doesn't _look_ like it because as it transitions TR/BL it is also moving `right` (that fiddle removed the `right` shift). Which leads to 2) it has to "shift" elements right because it cannot affect elements to its left (with `float: left`) using pure css. Now if you can do `float: right` [you can get the effect with a TR/BL look](http://jsfiddle.net/7ZUeu/44/).
      singulars
      1. PO
      1. USScottS
    3. COAh, I see. Thank you! This seems to be the best answer so far though! I'll accept + award bounty soon if a better answer doesn't come up.
      singulars
      1. PO
      1. USShrey Gupta
 

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