Bypassing read-only fields

[Keith]

Hi

I recently asked on the Forum whether there was an easy way of 'bypassing' read only fields on a Form.  What I meant by this is to stop the cursor entering a read-only field box after a 'tab' or 'return' key.  Have a look at the attached Read-only png file.

There are two blocks of fields and it made no sense for the cursor to end up in the blue block of fields (the read-onlys).  One answer was to declare these fields to be 'display' but this caused all of the nice read-only styles to be lost.  the next suggestion was to stick with 'display but to add css to make it look like the original.

I quailed because I have only just learned how to spell 'cascading style sheet' and I thought that this would be a trick too far.  However, using Firefox and 'inspect element' I managed to deduce which commands gave the 'read-only' look and I duly added a 32 line css to CustomT.css  It looked awful but it did the job 99%.  the missing 1% was that the text sat in the box a smidgen higher than 'middle' and I couldn't get it to shift - no matter what.

So I sent it off to a friend who is a .Net programmer and a web developer and confessed ignorance and asked for help with the positioning problem.  This is what he returned to me:

.my-readonly{
background-color: #E2F9Fe;
color:#000;
width:39.6px;
min-height:19.8px;
font-size:13.2px;
font-family:Trebuchet MS,Tahoma,Veranda,Arial,sans-serif;
font-weight:400;
border-radius:4px;
border:1px solid #888;
border-collapse:collapse;
text-align:right;
vertical-align:text-middle;
margin:2px 0;
padding:2px 2px 0 2px;
}

This is less than half of my attempt so a great consolidation.  He also made the following comment about the vertical alignment of the text:

'I’m not 100% sure why vertical-align isn’t working, except that it might be because the div is a block element.  I think if you had a span element inside your div, then it would work, but you probably don’t have much control over how nettalk renders it.  I just worked around it by adding 2px of padding to the top of the element.'

So I'm sharing this because I think to have this css which turns a display into a read-only look provides a big benefit to your Form (it has for mine).  I provide this detail and comment because it may be useful and you may be able to improve on it.

Cheers

Keith

[attachment deleted by admin]

[terryd]

Thanks Keith
Feedback always helps.