Formatting column headings on a Form

[Keith]

Hi

Have a look at the attached picture.  I wanted the word 'Change' to be centred between 'RPM' and 'Time' because those two columns are actually 'Change RPM' and 'Change Time'.  Centering avoids the redundancy and condenses the column widths (and its like you typically see in a spreadsheet).

I tried to make the text '       Change' but the leading blanks were stripped.  I tried'-----Change-----' but it looked awful and the column width gets affected.

 Is there a way to achieve the result I want - perhaps via a CSS entry?

Thanks

Keith

[attachment deleted by admin]

[Nick]

A solution is adding this in your custom .css file:

.ui-id-1                         <<<<        You have to use the right ID, look it up with Firebug or Chrome Inpect element (select the text)
{
  width: 400px;             <<<<        (set this to about the width of your table-title-bar)
  text-align: center;
}

if you have no custom css file just create one and add it to the WebSever > Extention > Settings Tab: Styles

HTH,
Nick

[Nick]

Correction it's not a class but an ID:

#ui-id-1

[Keith]

Hi Nick

I have a very rudimentary understanding at the moment of CSS  so could you tell me a bit more!

Currently I am doing simple style changes with my CustomT.Css file and adding things like:

.my-bold{
font-weight:bold;
font-size:14px;
}

This works fine and now I can have column headings and comments bolded after adding 'my-bold' to the CSS style for the element.

For my problem could you tell me what I would actually add to CustomT.Css using this ID (I did an 'inspect element in Chrome but wasn't much wiser and couldn't find anything about ID).

Thanks

Keith

[Nick]

Hi Keith,

I've attached two pictures, one done with Chrome and the other with Firebug.
I prefer Firebug. Install the Firebug plugin in Firefox and activate it, Use button Html and Console.
Click on the item you want to inspect and you will see everything you need.
You can even change things in Firebug to test it live.

Good luck,
Nick


[attachment deleted by admin]

[Keith]

Hi Nick

Thanks very much for your help - I now understand what this is about and this will be very useful for me when adding fancy formatting.

However, I still can't get the result that I want.  If you look at the two attached pictures - the first 'Pic-No Style' shows my current 'look'.  The word 'Change' is left aligned with the 'RPM column.  I want it to be indented right so that it sits mid way between the 'RPM' and 'Time' column headings. This is because the adjective 'Change' refers to them both.

If you look at 'Pic-Style added' you will see the effect of adding the ID below:

#textnew1{
width: 80px;             
text-align: right;
}

(I looked at this in Firebug and played around, its brilliant!)

What has happened is that the element 'textnew1 is now 80px wide which is wider than the maximum width of the 'RPM' column with the result that the next column - 'Time' has been shifted fight so that it lines up with the rightmost position of 'textnew1'.  I have tried 'centre' but no difference.  The text element is 80px and that is determining the position of the next column.

I want to divorce the positioning of 'Time' from the 'Change' element.

What do you think - doable?

(I have tried changing settings for the field on the Form but no joy there either)

Thanks

Keith

[attachment deleted by admin]

[Nick]

Hi Keith,

I assumed (always a risk) that the "Change" was a title-bar-text.
Considering the effect you show it looks more to be a tabel header. (<th id="....")

If that's true forget about the width and the text-align and try:

#textnew1{
padding-left: 30px;            <<<< you have to try the right value here     
}

HTH,
Nick

[Nick]

If it's indeed a table header and you can't get the text shifted far enough to the right you can
span the header over two columns. See "Header spans multiple columns" at the NT settings for the column.
Obviously you use 2 as the number.

Nick

[Keith]

Hi Nick

Thanks again for your assistance. This is a Form not a Browse and I have tried the 'padding' idea but with the same distorting affect.
I should have provided a full picture of my Form before this and it would have been clearer.  So have a look at the attached doc which fully describes my dilemma.

As I said this is not a big problem I can just run with the formatting as-is but it would be nice to understand if I am missing something simple as regards Form formatting and if not whether the problem I am describing is generic and could it be addressed in NT per my suggestion.

This discussion has been most productive for me and has jump-started my CSS knowledge.  Thanks.

Cheers

Keith

[attachment deleted by admin]

[Nick]

Hi Keith,

You have to add something outside and before the form-table-structure.
Try this:

Go to the source of the form-procedure and look for  GenerateTab0  Routine.

A bit below you will find: ! Start of "Inside Form Table Before Tab Table"

Put in there:

packet = clip(packet) & '<div id="whatever">Change         km/h   etc.</div>'

You have to create the:  Change     km/h  part so that it fits.

In your CSS you can then use:

#whatever
{
padding-left: 100px;             <<<< again you have to try the right value here.
}

Of course you can also change the vertical position and almost everything else you want in the CSS,

If you take a closer look at the source you will find lots of those embed-points where you can add
things to the packet-string that's send to the browser.

BTW I've tried this myself and it works.

HTH,
Nick