style.css in manifest.json not working?

[Former Member]

Hi guys,

when i declare the css style in a xml view page as below, it works:

    <html:style>

  .testCss .sapMITBAll .sapMITBText {

     color: #333333;

     display: inline-block;

     max-height: 3rem;

     max-width: 10rem;

     overflow: hidden;

     text-align: left;

     text-overflow: ellipsis;

     text-shadow: 0 0.0625rem 0 rgba(255,255,255,0.7);

     vertical-align: middle;

     white-space: normal;

     width: auto;

  }

        </html:style>

  <semantic:DetailPage

  id="page" navButtonPress="onNavBack" showNavButton="{device>/system/phone}" title="{i18n>detailTitle}" busy="{detailView>/busy}" busyIndicatorDelay="{detailView>/delay}"

  class="testCss ">

However, doing the same in the css/style.css folder, it doesn't work?

css folder (filename: style.css):

		.testCss .sapMITBAll .sapMITBText {
		color: #333333;
		display: inline-block;
		max-height: 3rem;
		max-width: 10rem;
		overflow: hidden;
		text-align: left;
		text-overflow: ellipsis;
		text-shadow: 0 0.0625rem 0 rgba(255,255,255,0.7);
		vertical-align: middle;
		white-space: normal;
		width: auto;
		}

manifest.json:

		"resources": {
			"css": [{
				"uri": "css/style.css"
			}]
		},

Thanks,

Sam

[Chantele · Accepted solution]

hi sam

Please can you show your full manifest file?

I had a similar problem and it was because the hierarchy of the manifest elements wasn't quite right.

Regards

Chantele

[Former Member · Accepted solution]

Hi Chantele,

I generated a sample webide template with the same CSS config but to no avail as well:

{

  "_version": "1.2.0",

  "sap.app": {

  "_version": "1.2.0",

  "id": "sam",

  "type": "application",

  "i18n": "i18n/i18n.properties",

  "title": "{{appTitle}}",

  "description": "{{appDescription}}",

  "applicationVersion": {

  "version": "1.0.0"

  },

  "dataSources": {

  "mainService": {

  "uri": "/destinations/northwind/V2/(S(dycfh0pi2najtbyihgurhglo))/OData/OData.svc/",

  "type": "OData",

  "settings": {

  "odataVersion": "2.0",

  "localUri": "localService/metadata.xml"

  }

  }

  },

  "sourceTemplate": {

  "id": "sap.ui.ui5-template-plugin.2masterdetail",

  "version": "1.32.6"

  }

  },

  "sap.ui": {

  "_version": "1.2.0",

  "technology": "UI5",

  "icons": {

  "icon": "sap-icon://detail-view",

  "favIcon": "",

  "phone": "",

  "phone@2": "",

  "tablet": "",

  "tablet@2": ""

  },

  "deviceTypes": {

  "desktop": true,

  "tablet": true,

  "phone": true

  },

  "supportedThemes": ["sap_hcb", "sap_bluecrystal"]

  },

  "sap.ui5": {

  "_version": "1.1.0",

  "rootView": {

  "viewName": "sam.view.App",

  "type": "XML",

  "id": "app"

  },

  "dependencies": {

  "minUI5Version": "1.32.0",

  "libs": {

  "sap.ui.core": {

  "minVersion": "1.32.0"

  },

  "sap.m": {

  "minVersion": "1.32.0"

  },

  "sap.ui.layout": {

  "minVersion": "1.32.0"

  }

  }

  },

  "contentDensities": {

  "compact": true,

  "cozy": true

  },

  "resources": {

  "css": [{

  "uri": "css/style.css"

  }]

  },

  "models": {

  "i18n": {

  "type": "sap.ui.model.resource.ResourceModel",

  "settings": {

  "bundleName": "sam.i18n.i18n"

  }

  },

  "": {

  "dataSource": "mainService",

  "settings": {

  "metadataUrlParams": {

  "sap-documentation": "heading"

  }

  }

  }

  },

  "routing": {

  "config": {

  "routerClass": "sap.m.routing.Router",

  "viewType": "XML",

  "viewPath": "sam.view",

  "controlId": "idAppControl",

  "controlAggregation": "detailPages",

  "bypassed": {

  "target": ["master", "notFound"]

  }

  },

  "routes": [{

  "pattern": "",

  "name": "master",

  "target": ["object", "master"]

  }, {

  "pattern": "Categories/{objectId}",

  "name": "object",

  "target": ["master", "object"]

  }],

  "targets": {

  "master": {

  "viewName": "Master",

  "viewLevel": 1,

  "viewId": "master",

  "controlAggregation": "masterPages"

  },

  "object": {

  "viewName": "Detail",

  "viewId": "detail",

  "viewLevel": 2

  },

  "expensesHotel": {

  "parent": "object",

  "viewName": "Expenses",

  "viewId": "expenses",

  "controlId": "hotelTab",

  "controlAggregation": "content",

  "viewLevel": 2

  },

  "expensesTaxi": {

  "parent": "object",

  "viewName": "Expenses",

  "viewId": "expenses",

  "controlId": "taxiTab",

  "controlAggregation": "content",

  "viewLevel": 2

  },

  "detailObjectNotFound": {

  "viewName": "DetailObjectNotFound",

  "viewId": "detailObjectNotFound"

  },

  "detailNoObjectsAvailable": {

  "viewName": "DetailNoObjectsAvailable",

  "viewId": "detailNoObjectsAvailable"

  },

  "notFound": {

  "viewName": "NotFound",

  "viewId": "notFound"

  }

  }

  }

  }

}

[Chantele · Accepted solution]

are you getting any errors in the browser console?

[junwu · Accepted solution]

what's your folder structure?

try this.

"uri": "./css/style.css" 

[Former Member · Accepted solution]

The folder structure was wrong.

Thanks!