I have a screen which is two in one, browse and editor on one screen. On Edit screen I need to show some data, like an article. On that screen there is only two editfield so there is enough space to place there. I’ve put three label into fieldGroupBox. I thought it automatically comes after the two field, but no. There is always a big space between my labels and the fieldGroup. I tried to put my labels into any containers and failed. And in the second label there is lots of sentence and they overflow the screen. Why it is not continuing in the next row? I attached a photo about the current situation. You can see I made the labels css, but could you help me about the composition?
I’ve read about the CssLayout, and it looks fine, but I can’t use it. Is there any tutorial about modify the screens? Can’t make studio to generate the screens basically in CssLayout? I have to convert all my screens by myself? And how to make my edit screens like the examples in the documentation? I think the edit fields. Basically there are fields in columns, but in the documentation there are textFields, and if I change my fields into textFields then it do not work.
It’s not quite clear do you use FieldGroup or GroupBox component? Did you use our Entity browser/editor temlate via Studio or handwritten screen? It would be helpful if you attach screen descriptor (XML) and describe in more details why standard Entity browser/editor temlate doesn’t fit your needs.
The reason why your layout looks line in the screenshot is that labels placed within a container with not content-dependent size. In this case, by default, containers without the expand attribute provide equal space for all nested components.
To fix the problem, you can place label within another container and expand it instead of fieldGroupBox.
You can read more about layout rules here.
Okay I have put my labels into a groupBox, after the fieldGroup (so fieldGroupBox do not contain my labelGroupBox), but it is not better, it appears on the bottom of the screen. I attached a photo in studio.
If I put it into fieldGroup it is not better, still a big space between the text field and my container.
According to the documentation:
In a web client, the text contained in value will be split into multiple lines if its length exceeds the width value. Therefore, to display a multiline label, it is sufficient to specify an absolute value of width. If the label text is too long and the value of width is not specified, the text will be truncated.
So, in your case, just set width=“100%” for a label component.
Your vbox which contains labels has content-based size, i.e. width=“AUTO”. Set its width to 100% (or fixed size in pixels). Also, you can check typical layout problems by right-clicking on a tab caption and selecting Analyse layout context menu item.
I still need it.
I have a basic edit & lookup screen. Only difference is that I deleted the “split”, and now the lookupBox is under the editBox. I need the fields (which are now in the fieldGroup) to be next to each other. And somewhy my editBox’s actionsPane do not appear (I guess because the layout expand the lookupBox). I attached a photo about current screen.
So the point is, I’ve read the documentation, but still do not know how to break the default fieldGroup. Any tutorial, or help which is not this?