Table moved to the right in modal dialogue

Support
#1

Hello, I attached an image capture where the related table “Employees” is displayed, it is a modal dialogue with height and with AUTO, as you can see the table is moved to the right with respect to the buttons, why this behavior ?. Cuba studio 10 and platform 7.0.6
Thanks and regards.question1-cuba

#2

Hi,
Please attach the screen XML.

#3

Hi, sorry for delay:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<window xmlns="http://schemas.haulmont.com/cuba/screen/window.xsd" caption="msg://editorCaption" focusComponent="form" messagesPack="com.albertosancheznieto.atia.web.screens.organizacion">
    <data>
        <instance id="organizacionDc" class="com.albertosancheznieto.atia.entity.Organizacion" view="organizacion-with-idPadre-empleados-view">
            <loader />
            <collection id="empleadosDc" property="empleados" />
        </instance>
    </data>
    <dialogMode height="AUTO" width="AUTO" modal="true" forceDialog="true" resizable="true" />
    <layout expand="scrollBox" spacing="true">
        <scrollBox id="scrollBox" spacing="true">
            <form id="form" dataContainer="organizacionDc" width="100%">
                <column width="250px">
                    <textField id="descripcionField" property="descripcion" />
                    <textArea id="direccionField" property="direccion" rows="5" />
                    <textField id="localidadField" property="localidad" />
                    <textField id="provinciaField" property="provincia" />
                    <textField id="codigoPostalField" property="codigoPostal" />
                    <textField id="telefonoField" property="telefono" />
                    <textField id="faxField" property="fax" />
                    <textField id="extMovilField" property="extMovil" />
                    <pickerField id="idPadreField" property="idPadre">
                        <actions>
                            <action id="lookup" type="picker_lookup" />
                            <action id="open" type="picker_open" />
                            <action id="clear" type="picker_clear" />
                        </actions>
                    </pickerField>
                    <textField id="codigoGestionField" property="codigoGestion" />
                    <textField id="codigoContabilidadField" property="codigoContabilidad" />
                    <textField id="codigoRecursosHumanosField" property="codigoRecursosHumanos" />
                </column>
            </form>
            <groupBox id="empleadosBox" caption="msg://com.albertosancheznieto.atia.entity/Organizacion.empleados">
                <table id="empleadosTable" dataContainer="empleadosDc" width="100%" height="200px">
                    <actions>
                        <action id="add" type="add" />
                        <action id="exclude" type="exclude" />
                    </actions>
                    <columns>
                        <column id="usuarioLogin" />
                        <column id="categoriasProfesionales" />
                    </columns>
                    <buttonsPanel>
                        <button action="empleadosTable.add" />
                        <button action="empleadosTable.exclude" />
                    </buttonsPanel>
                </table>
            </groupBox>
        </scrollBox>
        <hbox id="editActions" spacing="true">
            <button action="windowCommitAndClose" />
            <button action="windowClose" />
        </hbox>
    </layout>
</window>
#5

Hi.
Thank you for reporting the problem. We have created a GitHub issue.

#7

The issue is caused by incorret XML layout.

image

In your case, you have to define the dialog width (e.g. 500px), because the table has width="100%". Also, the ScrollBox element is redundant.

The correct XML layout looks as follows:

<dialogMode height="AUTO"
            width="500px"
            modal="true"
            forceDialog="true"
            resizable="true"/>
<layout spacing="true">
    <form id="form" dataContainer="organizationDc">
        <column width="250px">
            <textField id="descriptionField" property="description"/>
            <textArea id="direccionField" property="direccion" rows="5"/>
            <textField id="localidadField" property="localidad"/>
            <textField id="provinciaField" property="provincia"/>
            <textField id="codigoPostalField" property="codigoPostal"/>
            <textField id="telefonoField" property="telefono"/>
            <textField id="faxField" property="fax"/>
            <textField id="extMovilField" property="extMovil"/>
            <lookupField id="idPadreField" property="idPadre"/>
            <textField id="codigoGestionField" property="codigoGestion"/>
            <textField id="codigoContabilidadField" property="codigoContabilidad"/>
            <textField id="codigoRecursosHumanosField" property="codigoRecursosHumanos"/>
        </column>
    </form>
    <groupBox id="empleadosBox" caption="Employees">
        <table id="empleadosTable" dataContainer="empleadosDc" width="100%" height="200px">
            <actions>
                <action id="add" type="add"/>
                <action id="exclude" type="exclude"/>
            </actions>
            <columns>
                <column id="usuarioLogin"/>
                <column id="categoriasProfesionales"/>
            </columns>
            <buttonsPanel>
                <button action="empleadosTable.add"/>
                <button action="empleadosTable.exclude"/>
            </buttonsPanel>
        </table>
    </groupBox>
    <hbox id="editActions" spacing="true">
        <button action="windowCommitAndClose"/>
        <button action="windowClose"/>
    </hbox>
</layout>

And the result:

image

image

image

Regards,
Gleb