zindex | Tech Tips & Tricks

Tag: zindex

JQuery UI DatePicker Not Shown In Bootstrap Modal Window

April 20, 2015 by blogmeister·0 Comments

Well, this one bugged me down for hours. I thought the problem was Bootstrap’s form-control CSS class since removing it shows the Jquery UI DatePicker widget but the input field styling is gone.

User lastoneisbearfood in the StackOverflow forum provided 2 easy solutions of your preference: either adding a css attribute or doing it Javascript style.

on-JS Just add z-index:1051; to the style attribute of your input element. This is based on the observation that bootstrap .modal class uses a z-index of 1050.

Dynamic solution using JS When declaring your datepicker, add a beforeShow handler that retrieves the z-index of .modal and set datepicker’s z-index to 1 higher than that:

datepicker({beforeShow: function(inputElem, inst) {
    var zi = Number($(inputElem).closest('.modal').css('z-index'));
    $(inputElem).css('z-index',zi+1);
}});

datepicker({beforeShow: function(inputElem, inst) {

var zi = Number($(inputElem).closest('.modal').css('z-index'));

$(inputElem).css('z-index',zi+1);

}});

Array Of ImageSurface Overlaps When Displayed In Famo.us

June 30, 2014 by blogmeister·0 Comments

So I was working with an array of ImageSurface that after doing a shuffle procedure, once displayed, the images of the ImageSurface overlapped incorrectly.

I mean, when I created each ImageSurface at startup and added them to the view, it displayed correctly, overlapping each other sequentially in the correct manner.

However, once that shuffle procedure happened the overlapping got messed up. I did not understand what was happening until I came across a post in the StackOverflow forum that said when you instantiate an ImageSurface, regardless if you had not added it to the context or view, it is automatically added in the rendering tree.

So if you do this:

surface2 = new Surface();
surface1 = new Surface();

1 2	surface2 = new Surface(); surface1 = new Surface();

And add these ImageSurface objects to a view like this:

view = new View();
view.add(surface1);
view.add(surface2);

view = new View();

view.add(surface1);

view.add(surface2);

The surface2 object will always be below surface1. So since my case had to do with shuffling the ImageSurface, the solution was to call the setOptions() method and set its z-index order like this:

surface1.setOptions({ properties: { zIndex : 1 } });
surface2.setOptions({ properties: { zIndex : 2 } });

1 2	surface1.setOptions({ properties: { zIndex : 1 } }); surface2.setOptions({ properties: { zIndex : 2 } });

In this example, surface2 will then always be on top of surface1.