angular ui-grid sort icons do not display correctly

5
votes

I've already researched and tried placing all the font files (ui-grid.eot, ui-grid.svg, ui-grid.ttf, ui-grid.woff) in the same directory as ui-grid-unstable.css. No matter what I do, the Korean looking characters still appear!

Also in firefox I get

downloadable font: download failed (font-family: "ui-grid" style:normal weight:normal stretch:normal src index:1): status=2147500037 source: file:///C:/webapp/css/lib/angular/css/ui-grid.woff app.css downloadable font: download failed (font-family: "ui-grid" style:normal weight:normal stretch:normal src index:2): status=2147500037 source: file:///C:/webapp/css/lib/angular/css/ui-grid.ttf

I also don't use any sort of build mechanism ( bower etc.)

Is there any way to get the icons to display properly? Or like some sort of workaround

---mainDir --css --app.css --images --js --controllers --controller1.js -controller2.js etc. --services --app.js etc --lib --angular --css --ui-grid.eot --ui-grid.svg --ui-grid.ttf --ui-grid.woff --ui-grid-unstable.css --js --angular.min.js --angular-route.min.js --ui-grid-unstable.js --bootstrap -css -fonts -js --jquery -js --views --view1.html --view2.html etc. index.html

4
javascripthtmlcssangularjsangular-ui-grid
Any way you can provide a screenshot of what your file structure looks like? – KreepN
edited for file structure – noobprogrammer
Do me a favor, steal the ui-grid-unstable.js in the js folder and put in in your css folder with all the other files (eot,svg, etc). Adjust the ui-grid-unstable.js reference so it's correct and try it. – KreepN
actually tried that and it still didn't work :( – noobprogrammer
chat.stackoverflow.com/rooms/82011/angular-ui-grid-sort-icons – KreepN

4 Answers

5
votes

Turns out the problem was specific to the ui-grid-unstable.css version. Referenced the latest by using 

<link href="http://ui-grid.info/release/ui-grid-unstable.css" rel="stylesheet">

and it worked!

Strangely, if I copy and paste the code from that link and paste it in my local ui-grid-unstable.css, the characters are still the korean-looking ones...

1
votes

A nice and working solution is to replace the code in css file like this:

.ui-grid-icon-down-dir:before {
  content: '\25bc';
}
.ui-grid-icon-up-dir:before {
  content: '\25b2';
}

The original content '\c358' and '\c359' will display the korean-looking ones in IE.

0
votes

font uri path not found in your project.follow the folder structure as same in git. if you still face same problem use updated angular ui grid version. custom column header template is another way to resolve the sort icon problem. This is default header template code:

 <div ng-class="{ 'sortable': sortable }">

  <div class="ui-grid-cell-contents" col-index="renderIndex" title="TOOLTIP">
    <span>{{ col.displayName CUSTOM_FILTERS }}</span>

    <span ui-grid-visible="col.sort.direction" ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }">
      &nbsp;
    </span>
  </div>

  <div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false" ng-click="toggleMenu($event)" ng-class="{'ui-grid-column-menu-button-last-col': isLastCol}">
    <i class="ui-grid-icon-angle-down">&nbsp;</i>
  </div>

  <div ui-grid-filter></div>
</div>

From default template just replace your own css class by 'ui-grid-icon-up-dir' for up icon and 'ui-grid-icon-down-dir' for down icon.

0
votes

You need to go to the version folder, download the following files :

  • ui-grid.eot
  • ui-grid.svg
  • ui-grid.ttf
  • ui-grid.woff

and place in the same local folder where ui-grid.css file is stored.

e.g. if you are using ui-grid.js and ui-grid.css version 4.0.4 you will need to download the above mentioned files from

https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release/4.0.4

and place in the same local folder where ui-grid.css file is stored. You don't need to reference these 4 files in your code explicitly. Hope this helps.