search

teijo / jquery-bracket

jQuery Bracket library for organizing single and double elimination tournaments
http://aropupu.fi/bracket/
MIT License
481 stars 255 forks source link

Connectors calculations on hidden container #171

Closed shkup closed 4 years ago

shkup commented 4 years ago

When the control is hosted in a bootstrap tab, some of the connectors are not calculated correctly. Only after editing a game result the connectors are calculated correctly.

Steps to reproduce

  1. Enter the example
  2. Click on the tab header. Notice the last connector at the bottom.
  3. Edit the first game result and leave the bracket

Expected results:

  1. All the connectors should be positioned in the right place from the start
  2. The control should be in the same position after editing a result

Actual result

  1. Some of the connectors are not placed correctly
  2. After editing, the connectors positions are calculated correctly but the control position itself is changing.
teijo commented 4 years ago

The issue is likely that the library cannot calculate the positions when the target element is hidden. You may need to reorganize your code so that after the container is made visible, $('#tournament').bracket() is called. Now it's called when the page has loaded.

shkup commented 4 years ago

You are right of course! I've edited the example to execute bracket on tab change and it works like a charm!

teijo commented 4 years ago

Awesome!