angularjs - ui-grid columndefs

Ui-grid symbols issue

Question

Estoy usando AngularJs ui-grid http://ui-grid.info/ .

Durante la implementación, obtengo algo que puedes ver en la siguiente img en la esquina derecha de la celda en lugar de los símbolos desplegables.

¿Qué archivos incluir para resolver este error?

Answer 1

Debes descargar los archivos de fuente:

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

de here . Y ui-grid.min.css a donde tu ui-grid.min.css viva.

Answer 2

Me gustaría simplemente agregar esta respuesta (robada textualmente de panciz) para las personas que usan Grunt y desearían que se copiaran automáticamente. Esto debe ser colocado en su Gruntfile.js:

copy: {
      dist: {
        files: [
           ...
        //font di ui grid
         {
              expand: true,
              flatten: true,
              dest: ''dist/styles/'',
              src: [''bower_components/angular-ui-grid/ui-grid.ttf'',
                    ''bower_components/angular-ui-grid/ui-grid.woff'',
                    ''bower_components/angular-ui-grid/ui-grid.eot'',
                    ''bower_components/angular-ui-grid/ui-grid.svg''
                    ]
            }
    ]},

Answer 3

Otra forma de resolver el problema es modificar la clase CSS de la siguiente manera

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

.ui-grid-selection-row-header-buttons.ui-grid-row-selected:before{
    content:''/2714'' !important;
}
.ui-grid-all-selected:before{
    content:''/2714'' !important;
}

Answer 4

Por favor, incluya el archivo CSS ui-grid de esta manera

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

y omite la etiqueta de script del Authors Tutorial o Api

<script src="/release/ui-grid-unstable.css"></script>

por ejemplo, ( http://ui-grid.info/docs/#/tutorial/102_sorting )

Answer 5

Si usa gulp , agregue esta tarea.

gulp.task(''styles'', function() {

  // Copy font files needed for angular-ui-grid
  gulp.src([''bower_components/angular-ui-grid/ui-grid.ttf'',
    ''bower_components/angular-ui-grid/ui-grid.woff'',
    ''bower_components/angular-ui-grid/ui-grid.eot'',
    ''bower_components/angular-ui-grid/ui-grid.svg''
  ])
    .pipe(gulp.dest(''dist/styles/''))

  // Other style tasks here

});

Answer 6

También puede consultar un tutorial agregado recientemente: http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation

Esto cubre cómo instalar las fuentes correctamente y un poco de solución de problemas.

Answer 7

Trata de incluir en tu proyecto:

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">

<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>

Answer 8

{expand: true, cwd: ''bower_components / angular-ui-grid'', src: ['' .eot'', '' .svg'', '' .ttf'', '' .woff''], dest: ''<% = yeoman.dist %> / styles ''} agregue este código al archivo grunt en copy: {dist: {