Utilizing Dojo widgets in Xpages

Question

Utilizing Dojo widgets in Xpages

I'm having trouble applying CSS to certain dojo elements within my Xpage.

Here is the CSS style sheet I am using:

.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 created a 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>

After running it and inspecting with Firebug, I noticed that my CSS was not being applied consistently for dojo elements unlike other elements like:

.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;
}

This was confirmed when I made changes to the font size.

I strive to achieve uniformity in appearance across all input fields regardless of their default blue or black colors in both edit and read modes. This helps users differentiate between the two modes easily.

CSS can be quite challenging at times, doesn't it?

Bryan

css xpages xpages-extlib

Answer 1

Answer №1

It seems like the issue you're facing is not just a straightforward CSS problem, but rather a combination issue related to how XPages constructs the dijit element (xe:djTextBox) and where it applies the CSS style specified by you, especially since you are trying to use CSS solely from an external file. The problem lies in the fact that your formFields class is being applied to the root element generated by XPages, which is a div, instead of being applied directly to the input element where users type.

To address this, my recommendation would be to modify your CSS by defining it within the XPage using a

Answer 2

It seems like the issue you're facing is not just a straightforward CSS problem, but rather a combination issue related to how XPages constructs the dijit element (xe:djTextBox) and where it applies the CSS style specified by you, especially since you are trying to use CSS solely from an external file. The problem lies in the fact that your formFields class is being applied to the root element generated by XPages, which is a div, instead of being applied directly to the input element where users type.

To address this, my recommendation would be to modify your CSS by defining it within the XPage using a