web-dev-qa-db-ja.com

ui-gridシンボルの問題

AngularJs ui-grid http://ui-grid.info/ を使用しています。

実装中に、ドロップダウンシンボルではなく、セルの右隅にある次のimgで確認できるものを取得します。

enter image description here

このバグを解決するために含めるファイルはどれですか？

angularjstwitter-bootstrapangular-ui-gridui-grid
33
Anup

フォントファイルをダウンロードする必要があります。

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

from here 。そして、それらをui-grid.min.css住んでいます。

35
Rahil Wazir

この方法でui-grid CSSファイルを含めてください

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

authors TutorialまたはApiのscriptタグを省略します

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

例えば（ http://ui-grid.info/docs/#/tutorial/102_sorting ）

6
Felix

これらを自動的にコピーしたいGruntを使用している人々のために this answer （pancizから逐語的に盗まれた）を追加したいと思います。これは、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

最近追加されたチュートリアルもご覧ください： http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation

これは、フォントを正しくインストールする方法と、少しのトラブルシューティングをカバーしています。

2
PaulL

プロジェクトに含めるようにしてください：

<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

この問題を解決する別の方法は、次のようにCSSクラスを変更することです

.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

ui-grid - v4.6.6を使用する場合、ui-grid.ttfおよびui-grid.woffをフォルダーfontsに入れる必要があります。したがって、ディレクトリの構造は次のようになります。

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'、 ' .woff ']、dest：' <％= yeoman.dist％>/styles '}このコードをコピー時にgruntファイルに追加します：{dist：{

0
Rohit Parte

gulpを使用している場合、このタスクを追加します。

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