How to assign CSS to a field on a form?

BLOMASKY

Specifically I have one field that I want to have always displayed in upper case when the user enters data. So, I have a CSS class:

.ToUpper {
text-transform: uppercase;
}

Question: How do I assign this class to a field on a form?

Thanks
Bruce

aware_support

The simplest approach would be to do it in the Styles dialog for the attribute - you can type in arbitrary CSS there.

Jaymer

On the Form, go to Presentation Rules.
"Set Element" and enter "text-transform: uppercase" in that top Style area.

Of course if you define this in the Attribute, it will be inherited to the form.

Screen Shot 2020-04-07 at 11.37.25 PM.png

Jaymer

Just realized this:
the CSS method DISPLAYS uppercase, but its still lower (or as entered). its NOT converting the data before it goes to the db.

Its nice to have immediate feedback to the user, but you'd still need a TO_UPPER_CASE function on it in a RULE.
(or use Javascript in a script to change it after focus loss)

joben

Here is an alternative way to do it by using an ID instead. Might come in handy if the presentation rules don't do the trick.

If you want the uppercase behaviour visible when entering the data, it can be achieved by setting the cell ID.

If you set the ID to toUpper, you need This CSS rule:

#toUpper {text-transform:uppercase;}

IMPORTANT: Only use the same ID once per form. But in this scenario you said you only needed this behaviour for one field, so this solution should work.

If you want to store it as uppercase in the database as well, then Jaymer's solution is what I'd use.

BLOMASKY

It's nice to see 2 year old questions get shiny new answers. For a moment I thought this forum was getting TOO quiet.

Bruce

Jaymer

Here's 1 problem if you change ID #s

Anyone seen garbled Combo Box data?>

If you have a list of Customers in a Grid, and a [Details] Row Operation that does a EDIT OBJECT in a NEW TAB, then
you might have this "garbled combo box" issue.

The first instance will be fine. The 2nd one, since you overrode the ID #s, MAY cause problems.
(of course, for this example of UPPERcase, you wouldn't need to force UPPER on a combo box, so its not really relevant to the UPPER issue - more just a generic warning if you alter Aware's ID #s)

Sometimes, if you want to augment a form with JS/JQuery, you need the ID to get access to the field. Thats what I was doing - trying to improve the behavior of the COMBO BOX. And then on additional tabs opened, that ID #, being hardcoded by me, already existed on a prior Tab and messes up the screen.