Height and width calculation taken from the container results in back panels affecting the DOM flow

[michaelanfield]

Background

We have a component to capture an address (front) and provide look-up functionality. On supplying look-up details we search for matching addresses. This flips the address to display matching addresses (back). Selecting an address flips you back to the address input (front) with the selected address details populated.

Example markup

<div id="address">
  <div class="front">
    Address capture
  </div>
  <div class="back">
    Address look-up results
  </div>
</div>

Issue

The front is not a fixed height and neither is the back. Based on the background I mocked up results in the back panel and configured flip using the manual trigger.

$( '#address' ).flip( { trigger:'manual' } );

As it stands the output is a container with a height that includes the front and back resulting in a large blank space due to the back now being hidden as shown in the image below.

Analysis

It would appear that the height and width is driven by the element you are performing the flip on (#address in this case). As this has no fixed height or width and the content is not hidden, you get the full height and width of the front and back components.

58  width: $dom.outerWidth(), 
59  height: $dom.outerHeight() 

These values are then also applied to the front and back panels.

69  $dom.find(".front, .back").outerHeight($dom.height()); 
70  $dom.find(".front, .back").outerWidth($dom.width()); 

Suggestion

Shouldn't the height and width be based on the front panel only. The back panel is hidden and it seems reasonable that the UI should only take up the necessary space required by the front panel. I would imagine something like this;

var height = $( '.front', $dom ).outerHeight();
var width = $( '.front', $dom ).outerWidth();

If you agree that this is an issue I more than happy to create a pull request to include the proposed suggestion.

[ben-crowhurst]

+1

[nnattawat]

When I created this plugin, it was made for the content having the same size. I agree with you that the issue that you reported should be fixed. My concern is that I am quire not sure how animation during the flip will look when back and front is not the same size. You are more than welcome to contribute.

Cheers!

[iuliangcata]

With different sizes the flip effect is kind of lost, not entirely, but it does not feel the same. Anyway if you comment the height assign operations, then the front and back child adjusts automatically, but the flip container, while not visible, will still take the whole space.

[nnattawat]

I think this can be fixed. We don't change the size while the content is flipping but once the flip is done then we can adjust the size.

[Download]

Imho, this can now be easily worked around using new options autoSize, forceWidth and forceHeight. The force* options are false by default and if you set autoSize to false as well than Flip won't touch anything and you are free to style the front and back faces any way you want from CSS.

@michaelanfield Please reopen this if you still have issues.