List view in WebClient

We are migrating a project from version 3.5 to version 5 and most of it goes quite well. But something changed in the list view when using the WebClient.

No matter how the anchoring is defined, Servoy re-arranges the elements of the body in position and size according to the width of the web browser. But when you have a manual header defined these elements do not move along. As a result, the column header and -data are not aligned. An option to solve this would be to use a table view, but then a default header appears which is not what I want for several reasons.

How can I make sure that elements of the body are fixed in position and size without using a table view? Or that a manual header moves along with the body?

You can disable anchoring for webclient from admin page (it’s a property there). Then solution will be rendered as in 3.5 . Also you can use the labelfor functionality for table view: in the body have a label with labelfor property filled for one of the fields, then the header from that field will use the look of the labelfor label (so you can customize the tableview header). Also, if the solution displays different in smart and web client you can open a case with a sample and we’ll see what can be done.

Thank you for your prompt reply.

I disabled the option “servoy.webclient.enableAnchors” an restarted Servoy several times, but I don’t see any change in behavior. I’m somewhat surprised that this feature is implemented in the WebClient since it doesn’t work like this in the SmartClient; all elements just follow the defined anchoring only.

I also tried to use the option “labelFor”. It does follow properties like font, color and alignment. But it still shows blue bar behind the label itself which is not desired. Is there any way to remove this blue bar and only show the text?

you mean the underline effect when you hover over the text ? No, I don’t think you can change that (maybe just with some hacks). But why to change it, it’s pretty common on web ?

No, it’s not the underlignment when I hover over the text. It’s a fixed blue bar across the whole width of the table behind the texts, which is always visible.

[attachment=0]Header.jpg[/attachment]

Header.jpg

set the background of the label (and transparent property should be false)

Yes, that solved the problem of the blue bar. It’s gone now… Thanks.

Could you still shed some light on that option regarding anchoring though?

vincentSchuurhof:
Yes, that solved the problem of the blue bar. It’s gone now… Thanks.

Could you still shed some light on that option regarding anchoring though?

Not sure what you mean ? This option tells to take into acount the anchoring info that is defined in the solution (so that it would display like in Smart Client). When is off, will display the old way. Or do you mean about columns stretching ? If you anchor a field left-right in tableview will stretch …

I now used the list view with the property “labelFor”. I tried to enable and disable the anchoring for all individual elements and enable and disable that anchoring property. But when I expand the browser horizontally, the fields stretch all in the same way without the header stretching along with it. I just don’t see any difference in using that property.

[attachment=0]Header.jpg[/attachment]

Header.jpg

vincentSchuurhof:
I now used the list view with the property “labelFor”. I tried to enable and disable the anchoring for all individual elements and enable and disable that anchoring property. But when I expand the browser horizontally, the fields stretch all in the same way without the header stretching along with it. I just don’t see any difference in using that property.

this functionality is for tableview; also the labels should be in body part (so , you don’t need the header part)

This does not work for me as well.
I tried tests with the “servoy.webclient.enableAnchors” server-setting enabled and disabled, but I don’t see any different behavior in the webclient anchoring at all.

The objective is to have all fields in the listview (including the header fields) stay on the same position in the webclient when the browser is resized.

ok, i upload a small example; is this what you want to achieve ?

tableview_sample.servoy (6.54 KB)

Thank you for the sample. But I already achieved this situation since this is a table view.

What I want to accomplish is a table in list view with a manual header in which:

a. the fields don’t stretch according to the size of the browser (because I cannot make the header stretch along with it), or
b. the fields AND header both stretch according to the size of the browser

vincentSchuurhof:
Thank you for the sample. But I already achieved this situation since this is a table view.

What I want to accomplish is a table in list view with a manual header in which:

a. the fields don’t stretch according to the size of the browser (because I cannot make the header stretch along with it), or
b. the fields AND header both stretch according to the size of the browser

Ok, I finally see what you mean now. Indeed the listview doesn’t keep fixed width. You can add a case in our system about this ( http://www.servoy.com/s ) . However I think using tableview with labelfors is a better choice. If you don’t want the columns to be sortable you have to set : onSort command of the form to none. However the display will be the same (still having links).