field position change on screen when zooming

Lapointe

Hi @all

When changing zoom (on chrome or edge) from 90% to 100%, fields are moving on screen with no possibility to set their position.

Does somebody know how to ?

Using browsers :
Chrome Version 103.0.5060.114 (Build officiel) (64 bits)
Mozilla Version 102.0.1 (64 bits)

Zoom 90% on all browsers

Zoom 100% on Firefox

** Zoom 100% on Chrome (or edge)**

rf1234

I don't have that problem to be honest. Just tried it with a two column Editor popup in both modes: line by line editing from left to right, and column editing from top to bottom and left to right. Both looked clean with 100% and 90% zoom in Chrome and Firefox!

What are your settings?

I have this for two column modals

a) flexbox for line by line editing from left to right:

    $('.modal-dialog').addClass("modal-xl");
    $('div.DTE_Body div.DTE_Body_Content div.DTE_Field').addClass("two-cols");
    $('div.DTE_Body div.DTE_Form_Content').addClass("flex-box");

b) without flexbox for column editing:

    $('.modal-dialog').addClass("modal-xl");
    $('div.DTE_Body div.DTE_Body_Content div.DTE_Field').addClass("wide-modal");
    $('div.DTE_Body div.DTE_Form_Content').addClass("two-real-cols");

c) CSS:

@media (min-width: 992px) {
  .modal-xl {
    width: 80%;
    max-width:auto;
  }
}

@media (min-width: 992px) {
    .two-cols {
        width: 50%;
        padding: 5px 20px;
        box-sizing: border-box;
    }
}

@media (min-width: 992px) {
    .flex-box{
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (min-width: 992px) {
    .wide-modal {
        margin: 0;
        /*padding: 1em !important;*/
        padding: 5px 20px;
        width: 100%;
        box-sizing: border-box;
    }
}

@media (min-width: 992px) {
    .two-real-cols{
        columns: 2;
    }
}

kthorngren

You may be interested in Allan's answer in this thread. I suspect the answer is still the same.

Kevin

Lapointe

Hi @all

Thanks for answers.

Can you give me your email address so I'll post you a login to a test release...

kthorngren

You can PM Allan, by clicking the Ask a Private Question button, the access information.

Kevin

Lapointe

Thank

I do have allan e-mail for sure. So I do post a couple login to allan

The mail contain link address... connect then go to recettes, click on 'nouvelle' then zoom 90 100 ...

Please let me know if you can help.

Good night

Best regards

Lapointe

ps 2 mails have been sent...

rf1234

Have you tried any of the stuff I posted above? Again: I don't have any issue with zooming with my settings.

Lapointe

Hi Rtf1234.
Do you have a look to my page ? In fact some fields are optional for some users, and not for others, so paging is dynamic. For sample, if a user want to manage product family, product family is left alignet and product right, but if not, product is left...
You did ask me what setting are used...

Thank for your help

rf1234

I can take a look if you like, if you send me a PM with your login credentials.

In fact some fields are optional for some users, and not for others, so paging is dynamic.

I have these things as well. I noticed that if I really remove or add a field from Editor this may cause trouble with my CSS. If I only hide and show the fields dynamically (e.g. on "open" or using "dependent") I have no problems.

allan

ps 2 mails have been sent...

To me? I'm not seeing any?

Allan

Lapointe

Hi @rf1234

as I said, everythink works ok while zoom is less than 100% on chrome and edge, everytime on firefox...
Not sur my css can be reason of this

fields displayed :

            { name: 'recettes.ID_Client', label: GetUsrAlias('clients',true,'Client'),
                type: 'select'
            },
            { name: 'recettes.Prefix', label: 'Exercice',
                " . (($IsAdmin) ? '' : "type:  'readonly',") . "
                className:'align_right_small colRight'
            },
            { name: 'recettes.Date', label: 'Date',
                type: 'datetime',
                def: function () {
                    GetLastDateFac(".$UsrID.", ".$UsrData['Prefix']."); // modifie DateVar
                    return new Date(DateVar.substr(0,10));
                },
                displayFormat: '".$DfmtFac_M."',
                wireFormat: '".$DfmtFac_M."',
                fieldInfo: 'Date de réalisation',
                className:'colLeft',
                keyInput: false
            },
            { name: 'recettes.NumFac', label: GetUsrAlias('recettes',true,'Facture'),
                    " . (($IsAdmin) ? '' : "type:  'readonly',") . "
                className:'align_right_small colRight'
            },
            { name: 'recettes.TypeDoc2', label: 'Type document',
                type: 'checkbox',
                def: 0,
                separator: '|',
                options: [{
                    label: '".$UsrData['TypeDoc2Lib']."',
                    value: 1
                }],
                unselectedValue: 0,
                className:'FullWidth'
            },
            { name: 'prestations.ID_Famille', label: GetUsrAlias('prestations_familles',true,'Famille Prestation'),
                type:  'select',
                def: null
            },
            { name: 'recettes.ID_Prestation', label: GetUsrAlias('prestations',true,'Prestation'),
                type:  'select',
                def: null,
                className:'colRight'
            },
            { name: 'clients.Email', label: 'Adresse mail'
            },
            { name: 'recettes.ID_Situation', label: GetUsrAlias('situations',true,'Situation'),
                type:  'select',
                def: null,
                className:'colRight'
            },

css class used for positionning :

/*
 * Input styles
 */
.align_right input {
  text-align: right;
  margin-right: 1em;
}
.align_right_xxsmall input {
  width: 10%  !important;
  text-align: right;
  margin-right: 1em;
}
.align_right_xsmall input {
  width: 17%  !important;
  text-align: right;
  margin-right: 1em;
}
.align_right_small input {
  width: 25%  !important;
  text-align: right;
  margin-right: 1em;
}
.align_right_33 input {
  width: 33%  !important;
  text-align: right;
  margin-right: 1em;
}
.align_right_medium input {
  width: 50%  !important;
  text-align: right;
  margin-right: 1em;
}
.align_right_big input {
  width: 100%  !important;
  text-align: right;
  margin-right: 1em;
}
.size_xsmall input {
    width: 10%  !important;
}
.size_small input {
    width: 25%  !important;
}
.size_33 input {
    width: 33%  !important;
}
.size_medium input {
    width: 50%  !important;
    }
.size_big input {
    width: 100%  !important;
}
.colLeft {
    float : left !important;
}
.colRight {
    float : right !important;
}
.colNone {
    float : none !important;
}

I do set fields to display using a small function:

    function ShowField(Fld, Show, unDep, bSec){
        if (Fld) {
            var e = (bSec) ? SecEditor : editor;
            Show = (Show || (Show==null));
            if (Show) e.field(Fld).show(false);
            $(e.field(Fld).node()).css('visibility', (Show) ? 'visible' : 'hidden');
            if ( unDep ) {
                e.undependent(Fld);
            }
        }
        return true;
    };

    function SetFieldPos(Fld, Pos, bSec){
        if (Fld) {
            var e = (bSec) ? SecEditor : editor;
            $(e.field(Fld).node()).removeClass('colNone colLeft colRight').addClass(Pos);
        }
        return true;
    };

These functions are called on dependent as :

    ShowField('prestations.ID_Famille', (usrParam.FamillesPrestations == 1) && ! bMulti );
    ShowField('recettes.ID_Prestation', ! bMulti);
    if ( (usrParam.FamillesPrestations != 1) && ! bMulti ){
        SetFieldPos('recettes.ID_Prestation', 'colNone');
    } else {
        SetFieldPos('recettes.ID_Prestation', 'colRight');
    }

Lapointe

hi again

Doing explanation I see I can do better to preserve line height on react at dependent :

    ShowField('recettes.ID_Prestation', ! bMulti);
    if ( (usrParam.FamillesPrestations != 1) && ! bMulti ){
        ShowField('prestations.ID_Famille', false);
        SetFieldPos('recettes.ID_Prestation', 'colLeft');
        SetFieldPos('prestations.ID_Famille', 'colRight');
    } else {
        ShowField('prestations.ID_Famille');
        SetFieldPos('prestations.ID_Famille', 'colLeft');
        SetFieldPos('recettes.ID_Prestation', 'colRight');
    }

so line height is not different while displaying or not prestations.ID_Famille

But ZOOM 100% move fields

Lapointe

Other css used in form:

<style>
    div.DTED_Lightbox_Wrapper {
        width: 60%;
        min-width: 600px;
        margin-left: -500px;
    }

    div.DTE_Body div.DTE_Body_Content div.DTE_Field {
        float: left;
        max-width: 50%;
        width: 50%;
        padding: 5px 20px;
        clear: none;
        box-sizing: border-box;
    }

    div.DTE_Body div.DTE_Form_Content:after {
        content: ' ';
        display: block;
        clear: both;
    }
    .FullWidth{
        float: left !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    div.FullWidth>label{
        float: left  !important;
        width: 18%  !important;
        max-width: 18% !important;
    }
    .FullWidth .DTE_Field_Input{
        width: 81% !important;
        float: right !important;
        max-width: 81% !important;
    }
</style>

allan

Hi,

I've just tried it on your site with Firefox 101 and it looks okay:

90%

and switching to 100%

Browser zoom is always exceptionally difficult to deal with since we have no control over it in CSS. I suspect you'll need to experiment with the widths a little if this is important for your use case. Width 49% for example might be worth a try.

Allan

Lapointe

Hi @allan
Thanks for that

I know firefox is OK.
Chrome and edge are not.

I did already try width to 49% (or less), the problem stay...

I don't understand why ...

Lapointe

PS... your screenshot is strange.

Using firefox 102 I get email left aligned (as expected)

Another strange effect... I'll go to create salad and carotts and other vegetables... they are more easy to understant