CODEWITHSUNDEEP
javascripthtmlangularjscssangular-ui-grid
josh_boaz
josh_boaz

Reputation: 2023

ui-grid header content menu button overlaps text

enter image description hereI have noticed that header column menu button is overlapping with the header label, it also happens if you resize the column width

How can this issue be resolved?

.ui-grid-column-menu-button {
    position: absolute;
    right: 1px;
    top: 0;
}

Example of this can be seen here as well http://plnkr.co/edit/29TK44Vor4F45C8hSBNI?p=preview

Upvotes: 1

Views: 1226

Answers (2)

josh_boaz
josh_boaz

Reputation: 2023

i was able to resolve it with below css

.ui-grid-header-cell .ui-grid-cell-contents {
    display: block;
    width: calc(100% - 12px);
}

Upvotes: 1

mainguy
mainguy

Reputation: 8331

Try to add this to your main.css

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

This seems to work.

Forked Plunker here

Uhh, now I see that the dropdown icon sometimes overlaps the sort direction Icon. So, maybe that's not a good Idea.

But this might help you anyhow ...

Upvotes: 1

Related Questions