CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-ui-gridui-grid
Anup
Anup

Reputation: 9746

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.

enter image description here

Which files to include to solve this bug?

Upvotes: 36

Views: 18626

Answers (10)

Jacob Barnes
Jacob Barnes

Reputation: 1560

Adding this answer to hopefully save someone a headache. I had this problem and went through all the steps I could find. However, the problem wasn't file location, etc, my issue is the .woff file was corrupted. I downloaded the fonts to my local machine and ftp'd them to the server. Unfortunately, the .woff on the server ended up in a bad state and was bombing the @font-face declaration. Although this particular problem doesn't mention any console warnings/errors, they will match issues resolved by adding the fonts to grunt/gulp/etc.

I don't recall the error in Chrome, but in Firefox it was:

downloadable font: rejected by sanitizer

So, if you've gone through the hoops and nothing seems to work, check if the font files are correct because my FTP failed for .woff and it resulted in the same Korean characters, etc.

Upvotes: 0

Belter
Belter

Reputation: 3837

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

Upvotes: 0

Rohit Parte
Rohit Parte

Reputation: 4076

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

Upvotes: 0

Fabien Thetis
Fabien Thetis

Reputation: 1734

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>

Upvotes: 1

Matt
Matt

Reputation: 35281

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

});

Upvotes: 0

Adam Plocher
Adam Plocher

Reputation: 14243

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'
                    ]
            }
    ]},

Upvotes: 4

Yogesh
Yogesh

Reputation: 803

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

Upvotes: 1

PaulL
PaulL

Reputation: 6650

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.

Upvotes: 2

Felix
Felix

Reputation: 245

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)

Upvotes: 6

Rahil Wazir
Rahil Wazir

Reputation: 10142

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.

Upvotes: 37

Related Questions