web-dev-qa-db-fra.com

emission de symboles ui-grid

J'utilise AngularJs ui-grid http://ui-grid.info/ .

Lors de la mise en œuvre, je reçois quelque chose que vous pouvez voir dans l’image suivante dans le coin droit de la cellule au lieu de symboles déroulants.

enter image description here

Quels fichiers inclure pour résoudre ce bug?

angularjstwitter-bootstrapangular-ui-gridui-grid
33
Anup

Vous devez télécharger les fichiers de police:

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

de ici . Et déplacez-les là où habite votre ui-grid.min.css.

35
Rahil Wazir

Merci d'inclure le fichier CSS ui-grid de cette façon

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

et omettre la balise de script du didacticiel des auteurs ou de l'API

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

pour par exemple ( http://ui-grid.info/docs/#/tutorial/102_sorting )

6
Felix

Je voudrais juste ajouter cette réponse (texto volé de panciz) aux utilisateurs de Grunt qui voudraient les copier automatiquement. Cela doit être placé dans votre 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
Adam Plocher

Vous pouvez également consulter un didacticiel ajouté récemment: http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation

Cela explique comment installer correctement les polices et un peu de dépannage.

2
PaulL

Essayez d'inclure dans votre projet: 

<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>
1
Fabien Thetis

Une autre façon de résoudre le problème consiste à modifier la classe CSS comme suit

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

Si vous utilisez ui-grid - v4.6.6, vous devez placer ui-grid.ttf et ui-grid.woff dans le dossier fonts. Donc, la structure du répertoire ressemblera à ceci:

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

{ expand: true, cwd: 'bower_components/angular-ui-grid', src: [' .eot', '. svg', ' .ttf', '. wof'], dest: '<% = yeoman.dist%>/styles' } Ajoutez ce code au fichier grunt à la copie: { dist: {

0
Rohit Parte

Si vous utilisez gulp, ajoutez cette tâche.

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

});
0
Matt