CODEWITHSUNDEEP
cssdojoibm-mobilefirstinline-code
dlaffranchi
dlaffranchi

Reputation: 13

Worklight 5.0.5 generates unalterable inline CSS

I ran into an issue while using Worklight 5.0.5 for an Android mobile project today. This project does make use of Apache Cordova, Dojo Mobile, and Worklight libraries, if that helps.

The problem is that Worklight automatically generates unwanted inline CSS in some cases during build time. I cannot find which component of Worklight is responsible for this, nor can I find out how to alter or prevent this behavior when required. This may seem like a small problem, but the fact that it's inline CSS, and during build, means that I'm prevented from affecting it!

A search through the JavaScript and CSS, both those that I have built and those that are imported for Dojo, do not seem to show anything that would add the CSS.

Example:

I have the following tag in my HTML:

<ul data-dojo-type="dojox.mobile.TabBar" barType="segmentedControl"
class="center segmentContainer">

After build, this shows in a WebKit-based browser (Google Chrome) as:

<ul bartype="segmentedControl" class="mblTabBarSegmentedControl mblTabBar center segmentContainer mblTabBarNoIcons"
data-dojo-type="dojox.mobile.TabBar" id="dojox_mobile_TabBar_0"
widgetid="dojox_mobile_TabBar_0" style="padding-left: 78px;">

The final inline CSS, the "padding-left", is what I'm trying to seek and destroy. Does anyone know what is responsible for this behavior, and how I can change or prevent it?

Upvotes: 1

Views: 125

Answers (3)

Angelo
Angelo

Reputation: 814

This is the default Dojo style. You override it writing this code in your AppName.html:

...
<style>
.segmentContainer {
    //your personalization
}
</style>
</head>
<body>
......
<ul data-dojo-type="dojox.mobile.TabBar" barType="segmentedControl"
class="segmentContainer">

Upvotes: 1

eborysko
eborysko

Reputation: 79

Are you sure this Worklight's build process adding this style and not Dojo's parsing of the ? I would check Dojo mobile api to ensure it's not adding that by default. OOTB Dojo, for TabBar generates the following markup with inlined CSS.

<ul id="demoTabBar" dojotype="dojox.mobile.TabBar" single="true" iconbase="images/tabbar_all.png" fixed="bottom" role="tablist" class="mblTabBarTabBar mblTabBar mblFixedBottomBar mblTabBarNoText mblTabBarFill" widgetid="demoTabBar" style="bottom: 0px; padding: 0px;">

Upvotes: 1

Blaine
Blaine

Reputation: 829

I don't know much about the technologies, but in case you cannot get rid of the CSS being inserted you can use !important in your own CSS. For example:

.segmentContainer {
    padding-left: 0px !important;
}

This prioritizes the padding-left statement moving out of the normal prioritization order. Normally I bvelieve it goes inline, ids and then classes but with !important your class prioritizes.

Upvotes: 1

Related Questions