How to assign CSS to a field on a form?

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
Post Reply
BLOMASKY
Posts: 1470
Joined: Wed Sep 30, 2015 10:08 pm
Location: Ocala FL

How to assign CSS to a field on a form?

Post by 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
Posts: 7523
Joined: Sun Apr 24, 2005 12:36 am
Contact:

Re: How to assign CSS to a field on a form?

Post by aware_support »

The simplest approach would be to do it in the Styles dialog for the attribute - you can type in arbitrary CSS there.
Aware IM Support Team
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: How to assign CSS to a field on a form?

Post by 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
Screen Shot 2020-04-07 at 11.37.25 PM.png (96.31 KiB) Viewed 8689 times
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: How to assign CSS to a field on a form?

Post by 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)
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
joben
Posts: 221
Joined: Wed Nov 06, 2019 9:49 pm
Location: Sweden
Contact:

Re: How to assign CSS to a field on a form?

Post by 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.
toupper.png
toupper.png (5.63 KiB) Viewed 8131 times
If you set the ID to toUpper, you need This CSS rule:

Code: Select all

#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.
Regards, Joakim

Image
BLOMASKY
Posts: 1470
Joined: Wed Sep 30, 2015 10:08 pm
Location: Ocala FL

Re: How to assign CSS to a field on a form?

Post by 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
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Careful changing ID #s

Post by Jaymer »

Here's 1 problem if you change ID #s

https://www.awareim.com/forum/viewtopic.php?f=1&t=11272

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.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Post Reply