#654 bug
RonanKER

clonePosition imperfection

Reported by RonanKER | April 21st, 2009 @ 11:54 AM

I don't know exactly what the problem is, but i post the code i did to have a correct positionning of a DIV inside a table cell on all browsers. May this help you improve Prototype...

my table has about the folowing style (not all cells have same style, here i show the resulting css for my target cell by firebug inspection) (the table is inside a 98% width DIV that is inside a position-absolute DIV with javascript refresh when window resizes... don't know if that changes anything about the issue...)

@@@css .mytable { border-collapse: collapse; border:1px solid #55AAD7; empty-cells:hide; margin:0; padding:0; } .mytd { padding:0 2px 0 0 !important; text-align:right !important; width:67px !important; border:1px solid #55AAD7; empty-cells:show; margin:0; border-collapse:collapse; }



my javascript corrected function is:

@@@javascript
MM.positionnerDivSurCellule = function(editDiv,cell) {
	//Correction position en fonction du navigateur (prototype n'est pas parfait)
	//Note: firefox par défaut car il est compliqué à détecter.
	var correctionOffsetTop = 0;
	var correctionOffsetLeft = 0;
	var correctionLargeur = 0;
	var appli = navigator.appName;
    var version = navigator.appVersion;
    if (appli.indexOf('Microsoft')!=-1){
    	//sous IE la position horizontal est imparfaite en fonction de la largeur de la fenetre (probleme de calcul d'arrondi incohérent sans doute)
    	//du coup on augmente l'offsetLeft d'1px et on reduit la largeur de la cellule d'1px pour etre sur de rester dans la cellule sans mordre les bordures.
    	if (version.indexOf('MSIE 6')!=-1){
	    	correctionOffsetTop=1;
	    	correctionOffsetLeft=2;//1
	    	correctionLargeur=1;
    	}else if (version.indexOf('MSIE 7')!=-1){
	    	correctionOffsetTop=0;
	    	correctionOffsetLeft=2;//1
	    	correctionLargeur=1;
    	}else if (version.indexOf('MSIE 8')!=-1){
    		correctionOffsetTop=0;
    		correctionOffsetLeft=1;//0
    		correctionLargeur=1;
    		editDiv.show();//on commence par show sinon IE8 positionne mal l'objet
		}
	}else if (version.indexOf('Safari')!=-1
			|| version.indexOf('Chrome')!=-1
			|| appli.indexOf('Opera')!=-1) {
		correctionOffsetTop=1;
		correctionOffsetLeft=1;
	}
	
	//on prend la forme de la cellule 
	editDiv.clonePosition(cell, {offsetLeft:correctionOffsetLeft, offsetTop:correctionOffsetTop});
	
	//Correction taille de la div (pour ne pas masquer les bordures):
	var dimensions = editDiv.getDimensions();
	editDiv.setStyle({'width':(dimensions.width - correctionLargeur - 1)+'px', 'height':(dimensions.height - 1)+'px'});
}

in the comments i explain that on IE i had an issue : the position had sometimes 1px error on the horizontal position and sometimes 1px error on the width depending on the cell column (I have 7 columns of this type in about the center of the table) and depending on the browser width... sometimes the cell was over the left border, sometimes on the right border, and sometimes ok...

Comments and changes to this ticket

  • RonanKER

    RonanKER April 21st, 2009 @ 05:50 PM

    sorry for the incorrect use of the "@@@" tag, can't find how to edit the post to correct this...

    I've just found that on FireFox, i also have the issue where depending on the window size and cell position, the width is incorrect...

    there is in my table 7 columns with identical configuration + 2 columns on the left + 3 columns on the right. those 7 columns should be exactly the same width but sometime, probably when dividing space alocated for them by 7 isn't an integer, the browser then shoose to give to one or more columns 1px less. But the Width function return the same value for all columns, so the issue is perhaps not possible to solve... (or too complex, for example looking at position of the next cell minus the border size...)

  • RonanKER

    RonanKER April 22nd, 2009 @ 12:12 PM

    I changed my function that wasn't perfect (and probably still isn't)

    
    MM.positionnerDivSurCellule = function(editDiv,cell) {
    	//Correction position en fonction du navigateur (prototype n'est pas parfait)
    	//Note: firefox par défaut car il est compliqué à détecter.
    	var correctionOffsetTop = 0;
    	var correctionOffsetLeft = 0;
    	var correctionLargeur = 0;
    	var appli = navigator.appName;
        var version = navigator.appVersion;
        if (appli.indexOf('Microsoft')!=-1){
        	//sous IE la position horizontal est imparfaite en fonction de la largeur de la fenetre (probleme de calcul d'arrondi incohérent sans doute)
        	//du coup on augmente l'offsetLeft d'1px et on reduit la largeur de la cellule d'1px pour etre sur de rester dans la cellule sans mordre les bordures.
        	if (version.indexOf('MSIE 6')!=-1){
    	    	correctionOffsetTop=1;
    	    	correctionOffsetLeft=2;//1
    	    	correctionLargeur=1;
        	}else {
        		correctionOffsetTop=0;
    	    	if (version.indexOf('Trident')!=-1){
    	    		//attention à tester IE8 avec "Trident" et avant IE7...
    	    		correctionOffsetLeft=1;//0
    	    		correctionLargeur=1;
    	    		editDiv.show();//on commence par show sinon IE8 positionne mal l'objet
    			}else if (version.indexOf('MSIE 7')!=-1){
    				//testé sous IE8 32b émulant IE7 -> pire du pire...
    				//TODO voir pour un vrai IE7 et comment différencier si besoin.
    		    	correctionOffsetLeft=2;//0 ou 1 ???
    		    	correctionLargeur=2;
    	    	}
    	    	//correctif version 64bit (j'adore microsoft !)
    	    	if (version.indexOf('Win64')!=-1){
    	    		correctionOffsetTop=1;
    	    		correctionLargeur=1;
    	    	}
    	    }
    	}else if (version.indexOf('Safari')!=-1
    			|| appli.indexOf('Opera')!=-1
    			|| version.indexOf('Chrome')!=-1) {//sous chrome normalement on a déjà réagit à "Safari"
    		correctionOffsetTop=1;
    		correctionOffsetLeft=1;
    	}
    	
    	//on prend la forme de la cellule 
    	editDiv.clonePosition(cell, {offsetLeft:correctionOffsetLeft, offsetTop:correctionOffsetTop});
    	
    	//Correction taille de la div (pour ne pas masquer les bordures):
    	var dimensions = editDiv.getDimensions();
    	editDiv.setStyle({'width':(dimensions.width - correctionLargeur - 1)+'px', 'height':(dimensions.height - 1)+'px'});
    }
    
  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:23 AM

    • Tag cleared.

    [not-tagged:"1.6.0.3" bulk edit command]

  • T.J. Crowder

    T.J. Crowder November 16th, 2009 @ 04:50 PM

    [responsible:none bulk edit command]

  • Tobie Langel

    Tobie Langel March 1st, 2010 @ 12:44 AM

    • State changed from “new” to “bug”
    • Tag set to section:dom
  • Jason Westbrook

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The Prototype JavaScript library.

Shared Ticket Bins

People watching this ticket

Pages