Databases
StackOverflow2013
Postsdbo
POHow to resize a div without disturbing other divs in css
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to resize a div without disturbing other divs in css
    primarykey
    data
    text
    <p>I am working on an application where I have a lot of tiles in my page which are basically divs. I want to modify the hover property of the div to enlarge it. My current css is something like this:</p> <pre><code> .livetile{ height: 110px; margin: 5px; padding: 0px; width: 110px; position: absolute; transition:width 2s; -webkit-transition:width 2s; } .live-tile:hover{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -moz-box-shadow: 0 0 3px 1px #fff; -webkit-box-shadow: 0 0 3px 1px #fff; box-shadow: 0 0 3px 1px #333; } </code></pre> <p>The scaling effect seems to be working fine. However if instead of scaling I try to explicitly resize the div like so:</p> <pre><code> .live-tile:hover{ width:200px; height:200px; } </code></pre> <p>Then the tiles surrounding the hovered div get repositioned to accomodate it. I however want it to come to the front to produce some sort of a pop-out effect without the other divs getting repositioned. </p> <p>In other words I don't want to just scale the display, I just want to change the dimensions of the div so that even if it overlaps with other divs, it just comes to the front without displacing any other divs. </p> <p>I also tried setting the <code>z-index</code> of the hovered div to a higher integer value, but still it doesn't seem to be doing the trick. I have just started experimenting with CSS transitions and animations. Any help is deeply appreciated.</p> <p><strong>Edit</strong> I have tried to make a simple <a href="http://jsfiddle.net/JVqEz/2/" rel="nofollow">js fiddle</a> to illustrate the problem I am having. I don't want the other divs to get resized. I hope I could explain myself clearly.</p> <p><em>Note</em> - I want CSS solutions only. I know this can be achieved using Jquery.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAnnihilator8080
    1. USAnnihilator8080
    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
    1. This table or related slice is empty.
    1. COCan you set up a jsfiddle? You shouldn't be having this issue, when an element is absolutely positioned, it is taken out of document flow and will not affect the layout of other elements.
      singulars
      1. POHow to resize a div without disturbing other divs in css
      1. USMister Epic
    2. COScaling is different than explicit resizing. If scaling is working, why not stick with scaling?
      singulars
      1. POHow to resize a div without disturbing other divs in css
      1. USArchonic
 

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