field position change on screen when zooming

field position change on screen when zooming

LapointeLapointe Posts: 430Questions: 81Answers: 4

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)**

Replies

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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;
        }
    }
    
  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @all

    Thanks for answers.

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited July 2022

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

    Kevin

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    ps 2 mails have been sent...

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited July 2022

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    ps 2 mails have been sent...

    To me? I'm not seeing any?

    Allan

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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');
        }
    
    
  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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>
    
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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 ...

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    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 :D

Sign In or Register to comment.