Modifying style of TextItem title...

[jcubeta]

Hello,

We've noticed that, when marking a field as "required" in a DataSource, the title (i.e. label) of a TextItem becomes bold. We'd like to tweak the appearance of required fields - larger/different font, not bold, etc.

I've looked around in the theme's CSS but not finding any section that is obviously titled. I've also tried defining my own CSS selector with specific font/weight/size settings, and specifically apply those via TextItem.setTitleStyle(...). This yielded some strange, seemingly compounding results.

Any help/guidance on the proper way to modify the style of a TextItem's title for "required" ones would be appreciated.

Thanks!
James

SmartGWT version: v8.2p_2012-10-31/Pro Deployment (built 2012-10-31)

[jcubeta]

In an attempt to help move this question along - here are more specifics on what I've done so far:

I've modified the skin_styles.css file for our theme (which is essentially the "TreeFrog" theme provided with SGWT with a few very minor tweaks) to section off the following selectors:

.formTitle,
.formTitleFocused,
.formTitleDisabled,
.formCellError,
.formTitleError {
   font-family:Verdana,Bitstream Vera Sans,sans-serif;
   font-size:12px;
   font-weight:normal;
   color:#ff0000;
}

Note that (1) I made a visually obvious tweak (font color as red) to verify that this selector is indeed modifying TextItem titles, and (2) I am explicitly stating that the font weight should be "normal".

However, for fields in the DataSource definition that are marked required="true", these titles are still displaying as bold. This leads me to believe that something is happening in the code that is overriding my CSS selector.

Again, what I am trying to do is tweak things so that titles for TextItems marked as required="true" in the DataSource do NOT show up as bold.

Thanks again,
James

[Isomorphic]

Take a look at form.requiredTitlePrefix/Suffix.

[jcubeta]

Thanks. I just took a quick look at the methods DynamicForm.setRequiredTitlePrefix/Suffix. Unless I'm missing something, these don't allow me to modify the weight of the font being used for titles of "required" TextItems / FormItems.

[Isomorphic]

Look at the default value.

[jcubeta]

Ah! Found it! Thank you!

So - just to close the loop and provide specifics for other future readers of this thread on how to change this behavior:

The DynamicForm class has the following method calls: DynamicForm.setRequiredTitlePrefix(String prefix) and DynamicForm.setRequiredTitleSuffix(String suffix). By default, the prefix and suffix are the opening and closing HTML bold tags "<b>" and "</b>".

As a suggestion, perhaps this cold be moved to a selector in CSS instead?

.FormItemRequiredTitle {
   font-weight:bold;
}

Also, is there a SmartGWT Wiki anywhere that users of this forum can edit? Might be a good place for users to collect these sort of solutions as opposed to them being scattered about forum posts.

Thanks again,
James

[Isomorphic]

We may eventually move the bold to a CSS selector by adding "Required" as a possible state suffix (see FormItemBaseStyle).

There's a public wiki at wiki.smartclient.com, your contributions are welcome. In this particular case, we'd added a note on the javadocs for formItem.titleStyle pointing out that the titleSuffix/Prefix can affect appearance, so it's unlikely anyone will miss this consequence in the future.

[jcubeta]

Cool - thanks!