CODEWITHSUNDEEP
cssangularinfragisticsignite-ui-angular
Tarak
Tarak

Reputation: 159

"col-md-*" not working with infragistics grid

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?

Upvotes: 1

Views: 253

Answers (1)

Damyan Petev
Damyan Petev

Reputation: 1635

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.

Upvotes: 4

Related Questions