Click here to Skip to main content
15,903,012 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hey,

This is a simple question but My terminology is failing so I can't find what I need on google:

I have a list of formatted divs, each with an "edit" button. I want to be able to expand the item to fill the screen as an overlay, kinda like a lightbox.

My issue is that if I just set the div to position:fixed then you can see the other divs jumble around where it used to be.

I want to be able to expand it out but leave the list unaffected. Do I need to add a placeholder to the list in it's place, or what?

Any tips, terms or google links are appreciated

Thanks
Andy

PS: I'll set up a jsfiddle or something shortly and add it here

What I have tried:

I tried just setting the div to position fixed, but the rest of the list snapped up to fill the gap

EDIT

Angular: Simple - JSFiddle[^]

Not the best example as there is no animation, but you get the idea
Posted
Updated 15-Dec-16 6:21am
v2

1 solution

Setting an element's position to "fixed" takes it out of the flow when calculating the positions of the surrounding elements. You'll need to add a dummy element with the same dimensions as a placeholder to keep the other elements in the same position.
JavaScript
$scope.enbiggen = function(e,item){
    var target = $(e.currentTarget).parent();
    if (target.is(".large")) {
        target.removeClass("large");
        target.prev(".dummy-item").remove();
    }
    else {
        var width = target.innerWidth();
        var height = target.innerHeight();
        $("<div />").addClass(target.prop("class")).addClass("dummy-item").innerWidth(width).innerHeight(height).insertBefore(target);
        target.addClass("large");
    }
}

Updated fiddle[^]
position - CSS | MDN[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900