(css)Layout Design questions

C.Carol · July 3, 2017, 10:40am

Hi,

I have a few question about change the layout.

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.

Thanks for your help.

articleOnEditScreen

gorelov · July 3, 2017, 2:00pm

Hi,

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.

Regards,
Gleb

C.Carol · July 4, 2017, 8:58am

Hi Gleb,

I use your entity browser, editor template via Studio. And I have put the labels via Studio.
Here is my code:




	<dsContext>
        <datasource[...]/>
        <groupDatasource [...]>
            <query>
                <![....]]>
            </query>
        </groupDatasource>
        <collectionDatasource [....]>
            <query>
                <![....]]>
            </query>
        </collectionDatasource>
    </dsContext>
    <actions>
        <action id="save"
                caption="mainMsg://actions.Ok"
                icon="icons/ok.png"
                invoke="save"
                shortcut="CTRL-ENTER"/>
        <action id="cancel"
                caption="mainMsg://actions.Cancel"
                icon="icons/cancel.png"
                invoke="cancel"/>
    </actions>
    <dialogMode height="600"
                width="800"/>
    <layout>
        <split id="split"
               height="100%"
               orientation="horizontal"
               reversePosition="true"
               width="100%">

			<vbox id="lookupBox"
                  expand="customersTable"
                  height="100%"
                  margin="false,true,false,false"
                  spacing="true">
                <filter id="filter"
                        applyTo="customersTable"
                        datasource="customersDs">
                    <properties include=".*"/>
                </filter>
                <groupTable id="cutomersTable"
                    [.....]
                </groupTable>
            </vbox>
			<vbox id="editBox"
                  expand="fieldGroupBox"
                  height="100%"
                  margin="false,false,false,true"
                  spacing="true">
                <vbox id="fieldGroupBox">
                    <fieldGroup id="fieldGroup"
                                datasource="customersDs"
                                width="100%">
                        <column width="250px">
                            <field id="customerType"/>
                            <field id="customerCategory"/>
                        </column>
                    </fieldGroup>
                    <label id="header"
                           stylename="noteHeader"
                           value="msg://testHeader"/>
                    <label id="subHeader"
                           stylename="subHeader"
                           value="msg://testHeader"/>
                    <label id="content"
                           htmlEnabled="true"
                           value="msg://testValue"/>
                </vbox>
                <hbox id="actionsPane"
                      spacing="true"
                      visible="false">
                    <button id="saveBtn"
                            action="save"/>
                    <button id="cancelBtn"
                            action="cancel"/>
                </hbox>
            </vbox>
		</split>
    </layout>

I do not know why standard template doesn’t fit my needs. You can see the posted attached photo how it looks.
There are another template somewhere for the cssLayout?

gorelov · July 4, 2017, 10:07am

Hi,
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.
Regards,
Gleb

C.Carol · July 4, 2017, 10:52am

Hi,

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.

articleOnEditScreen2

gorelov · July 4, 2017, 10:59am

fieldGroupBox is extended, i.e., it occupies the maximum available space. Set value of the expand attribute of the editBox container to the id of the container with labels.

C.Carol · July 5, 2017, 7:29am

Thank Gelb your patience.

One more question: My text is still overflow my container. Should I set my container a width?

Thanks.

gorelov · July 5, 2017, 8:03am

Hi,

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.

Regards,
Gleb

C.Carol · July 5, 2017, 11:59am

Unfortunately, my label width was 100%.
Sorry for my involution!
XML:

				<groupBox id="articleLabels"
                          spacing="true">
                    <vbox expand="content"
                          spacing="true"
                          width="AUTO">
                        <label id="header"
                               stylename="articleHeader"
                               value="msg://Article8"/>
                        <label id="subHeader"
                               stylename="subHeader"
                               value="msg://Article8SubHeader="/>
                        <label id="content"
                               htmlEnabled="true"
                               value="msg://Article8Content="
                               width="100%"/>
                        <link id="seeMore"
                              caption="msg://seeMore"
                              icon="icons/question-white.png"
                              target="_blank"
                              url="#"/>
                    </vbox>
                </groupBox>

articleOnEditScreen3

gorelov · July 5, 2017, 12:15pm

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.
Regards,
Gleb

C.Carol · July 6, 2017, 1:14pm

Thank Gleb your answers they are fine, and works.

Could you or anyone help me how to change my fieldGroup into cssLayout based, like in the documentation? If I change the ‘field’ into ‘textField’, it is disappears. Any tutorial, help?

C.Carol · September 26, 2017, 1:06pm

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?

Thanks

screen