NetBrowse with fixed column widths

[hkalmbach]

Hello,
I have a NetBrowse routine and would like to have fixed column widths. The reason is that the browse is part of a form and should have a fixed width, at least should not get to narrow because then a layout of the from gets bad.

In the CSS tab on field level I defined a Column width. This also later is shown in the html code. But it is not accepted and not used (see attachment)
In the html code I find the classes nt-flex, nt-flexwidth-1 and so on, I think this is for responsive grids.

Is there a way to have a browse with fixed column widths? How? (But only one browse of the complete web application)

Thanks for every help

Cheers
Heinz

[DonRidley]

Hello Heinz,

I think you're on the right track by looking at your CSS.

You can right click on your browse's cells and experiment with the CSS to determine what works for your particular situation.  I like Firefox for insecting DOM elements but Chrome works great as well.  Personally, I would avoid Internet Explorer like the plague.  Haven't tried Edge.

Anyway, once you figure out your CSS, you have a lot of control over your CSS in NetTalk.

In the browse field's CSS tab, there's the option to set custom CSS.  You have the ability to have the CSS apply to the whole cell, the cell contents, or both.

You may set a name and a value.

It would be entered in the template like:

Name:  'width'
Value: '5em' 

NetTalk will add a style attribute to the cell like: style="width: 5em;"

Just remember an element's width is connected to its "display" property.  So an element set as "display: flex;" may display its width differently than an element with "display: block;"  Also, the downside to setting a style attribute is that the element is "locked in" to that setting until you recompile your app.  Whereas, if you use a CSS class name, you can modify a "custom.css" file "on the fly" so to speak, refresh your page, and the new CSS is applied.

You could also play around with "max-width" and "min-width."

Also, another cool NT feature for "div" layout browses, is the "relative" with option.  It is set to 1 by default.  You can increase or decrease that number to increase that column's width relative to the other columns. 

In summary, you really have a lot of options in NetTalk.  Just experiment with the various template options until you get your browse to display as you want.  There are many NetTalk user group webinars where Bruce demonstrates how to modify CSS. 

Good luck!

Don

[hkalmbach]

Hi Don,

thanks for your answer.
I tried to use min-width. If you scroll my picture right you see that I define a min-width of 80, but also that this is not used.
Something is overwriting it (its crossed out) and I don't know what does this and how to overrule it.

You have an idea?

Thanks
Heinz

[DonRidley]

It could be over-ridden due to invalid CSS or because a parent element already sets that property.

You can use your browser's inspection tool to inspect the elements.

I would highly suggest you watch a few NetTalk user group webinars.  It's hard to describe with text.

https://www.capesoft.com/accessories/NetTalkUserGroup.htm

Don

[Bruce]

Do you want the browse _column_ to have a fixed width? or the whole browse table to have a fixed width?
Your question is ambiguous.

also setting min-width to 80 isn't doing anything because you didn't specify a unit.
You would need something like '80pt' or '80px' or '80em' or '80%' or whatever.


cheers
Bruce