Trying to set a div to auto in Firefox

Question

I have a div that dynamically scales based on the viewport size.

function zoomSquare() {
    var $square = $('.square');

    var viewportWidth = $square.parent().width();
    var squareWidth = $square.width();
    var desiredWidth = Math.round(viewportWidth * 0.95);
    var zoom = (desiredWidth / squareWidth);

    $square.css('zoom', zoom);
    $square.css('-moz-transform', 'scale(' + zoom + ')');
    $square.css(  '-o-transform', 'scale(' + zoom + ')');
}

// When the browser is resized
$(window).on('resize', function(){ zoomSquare(); });

// When the page first loads
$(document).ready(function(){
    zoomSquare();
});

http://jsfiddle.net/sarahwhatsup/YDwds/8/

I want have the parent set to auto to as the div scales, the divs underneath adjust their position. This works in Chrome, IE, Safari but for some reason I can't get this to work in Firefox. Anyone have any idea?

Related of http://stackoverflow.com/q/6347725/1577396. (It seems a bug in firefox). — Mr_Green, Apr 02 '13 at 06:06

abney317 · Answer 1 · 2013-04-03T02:51:16.947

1

You could change the height of the wrapper div.

$('.wrapper').css('height', squareWidth * zoom);

http://jsfiddle.net/YDwds/22/

edited Apr 03 '13 at 02:51

answered Apr 02 '13 at 05:49

abney317

7,760
6
32
56

Ah the reason for using scale is I want any children div inside to resize with the parent – user1519225 Apr 02 '13 at 13:58
I think I understand what you're wanting. Updated answer. – abney317 Apr 03 '13 at 02:51

Trying to set a div to auto in Firefox

1 Answers1