Some little CSS improvements from me

[ChrisWiGit]

Hi,

without searching the whole issue tracker, I give you some CSS changes, that will add more usability to the ui grid. Use or change them as necessary!

This CSS code removes the horizontal scroll bar if not necessary and shows it, if columns are to wide to be shown at once.

#yourgrid .ui-grid-render-container-body .ui-grid-viewport {
  overflow-x: auto !important; //remove horizontal scrollbar if not necessary
}

This CSS code decreases the header cell contents to avoid overlapping with the column menu button. Use the CSS only if you are using colum menus. In this way ellipsis are shown correctly if not enough header space is available (to some limit only. Use columnDefs minWidth to avoid this). Also the sort and menu buttons don't visually merge due to their shapes.

#yourgrid .ui-grid-render-container-body .ui-grid-header-cell .ui-grid-cell-contents {
  margin-right: 15px;

}

The following code moves the column resizer of the last column. If a grid menu is shown it overlaps the last column and its resizer div. So the user is unable to resize the last column until she grows the width of the grid to a bigger size.
This CSS is not perfect since the resizer is also moved if the column is smaller than the grid width.
Also the margin must be adapted to your grid menu size.

#yourgrid .ui-grid-header-cell:last-child .ui-grid-column-resizer.right {
  margin-right: 8px;
}

The same goes for the last column menu button:

#yourgrid .ui-grid-column-menu-button-last-col {
  margin-right: 5px;
}

Speaking of grid menu. You can adapt the grid menu the following way.

#yourgrid .ui-grid-menu-button {
  height: 28px;
  border: 0;
  border-left: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4;
}
#yourgrid .ui-grid-menu-button .ui-grid-icon-container {
  margin-top: 5px;
  margin-left: 2px;
}

DEMO: http://plnkr.co/edit/jzfd6F?p=preview

Feel free to change the CSS as you like.

Best regards
Christian

[nkoterba]

+1, especially for:

#yourgrid .ui-grid-render-container-body .ui-grid-viewport {
  overflow-x: auto !important; //remove horizontal scrollbar if not necessary
}

I don't know why by default, the UI grid ALWAYS shows both vertical and horizontal scrollbars when the content may not actually need them. Seems to me better to default to auto to handle all situations.

[deeg]

Thanks for sharing, I ended up using many of your styles.

I wanted to come add one more:

.ui-grid-menu {
  max-width: 300px;
}
.ui-grid-menu-item {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

I am not saying 300px should be the final number, but if you had really long column names, the menu was running all the way across the screen. This adds a max width and text truncation.

Would the team be interested in incorporating these styles if we put our a PR?