Make grid menu less ugly

[PaulL1]

Every time I look at the grid menu I think it's ugly. I can say that because I built it. It needs to be less ugly, it's not clear that I have the talent to do that.

[deepu105]

how about removing the inner shadow and making it flat 😄

[PaulL1]

I've set the button to match the header height, which makes it tidier. And I've added content to the tutorial to explain how to adjust that height if it doesn't suit in your particular grid.

It'd be better if it took the height of the header that it's in, but whenever I try to do that I run into issues with the menu clipping to the header height - which are currently avoided by having the button outside the header but overlaying the header.

I could make it more like the column menu, with the menu and the button being disassociated, but that'd be some rework on what I did with the menu - at the moment the menu itself is in the same directive as the button and relies on this for some communication stuff.

Moving this out to 3.1.

[Zorkling]

How about something like this (styling for both Grid Menu & Column Menu)?

.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid {
overflow: auto; /* Cleans it up substantially when there isnt a large overflow /
/ Edit: This has issues with horizontal overflow, im going to spend some time to figure it out if you guys like the styling /
}
.ui-grid-menu {
/ Positioned just off of the edge - I only messed with a single configuration, not sure if it will have other effects for different ones */
padding: 8px 0px 0px 0px;
}

All i did was change the following css
.ui-grid-menu .ui-grid-menu-inner {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), inset 0 12px 12px -14px rgba(0, 0, 0, 0.2);
}
.ui-grid-menu .ui-grid-menu-inner ul li:hover {
/* remove box shadow */
background: #ddd;
}

[PaulL1]

I think there's adequate work on this, it's less ugly than it was, although still not pretty. Closing.

[aurbano]

I've done a lot of CSS on top of the defaults to change the appearance to suit our design, if you're interested I can publish it.

Here's a screenshot of the result: (with stripped rows disabled, and replaced with clickable rows, which highlight when you hover the entire row, optionally)

On hover:

[vbasem]

@aurbano I know this is a little older, but I was wondering if you could still publish the CSS for your UI-GRID. The default just doesn't look well with modern bootstrap.

[xycloud]

@aurbano could you share your css?

[aurbano]

@PaulL1 @vbasem @xycloud I've put together a quick repository for it.
UI Grid must have updated some of their CSS because it now looks slightly different, but it should be easy to improve/extend.

https://github.com/aurbano/ui-grid-css

The source is in Sass with variables for the colors, and there is a dist folder with built css files for convenience.

[xycloud]

@aurbano thx!