NetTalk Central

Author Topic: How to format fields on a NT Web Form  (Read 5279 times)

Johan de Klerk

  • Full Member
  • ***
  • Posts: 217
  • Johan de Klerk
    • View Profile
    • Designer Software
How to format fields on a NT Web Form
« on: July 06, 2019, 09:00:34 PM »
Hi Bruce,

I am busy making my NT Web app look better.
The strings I have done and it looks great.

The Date does not want to change the length of the display.

I have set it up as follow:
Type: Date
On the Date Tab:
Width (Chars): 10
Picture: @D6
Max Length: 10
However it keeps on making the Date Entry field very long.

What do I need to do to make it work?

Regards

Johan de Klerk
Clarion 10, NT 11.57

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: How to format fields on a NT Web Form
« Reply #1 on: July 07, 2019, 06:11:03 AM »
CSS is the only way I have had sucess with that.
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

Johan de Klerk

  • Full Member
  • ***
  • Posts: 217
  • Johan de Klerk
    • View Profile
    • Designer Software
Re: How to format fields on a NT Web Form
« Reply #2 on: July 07, 2019, 08:04:37 AM »
Hi Don,

Thanks for the reply.

I have no idea about the CSS thing.  :'(
I must still learn this.

Can you please explain in detail how to do that.

Regards

Johan de Klerk
Clarion 10, NT 11.57

Jane

  • Sr. Member
  • ****
  • Posts: 372
  • Expert on nothing with opinions on everything.
    • View Profile
    • Email
Re: How to format fields on a NT Web Form
« Reply #3 on: July 07, 2019, 03:19:36 PM »
Johan,

If I might suggest... it would be well worth your while (i.e., virtually essential) to invest a few hours learning the basics of CSS if you are planning on doing ANY web development.

CSS stands for Cascading Style Sheets.

These are text files that determine how your web stuff will look.

First the "style" part of the name.

Various elements on your web page (header, text, background, any entry field, button, etc.) can have hidden tags attached to them.

When the browser is creating the web page on the user's computer, it looks at those tags and then looks into any style sheet text file(s) linked in your page header to see whether there is information matching the tag(s) for each element as it renders it.

So for example, your header may have a particular tag named johan1.  The style sheet has information saying that johan1 means to use a bold font colored red.  So your header will be bold and red.

As for the cascading part... 

Your web page may include multiple style sheets. 
There may be conflicting information in those sheets as to the details for particular tags.

For example, the basic NetTalk style sheet may say that the johan1 tag is red and bold.

But if you add an ADDITIONAL style sheet which is loaded AFTER the first one (i.e., further down the header) and that style sheet says that johan1 should be blue, then the header will be blue and bold. 
It still gets the bold from the original NetTalk style sheet.
But the additional style sheet that you added "wins" for the color attribute (blue instead of red) and that's how the element will be rendered.

The "cascade" part of the name refers to how these competing bits of information are evaluated:  https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

In a NetTalk web server, virtually anything on a form or browse can have custom CSS applied to it.

There is a trick specific to NetTalk.
If you want the style you're putting on a particular element to be the ONLY style applied, then you put it in directly in the template, like 'johan1'
If you want the style you're putting in to be IN ADDITION to whatever NetTalk will be applying to the element, then you need to leave a space in front of your tag when entering it in the template, like ' johan1'
(If you're just overriding an existing NetTalk style element, you don't need to add anything in the template - just add the style to your custom CSS style sheet.)

For what Don is suggesting, I'd add a custom style sheet with a few width tags.  Then experiment to see what makes your date field look the way you'd like.

A style might look like

.my8em{width:8em;}

And then on the NetTalk template's CSS tab for your date field, in the Entry Class you could put ' my8em'

Again, if you're planning on doing any web apps, you'll save yourself a lot of grief if you take the time to learn the basics of this.

IMHO...

Cheers,

Jane

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11251
    • View Profile
Re: How to format fields on a NT Web Form
« Reply #4 on: July 07, 2019, 09:34:28 PM »
Morning Johan,

There are also a bunch of user group webinars that discuss this - so feel free to check out those. Or ask a question on Thursday and we can go through it there.

cheers
Bruce