1

I have a basic html table and infragistics(igx) grid displaying data:

<div class="container">
    <div class="row">
        <div class="col-md-4"> 
           <table> </table>
        </div>
        <div class="col-md-8">
           <igx-grid #grid1 [data]="localData" [autoGenerate]="true"></igx-grid>
        </div>
    </div>
</div>

My css file is:

@import "~igniteui-angular/lib/core/styles/themes/index";
@include igx-theme($default-palette);


  table { 
    width: 100%; 
    border-collapse: collapse; 
  }
  th { 
    background: #333; 
    color: white; 
    font-weight: bold; 
  }
  td, th { 
    padding: 6px; 
    border: 1px solid #ccc; 
    text-align: left; 
  }

This is what is in package.json:

  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@ng-bootstrap/ng-bootstrap": "^5.1.4",
    "@types/hammerjs": "^2.0.36",
    "angular-bootstrap-md": "^8.6.0",
    "bootstrap": "^4.3.1",
    "hammerjs": "^2.0.8",
    "igniteui-angular": "^8.2.9",
    "jszip": "^3.1.5",
    "minireset.css": "~0.0.4",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.19",
    "@angular/cli": "~8.3.19",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "igniteui-cli": "~4.2.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"

My idea was to get both the table and grid on a same row but this isn't happening. Will igx related css override it? In the dev-tool styles, It uses "core.scss" and "minireset.css" mostly. How do I move forward?

Damyan Petev
  • 1,585
  • 7
  • 10
Tarak
  • 149
  • 1
  • 7

1 Answers1

4

None of those packages or the Ignite UI for Angular theme should interfere with Bootstrap's grid classes. igx-theme rules target the components specifically and font properties under the .igx-typography class. minireset.css rules are global, but deal with browser inconsistencies with basic elements.

Mind you, unless those are @import-ed in your styles.scss, added as styles in the angular.json config or in the index.html page, that CSS is not included in your running app. And it looks like you might be missing the Bootstrap CSS.

You should have something like:

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

in your index.html from I see in @ng-bootstrap examples.

That seems to work just fine, see https://angular-8gmxfj.stackblitz.io

Stackblitz: https://stackblitz.com/edit/angular-8gmxfj

PS: You also have the bootstrap package installed, so I guess you can also import from there:

@import "~bootstrap/dist/css/bootstrap";

Not sure why you'd have both packages, since bootstrap one brings peer dependencies on jquery and popper.js, which is exactly why ng-bootstrap replaces it for Angular usage.

Damyan Petev
  • 1,585
  • 7
  • 10
  • I installed md-bootstrap and it worked fine, but somehow the infragistic grid doesn't go well with it. I used `row` and `col` classes of md-bootstrap but it made the grid crunched and I can't resize it. Any thoughts? – Tarak Nov 25 '19 at 19:12
  • The `row` and `col-X` classes still come from Bootstrap itself, right? As far as I can tell md-bootstrap only adds extra styles. I tried adding the md-bootstrap css from their CDN after Bootstrap in the sample above and the layout is still fine. Perhaps you can make a similar sample (or modify the one above) to show what's stuck with the sizing. – Damyan Petev Nov 27 '19 at 14:44