Hey everybody,
I encountered an interesting problem today. Here is what I have:
I used the prototype function "Position.clone(src, target)" which
actually copies the top, left, offsetWidth and offsetHeight from the src
to the target.
interestingly, my src-object had a css-styled border of 1px, and a total
offsetWidth of 320px. my target-object had the same properties, but once
I did the position-clone function, my target-object had a 322px width,
because the width AND the border (1px on each side) was added.
alert("src " + src.offsetWidth); // returns 320
Position.clone(src, target);
alert("target " + target.offsetWidth); // returns 322
Once I removed the border, both had the 320px width.
I run Firefox 1.5 with the webdeveloper-toolbar, and once I set the
browser to use the "Border Box Model" it worked out well.
So, basically, would it make more sense to rather take the style.width
than the offsetWidth?
I changed the lines 1713f in prototype.js to:
if(options.setWidth) target.style.width = source.style.width;
if(options.setHeight) target.style.height = source.style.height;
and it worked for me (without the border box model).
So, what do you think, is this a bug or is this just an "option"?
--
greetings,
benni.
-SDG-
target.style.width won''t work unless you have a width property in your CSS. If you just want it to determine the rendered width on a non-fixed-width item, it will be blank. Firefox does strange things in calculating widths, though, ''cause it adds padding and borders sometimes. Like, for instance, I had a class that had: width: 200px; padding: 5px; And in Firefox, the element was 210px wide. Opera and IE rendered it 200px wide, as it should be. Apparently, width in Firefox is width before adding padding and borders (as demonstrated by the extra 2px in your example). Maybe that''s the w3c recommendation, but it''s stupid. If I say make it 200px wide and have 5px of padding, it should do just that, with the remaining 190px used for content. Who measures boxes on the inside? Sorry for the rant, you just reminded me about something that annoys me to a great extent. Greg> -----Original Message----- > From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org[mailto:rails-spinoffs-> bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of Benjamin Mack > Sent: Friday, January 06, 2006 12:29 PM > To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > Subject: [Rails-spinoffs] Protoype problem > > Hey everybody, > > I encountered an interesting problem today. Here is what I have: > > I used the prototype function "Position.clone(src, target)" which > actually copies the top, left, offsetWidth and offsetHeight from thesrc> to the target. > interestingly, my src-object had a css-styled border of 1px, and atotal> offsetWidth of 320px. my target-object had the same properties, butonce> I did the position-clone function, my target-object had a 322px width, > because the width AND the border (1px on each side) was added. > > alert("src " + src.offsetWidth); // returns 320 > Position.clone(src, target); > alert("target " + target.offsetWidth); // returns 322 > > Once I removed the border, both had the 320px width. > I run Firefox 1.5 with the webdeveloper-toolbar, and once I set the > browser to use the "Border Box Model" it worked out well. > > So, basically, would it make more sense to rather take the style.width > than the offsetWidth? > > I changed the lines 1713f in prototype.js to: > > if(options.setWidth) target.style.width = source.style.width; > if(options.setHeight) target.style.height = source.style.height; > > and it worked for me (without the border box model). > > So, what do you think, is this a bug or is this just an "option"? > > -- > greetings, > benni. > -SDG- > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Heya, Currently Position.clone (and some other stuff) doesn''t support to be used on elements that have paddings or borders set. You can easily work around this by just wrapping your element for example in a <DIV> that doesn''t have this and use Position.clone on that wrapper. width/height are not always available (and are not always in "px" units), so they''re not really useable here. There are other problems with rendering models (see the answer from Gregory Hill for more on that), and browsers not supporting them equally, and not in all modes (quirks mode vs. standards-based mode). It''s planned for future releases though, so just use the workaround for the time being. :) -Thomas Am 06.01.2006 um 20:28 schrieb Benjamin Mack:> Hey everybody, > > I encountered an interesting problem today. Here is what I have: > > I used the prototype function "Position.clone(src, target)" which > actually copies the top, left, offsetWidth and offsetHeight from > the src to the target. > interestingly, my src-object had a css-styled border of 1px, and a > total offsetWidth of 320px. my target-object had the same > properties, but once I did the position-clone function, my target- > object had a 322px width, because the width AND the border (1px on > each side) was added. > > alert("src " + src.offsetWidth); // returns 320 > Position.clone(src, target); > alert("target " + target.offsetWidth); // returns 322 > > Once I removed the border, both had the 320px width. > I run Firefox 1.5 with the webdeveloper-toolbar, and once I set the > browser to use the "Border Box Model" it worked out well. > > So, basically, would it make more sense to rather take the > style.width than the offsetWidth? > > I changed the lines 1713f in prototype.js to: > > if(options.setWidth) target.style.width = source.style.width; > if(options.setHeight) target.style.height = source.style.height; > > and it worked for me (without the border box model). > > So, what do you think, is this a bug or is this just an "option"? > > -- > greetings, > benni. > -SDG- > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Hey Thomas (and Greg), thanks for your answers. Basically I just wanted to point this out, and it''s especially nice to hear that you consider "fixing" this in future versions! greetings, benni. -SDG- Thomas Fuchs wrote:> Heya, > > Currently Position.clone (and some other stuff) doesn''t support to be > used on elements that have paddings or borders set. > You can easily work around this by just wrapping your element for > example in a <DIV> that doesn''t have this and > use Position.clone on that wrapper. > > width/height are not always available (and are not always in "px" > units), so they''re not really useable here. > There are other problems with rendering models (see the answer from > Gregory Hill for more on that), and > browsers not supporting them equally, and not in all modes (quirks mode > vs. standards-based mode). > > It''s planned for future releases though, so just use the workaround for > the time being. :) > > -Thomas > > Am 06.01.2006 um 20:28 schrieb Benjamin Mack: > >> Hey everybody, >> >> I encountered an interesting problem today. Here is what I have: >> >> I used the prototype function "Position.clone(src, target)" which >> actually copies the top, left, offsetWidth and offsetHeight from the >> src to the target. >> interestingly, my src-object had a css-styled border of 1px, and a >> total offsetWidth of 320px. my target-object had the same properties, >> but once I did the position-clone function, my target- object had a >> 322px width, because the width AND the border (1px on each side) was >> added. >> >> alert("src " + src.offsetWidth); // returns 320 >> Position.clone(src, target); >> alert("target " + target.offsetWidth); // returns 322 >> >> Once I removed the border, both had the 320px width. >> I run Firefox 1.5 with the webdeveloper-toolbar, and once I set the >> browser to use the "Border Box Model" it worked out well. >> >> So, basically, would it make more sense to rather take the >> style.width than the offsetWidth? >> >> I changed the lines 1713f in prototype.js to: >> >> if(options.setWidth) target.style.width = source.style.width; >> if(options.setHeight) target.style.height = source.style.height; >> >> and it worked for me (without the border box model). >> >> So, what do you think, is this a bug or is this just an "option"? >> >> -- >> greetings, >> benni. >> -SDG- >> _______________________________________________ >> Rails-spinoffs mailing list >> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >