1

I am using Angular Ui-Grid to display a table and have implemented the pager for said table.

It creates a / to represent "of" as in this example "page 1 of 4". But underneath is some strange marking and when the mouse hovers the cursor turns into a question mark as if to say "I have no idea what this is."

abbr not working

This is the markup that is produced:

<span class="ui-grid-pager-max-pages-number ng-binding" ng-show="paginationApi.getTotalPages() > 0" aria-hidden="false">
<abbr ui-grid-one-bind-title="paginationOf" title="of">/</abbr> 4
</span>

Anyone know what is happening here?

Andrei Matracaru
  • 3,511
  • 1
  • 25
  • 29
Matt
  • 33,328
  • 25
  • 83
  • 97
  • 1
    That is what the `title` attribute is for. If defined, it should contain the full explanation what the abbreviation means. Browsers will indicate this with showing an question mark. It is specific for the `` tag. – Frank Witte Sep 05 '17 at 18:05

2 Answers2

2

This is the natural behavior of the <abbr> tag.

To remove the dashed underline and the question mark on mouse hover, add this css:

abbr {
  text-decoration: none;
}
abbr:hover{
  cursor: default;
}
<span class="ui-grid-pager-max-pages-number ng-binding" ng-show="paginationApi.getTotalPages() > 0" aria-hidden="false">
<abbr ui-grid-one-bind-title="paginationOf" title="of">/</abbr> 4
</span>
Matt
  • 33,328
  • 25
  • 83
  • 97
0

fixed it by adding 

.ui-grid-pager-panel abbr[title] {
    text-decoration: none;
    border-bottom: none !important;
    cursor: unset !important;
}

to css.

philiphoek
  • 9
  • 1