Skip to content
This repository has been archived by the owner on Feb 28, 2020. It is now read-only.

Toggle positioned incorrectly when programmatically changing a hidden candlestick element #17

Open
jcohen02 opened this issue Oct 25, 2017 · 1 comment
Open

Toggle positioned incorrectly when programmatically changing a hidden candlestick element #17

jcohen02 opened this issue Oct 25, 2017 · 1 comment

Comments

@jcohen02
Copy link

After making a programmatic change to a hidden candlestick element, the toggle seems to be incorrectly positioned when the candlestick element is made visible.

This seems to affect the on and default settings, off seems ok. When setting the hidden candlestick to on, the toggle ends up just outside the background to the far left of the element. When setting to default, the toggle ends up in a similar position, just to the left of where it would normally be in the off position.

Steps to reproduce: Given the following basic test case:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Load font awesome and candlestick CSS -->
    <link rel="stylesheet" href="/...css_path.../font-awesome.min.css">
    <link rel="stylesheet" href="/...css_path.../candlestick.min.css">
  </head>
  
  <body>
    <div id="candlestick-div" style="padding: 30px 30px;">
      <form>
        <input id="candlestick1" class="js-candlestick" type="checkbox" name="candlestick" value="">
      </form>
    </div>

    <!-- ... load jQuery and Candlestick libs ... -->
    <script src="/...js_path.../jquery.min.js"></script>
    <script src="/...js_path.../candlestick.js"></script>

    <script type="text/javascript">
      $(document).ready( function() {
        $('#candlestick1').candlestick({
                swipe:false, 
                size: 'sm',
                allowManualDefault: true,
        });
      });
    </script>
  </body>
</html>

Running the following (in the browser console) will demonstrate the issue:

$('#candlestick-div').hide();
$('#candlestick1').candlestick('on');
$('#candlestick-div').show();

If $('#candlestick1').candlestick('on') or $('#candlestick1').candlestick('default') is called again once the element is visible, the toggle returns to the correct position for the specified setting.

Thanks.
@jcohen02
Copy link
Author

It looks like the cause of this issue is the change to theouterWidth of the div.candlestick-bg when the candlestick is hidden, resulting in the calculated position of the toggle being incorrect.

Had a go at implementing a simple fix based on the approaches discussed at https://stackoverflow.com/questions/1472303/jquery-get-width-of-element-when-not-visible-display-none and https://forum.jquery.com/topic/best-approach-to-get-hidden-element-dimension-width-height-etc.

Maybe there's a better approach but I've added a function that calculates the outerWidth of a hidden div.candlestick-bg element:

    /**
     * Get the element bg width for a candlestick element that may be hidden
     * 
     * @param $candlestickBg a jquery object for a div.candlestick-bg element
     */
    function _getBgWidth($candlestickBg) {
    	// If the node is already visible, return the outerWidth
    	if($candlestickBg.is(':visible')) {
    		return $candlestickBg.outerWidth();
    	}
    	
    	// If the node is hidden, its necessary to clone the element and 
    	// add the clone to the DOM with visibility: hidden set to get the 
    	// actual element width when its not visible.
    	var $clonedEl = $candlestickBg.parent().clone().css('visibility', 'hidden');
    	$('body').append($clonedEl);
    	var outerWidth = $clonedEl.find('.candlestick-bg').outerWidth();
    	return outerWidth;
    	
    }

This is then called as _getBgWidth(this.parent) in place of this.parent.outerWidth() at:

candlestick/lib/js/candlestick.js

Line 343 in da853a5

left = this.parent.outerWidth() - this.parent.find('.candlestick-toggle').outerWidth();

and

candlestick/lib/js/candlestick.js

Line 392 in da853a5

var candlestickBgWidth = this.parent.outerWidth();

This seems to solve the problem for my use case. If this is a sufficiently general issue to warrant a fix and the approach described above seems reasonable, I can raise a PR.

jcohen02 added a commit to jcohen02/candlestick that referenced this issue Oct 25, 2017
@jcohen02
Fix for issue EdouardTack#17 addresses incorrect display of toggle af…
48437f1 
…ter changing programmatically when hidden.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jcohen02