The Big Picture on displaying fields in a browse

[rjolda]

Hi,
Net Talk 5 - I have a browse with 5 fields on each row.  I am trying to get my handle around the rendering of the display in different screen sizes.  I am trying to figure out which settings will set the field size in the NEt Talk templates and which things I should do by CSS for different screen sizes.
My big issue is that the first column displays a string.  As long as the screen is sufficiently wide, the string diplays on one line.  However, when the screen width is changed, the browse line will use 2 or three lines to display the full length of the string in the first column.  What I want to do is keep the display of all fields to ONE line - I don't want the browser to keep adding lines to display the whole string. 
What are the possible ways of handling the size of the display of column 1 string so that if it will only show as much of one line which will fit in the size of the column - not wrapping into more lines to display it all.
Thanks for any insight as to how to handle this between different size displays!
Ron Jolda

[Bruce]

add the css class
' nt-nowrap'
to the column...

If you want to reduce the maximum possible text in the column then you can do something like this is the "display" setting;

choose(len(clip(cus:name)) < 50, cus:name, sub(cus:name,1,45) & '...')

Cheers
Bruce

[bshields]

Hi Ron,

You can do this with CSS.

You'll need three pieces of CSS.

.myNewCSS {
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
}

white-space: nowrap; - means no wrapping to a new line
width: npx; - it will need a width otherwise it will try and use the maximum width necessary.
overflow: hidden; - this stops the text that does fit from writing over columns to the right.

Create some CSS like the above and add them to the column CSS within the browse.

Regards
Bill

[rjolda]

THanks guys,
most helpful!
Ron

[Bruce]

Bill,

I might be tempted to use
max-width: 200px;
instead of
width: 200px;

you agree?

cheers
Bruce

[bshields]

Hi Bruce,

Yes you are right  max-width would be the best approach. It will also play nicely with the table widths used in table TDs.

Regards
Bill