Geek Answers Handbook

Angular ui-grid sorting icons don't display correctly

I already researched and tried to place all 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, Korean characters appear!

Also in firefox I get

downloadable font: loading 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 do not use any assembly mechanism (gazebo, etc.)

Is there a way to display the icons correctly? Or somehow a 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
source share
4 answers

Turns out the problem was with the ui-grid-unstable.css version. Recalling the latter using

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

and it worked!

It's strange if I copy and paste the code from this link and paste it into my local ui-grid-unstable.css, the characters still remain Korean ...

+5
source

font uri path not found in your project. Find the folder structure as in git. if you are still facing the same problem, use the updated version of angular ui grid. A custom column header template is another way to resolve a sort character problem. This is the default header template template:

 <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>

css "ui-grid-icon-up-dir" "ui-grid-icon-down-dir" .

0

css :

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

'\c358' '\c359' IE.

0

, :

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

, ui-grid.css.

. ui-grid.js ui-grid.css 4.0.4,

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

, ui-grid.css. 4 . , .

0

More articles:


All Articles