ui-grid symbols issue

问题:

I am using AngularJs ui-grid http://ui-grid.info/.

While implementing, I get something which you can see in the following img in right corner of the cell instead of dropdown symbols.

Which files to include to solve this bug?

回答1:

You need to download the font files:

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

from here. And move them where your ui-grid.min.css lives.

回答2:

Please include ui-grid CSS file by this way

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

and ommit the script tag from the Authors Tutorial or Api

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

for eg (http://ui-grid.info/docs/#/tutorial/102_sorting)

回答3:

I would just like to add this answer (stolen verbatim from panciz) for the folks using Grunt who would like to have these automatically copied. This needs to be placed in your 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'
                    ]
            }
    ]},

回答4:

You may also want to look at a recently added tutorial: http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation

This covers how to install the fonts correctly, and a little bit of trouble shooting.

回答5:

Another way to solve the issue is modify the CSS class as follows

.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;
}

回答6:

Try to include in your project :

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

回答7:

If you are using gulp, add this task.

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

});

回答8:

{ expand: true, cwd: 'bower_components/angular-ui-grid', src: ['.eot', '.svg', '.ttf', '.woff'], dest: '<%= yeoman.dist %>/styles' } add this code to grunt file at copy: { dist: {

回答9:

If you use ui-grid - v4.6.6, you need to put ui-grid.ttf and ui-grid.woff into folder fonts. So the structure of directory will looks like this:

ui-grid.min.css
fonts  # <--  this is a folder
    ui-grid.ttf  # <-- in fonts folder
    ui-grid.woff  # <-- in fonts folder