Need and example of styling of djextNameTextBox (Dojo Name Text Box) control

3
votes

Does anybody have any example of styling Dojo Name Text Box control on xPages.. (djextNameTextBox)

It seems it doesn't work when you try to set it up through Properties dialogue.. I want to change e.g. font, background color, hide border, change color of [x] sign, etc...

Names List

2
xpagesdojo
I tried to do something like this: <xe:djextNameTextBox style="background-color:rgb(255,0,0);border-color:rgb(255,128,0);color:rgb(0,255,0)"> but it doesn't change the style of NameTextBox itself but some area around it.. How can I change font name/color especially (see picture) Jim Smith name, change background from gray to something else, color [x] sign, border, etc.. – VladP

2 Answers

2
votes

You can style the names with class .lotusFilter and the "x" with class .lotusClose.

enter image description here

Here is an example for styling enter image description here

.lotusFilters a.lotusFilter {
    background-color: rgb(255, 0, 0);
    border-color: blue;
    color: white;
}

.lotusFilters a .lotusClose  {
    color: white;
}
0
votes

When you create a Dojo TextBox, it actually creates a few wrapper divs and other inner divs that each have their own functionality. A normal dijit/form/TextBox has this structure:

<div class="dijit dijitReset dijitInline dijitTextBox>
  <div class="dijitReset dijitValidationContainer"> /*...Validation stuff here...*/</div>
  <div class="dijitReset dijitInputField dijitInputContainer">
    <input class="dijitReset dijitInputInner"/>
  </div>
</div>

I may have missed a few classes here or there but that's the general gist of what declaring a Dojo TextBox does. If you want to modify the inner textbox, you can add css for .dijitTextBox .dijitInputField and .dijitTextBox .dijitInputInner. If you want to make it specific to just this Dojo TextBox, then you can add a "class" attribute to your TextBox properties and then use css again. Here is an example of the css:

.dijitTextBox.myClass .dijitInputField {
  width: 100px;
}

.dijitTextBox.myClass .dijitInputInner {
  width: 100px;
  font-size: 12px;
}