Xpages using Dojo elements

Question

I am confused about applying CSS to some dojo elements in my Xpage.

I have a CSS style sheet with the following in it:

.formFields {
color: rgb(5, 56, 107);
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 18px;
text-align: left;
width: 400px;
}

I have a sample test page with the following code:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:this.resources>
        <xp:styleSheet href="/custom.css" />
    </xp:this.resources>
    <xe:firebugLite id="firebugLite1" />
    <xe:djTextBox id="LocNum" styleClass="formFields" value="#{document1.locNum}" />
    <xp:br />
    <xp:br />
    <xp:inputText id="inputText1" styleClass="formFields" />
</xp:view>

When I run this and look at Firebug, I noticed that my CSS was not being applied. For dojo elements this appears to be applied:

.dijitReset {
  -moz-font-feature-settings:inherit;
  -moz-font-language-override:inherit;
  border:0 none;
  color:inherit;
  font-family:inherit;
  font-size:**24px;**
  font-size-adjust:inherit;
  font-stretch:inherit;
  font-style:inherit;
  font-variant:inherit;
  font-weight:inherit;
  line-height:normal;
  margin:0;
  padding:0;
}

I confirmed this by changing the font size.

I want to be able to have all my input fields look the same. Some of the fields have a blue color and some have a black color. I also want to have them look the same when in edit mode, and the same in read mode. That way the user can tell what mode they are in.

What the heck is going on here? I find CSS so darn hard at times.

Bryan

Eric McCormick Eric McCormick · Accepted Answer · 2014-09-16T19:48:03

I believe your issue is less of a direct CSS problem and more a combination issue with how XPages builds out the dijit element (the xe:djTextBox) and where it applies the CSS style you've defined with the fact that you're attempting to use CSS solely from an external file. What's happening is that it is applying your formFields class, but to the root element it generates, a div. The input that the user actually types into is nested two elements in, inside of yet another div.

XPages applying your class to the wrong place

To account for this, I would recommend adjusting your CSS to be defined within the XPage, in a <style type="text/css> tag, which would, by nature of CSS inheriting from the "bottom up", take priority over the styles you're being given via XPages and Dojo.

Inheritance of CSS:

inline styles take precedence (style="...")
page styles (defined in a tag, like I'm describing)
external style sheets (defined with <link rel="stylesheet"...>)

You might be able to get it to apply with your externally defined styles, you may wish to try changing your definition for .formFields to .formFields, .formFields input and throwing in some !important flags to the ends of your property lines. This will make it apply to inputs underneath elements with the formFields class.

Here's an example with in-page defined styles: Cascading Style Sheets cascade!

Xpages using Dojo elements

1 Answers