CSS Styling issue in Cumulocity server

Question

I've deployed my angular 7 project in cumulocity server. No errors while building and deploying the application. But, Bootstrap CSS styling is not working properly.

In package.json I've mentioned these dependencies. "@c8y/ngx-components": "1004.2.0", "@c8y/style": "1004.2.0", "@ng-bootstrap/ng-bootstrap": "^4.1.0",

Answer 1

In the new Angular Web SDK the Cumulocity Team switched to ngx-bootstrap. It is included in ngx-components, so no need to add it.

Your issue might be that some styles are missing as Cumulocity just comes with a subset of bootstrap. You might need to add bootstrap CSS to your app to make it working:

1. Add a branding entry in the package.json:

"c8y": {
    "application": {
      "name": "tutorial application",
      "contextPath": "tutorial-application",
      "key": "tutorial-application-key",
      "brandingEntry": "./branding/branding.less",
      "globalTitle": "Pied Piper IoT",
      "tabsHorizontal": true
    }
  }

2. Then add the @c8y styles plus bootstrap in that file:

@import '~@c8y/style/extend.less';
@import '~yourpatt/to/boostrap.css';