Tips for arranging many fields on a form

[sukhendu]

I'm looking for tips on arranging many fields on a form.  How to reduce blank space between two fields?

Thanks,
Sukhendu

[DonRidley]

Play around with "Span Prompt/Value/Comment"  and the "Last in Cell" settings.  These will effect horizontal spacing.

Good luck,

Don

[bshields]

Hi,

I'm open to suggestions, might be nice if we share ideas. Attached are a few screen shots of mine that demonstrate me trying to make stuff pretty (with moderate success!)

Regards
Bill

[attachment deleted by admin]

[Bruce]

Looks good Bill.

There are a couple tweaks you could make, but frankly it'd be very field specific, and I'm not sure if it'd be worth the hassle.
With any forms that have large numbers of field, ultimately there are a lot of fields, and that will always be the overriding impression.

Cheers
Bruce

[bshields]

I'm with Bruce. I try and make the stuff outside the form pretty, and leave the stuff inside the form a bit basic. Otherwise it can get very fiddly and as you change the form and improve it stuff breaks, and it ends up wasting lots of time.

Its also sort of a rule with web that you keep things simple and spread stuff out (exactly not what my examples showed!).

[DonRidley]

Hey Bill,

I would love to know how you built that pretty photo grid?

Thanks,

DOn

[bshields]

Hi Don,

Its a NetWebSource, since its job is to preview photos, allow deletions and allow the user to reorder them. If they drag and drop the photos around, it reorders them (miles better than my old arrows buttons to move photos up and down within a NetWebBrowse. If they drop the photos on the trash can it deletes that photo.

But if we ignore the drag and drop stuff (which is a bit messy) the visual stuff is pretty straight forward.

I'll try and block out the code roughly.

Create NetWebSource procedure, in "Processed Code" add:

IF p_web.GetValue('_Silent_') = 0
    packet  = clip(packet) & '<table class="nt-browse-table ui-widget-content ui-corner-all no-borders" id="ListingTable_tbl" width="400">'&CRLF
    packet  = clip(packet) & '<thead class="ui-widget-header">'&CRLF
    packet  = clip(packet) & '<tr><th colspan="4" style="height: 20px;" valign="center">'&CLIP(p_web._jsok(LIS:_ShowAddress))&'</th></tr>'&CRLF
    packet  = clip(packet) & '</thead><tbody class="nt-browse-table-body">'&CRLF
    packet  = clip(packet) & '<tr>'&CRLF

    Count# = 0
    ** START LOOP OF PHOTOS **
        Count# += 1
        IF Count# % 4 = 1 AND Count# ~= 1 THEN packet = clip(packet) & '</tr><tr>'&CRLF.
        packet = clip(packet) & '<td><div class="movable_img"><img src="/images/'&CLIP(PHO:Filename)&'" width="100" alt="" border="0" /></div></td>'&CRLF
        do sendPacket
    ** END LOOP OF PHOTOS **
    IF Count# % 4 ~= 0
      LOOP j# = 1 TO 4-Count# % 4
        packet = clip(packet) & '<td></td>'&CRLF
      .
    .
    packet  = clip(packet) & '</tr>'&CRLF
    packet  = clip(packet) & '</tbody></table>'&CRLF
.


The _Silent_ is only a concern if you use this NetWebSource as a child of a browse (like i do in my example).

Regards
Bill

[DonRidley]

Awesome!  Thank you very much!

I have never got my mind wrapped around "packets." 

You're a little more advanced in NT than I. 

Thanks again!

Don

[sukhendu]

Bill,
Your forms look very cool!  What font did you use?
Thanks,
Sukhendu

[bshields]

Hi Sukhendu,

The font CSS is:

.ui-widget {font-family: Tahoma,Verdana,Arial,sans-serif;}

But its not really that different to the default. I do remove a lot of the padding top and bottom from the fields to "tighten" things up.

Regards
Bill

[sukhendu]

Bill,
Where do I find go to remove padding from the fields?
Thanks,
Sukhendu

[bshields]

Hi Sukhenhu,

There is likely to be a thread (or numerous) on this board explaining how to customise CSS, which is what you need to do to tweak the default NetTalk layout, which someone might be point out.

Meanwhile, i'll quickly explain the process.

1. Use a programmers browser (Chrome or Firefox with Firebug installed). Both of these will allow you to edit the CSS realtime and see the results without mucking around in your app or compiling.

2. Create your own CSS file and add it to the app (in extensions for your main procedure under style|files). Later you'll put your changes in here. It will override the default NetTalk ones.

3. Experiment. Right click and "Inspect Element" on the fields you'd like to change. All HTML (and CSS) is a hierarchy so you'll often have to look up and down the HTML and CSS to find the right place, but frankly you can pretty much guess. Edit the values for padding, margin, they'll be your most common CSS elements for spacing around things. After you have experimented, duplicate your CSS changes into your own CSS file and Force a page refresh and those settings will then be used.

To get you started, i'll paste some of my CSS below, if you add it to your CSS file, stuff should change (maybe not for the better, but it might fast track things for you):


.nt-left {margin-right: 0px;}
  .FormTable td {padding: 1px 4px; }
  .is-dropdown { height: 24px; font-size: 11px; margin: 2px 0px 0px 0px; padding: 0px; }  /* fixes drop down height issue in FF */
  .MainButton { border: solid 1px #888; background: #ddd; padding: 3px 12px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 12px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; color: black; }
  .MainButton:hover {background: #1ea85a; color: #ffffff; }
  .MainButton:active { background: #1b435e; }
  .ui-dialog {border-radius: 4px 4px 4px 4px; box-shadow: 8px 8px 4px #666666; }
  .ui-dialog .ui-dialog-titlebar {background:#E3004B; color:white;}
  .ui-tab-small a {padding: 0.15em 0.5em !important; cursor: pointer !important;}
  .nt-browse-table-small {padding: 0 !important; margin: 0 !important; }
  .ui-datepicker-trigger {margin-top:6px;}
  .form-subheading {margin-top: 5px; margin-bottom: 5px; padding-left: 0px; text-align: left; font-weight: bold; border-bottom: 1px solid #E3004B; }
  .nt-browse-table-footer {font-weight: bold; font-size: 1em; }
  .nt-prompt {margin-top: 4px;}
  .nt-browse-table th {font-size: 1em; font-weight: normal; padding: 0 2px 0 2px; }
  .ui-widget-header { background:#FFF6E8; border:1px solid #E78F08; color:#000; font-weight:bold; } 
  .ui-widget-header a { color: black; }
  .nt-form-table { border:0 none; border-collapse:collapse; margin: 0px; padding:4px; text-align:left; }
  .nt-form-table td { border: 0 none; font-weight: normal; padding: 0 0 0 0; }
  .nt-browse-table td { border-color:#EEEEEE #EEEEEE #CCCCCC #AAAAAA; border-style:solid; border-width:1px 1px 1px 0; padding-left:3px; padding-right:3px; }
  .nt-header { padding: 10px 0; color: black; font-size:1.8em;}
  .adiv { margin-right: 0px; }
  .ui-widget { font-family:Tahoma,Verdana,Arial,sans-serif; font-size:1.1em; }
  .prompt-indent { margin-left: 220px; float: left; margin-right: 10px; }
  .comment-indent { color: #444444; position: relative; top: 4px; height: 0px; }
  .nt-width-99 {width: 94%; }
  .ui-widget-content {background: white; border: 0; }
  .nt-tab-title {font-size: 1em;}
  .ui-tabs .ui-tabs-panel {border-left: 1px solid #E3004B; border-right: 1px solid #E3004B; border-bottom: 1px solid #E3004B; }
  .ui-tabs .ui-tabs-nav {border-bottom: 1px solid #E3004B; background: white; border-top: 0; border-left: 0; border-right: 0;}
  .ui-tabs .ui-tabs-nav {margin: 0; padding: 0;}
  .nt-formcell {padding: 0 4px 0 0;}
  .ui-widget-header .ui-state-default {font-weight: normal; background: white;}
  .ui-widget-header .ui-state-default :hover {background: #ccc;}
  .ui-widget-header .ui-state-inactive {background: white;}
  .ui-widget-header .ui-state-active {font-weight: bold; background: #E3004B; border: 1px solid #E3004B; }
  .ui-widget-header .ui-state-active a {color: white;}
  .ui-widget-header .ui-state-active a:visited, .ui-widget-header .ui-state-active a:link, .ui-widget-header .ui-state-active a:hover {color: white;}
  .ui-tabs .ui-tabs-nav li a {padding: 0.3em 1em;}
  .ui-tabs .ui-tabs-nav li a:hover {color:white; text-decoration: underline;}
  .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {color: #333;}


Maybe this will help! Maybe it will make it worse, but at the least if should show you what is possible.

Regards
Bill

[sukhendu]

Bill,

Thank you for taking the time to show/explain how to add stuff to css file.  I'll follow your tips and appreciate your help.

Cheers,
Sukhendu

[springguy]

Bill,
What I don't understand is how you got that great horizontal checkbox layout on your second image.  Was that done in CSS too?  Can you help us understand how you did that?

Thanks,
Mike Springer

[bshields]

Hi Mike,

Yeah its just some standard CSS I use for layout.

For the checkboxes that are not on the immediate left hand side i add the following CSS to the "Prompt Class"

'nt-prompt mw140 ml40'

'nt-prompt' is the normal NT one.

'mw140' is mine and means Minimum Width of 140.

'ml40' is mine and means Margin Left 40.

This effectively makes them line up and not look like a dogs breakfast.

the CSS which needs to be added in looks like this:

.mw140 {min-width:140px;}
.ml40 {margin-left:40px;}

Regards
Bill