Comments on: UI-Grid: The Easiest Customization You’ll Ever Write

By: Timothy Head

Timothy Head — Thu, 25 Aug 2016 08:56:00 +0000

Thanks Brian. CSS is not my field really so there may be knock on effects / inconsistent outcomes but I have added z-index to .grid-msg-overlay to lay it above the Grid Menu (when enabled):

.grid-msg-overlay {

position: absolute;

top: 0;

bottom: 0;

width: 100%;

background: rgba(0, 0, 0, 0.4);

z-index: 10;

}

By: Brian Hann

Brian Hann — Wed, 24 Aug 2016 16:54:00 +0000

You’re welcome!

By: Brian Hann

Brian Hann — Wed, 24 Aug 2016 16:54:00 +0000

Without looking at it, my guess would be adjusting the z-index.

By: Vishwam

Vishwam — Wed, 24 Aug 2016 06:06:00 +0000

Thanks a lot.Thinks was exactly what I needed.

By: Timothy Head

Timothy Head — Tue, 23 Aug 2016 09:48:00 +0000

Thanks for the code. Very helpful. One minor note, but the Grid Menu
button is above the overlay during the load which looks a little
unusual (image included). Any ideas for moving the overlay above this Grid Menu?

By: Timothy Head

Timothy Head — Tue, 23 Aug 2016 09:47:00 +0000

Thanks for the code. Very helpful. One minor note, but the Grid Menu
button is above the overlay during the load which looks a little
unusual (image hopefully below). Any ideas for moving the overlay above this Grid Menu?

By: Timothy Head

Timothy Head — Tue, 23 Aug 2016 09:44:00 +0000

Thanks for the code. Very helpful. One minor note, but the Grid Menu button is above the overlay during the load which looks a little unusual. Any ideas for moving the overlay above this Grid Menu?

By: Erik Eckhardt

Erik Eckhardt — Thu, 10 Mar 2016 18:07:00 +0000

Your final html markup does not include the grid-msg-overlay class anywhere. Might want to fix that.

By: Jeff Tillwick

Jeff Tillwick — Thu, 25 Feb 2016 19:41:00 +0000

Also, how would this work for no data when a filter is applied?

By: Jeff Tillwick

Jeff Tillwick — Tue, 23 Feb 2016 08:30:00 +0000

The class in the HTML is no-data when it should be grid-msg-overlay

By: Antonio Almeida

Antonio Almeida — Sat, 28 Nov 2015 18:52:00 +0000

Hi, thanks for your post.

I just modified the CSS to make the msg box size independent from main div.

/*
– 50% top and left is the div center
– height 100px and width 300px is the size of our msg box
– negative magin-top and left with half of height and width makes it centered 😉
*/
.grid-msg-overlay .msg {
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 300px;
margin-top:-50px;
margin-left:-150px;
background-color: #eee;
border-radius: 4px;
border: 1px solid #555;
text-align: center;
font-size: 24px;
display: table;
}

Best regards from Brazil.

By: Brian Hann

Brian Hann — Fri, 02 Oct 2015 13:01:00 +0000

Thanks for the heads up!

By: Gary

Gary — Thu, 17 Sep 2015 20:11:00 +0000

Thanks for the post Brian. One minor typo in your example – the index.html uses the class of ‘grid-msg-overlay’ but the style is ‘grid-overlay-msg’. Plunker example is fine as the style is ‘grid-msg-overlay’.

By: Andres Villanueva

Andres Villanueva — Sat, 23 May 2015 16:35:00 +0000

Awesome post brian, thanks for share it! Regards from Venezuela…