Connector miscalculated position when using Bootstrap modals

kpagcha commented 7 years ago

I tried loading a bracket in the mody of a Bootstrap modal and I noticed for some reason the position of the connectors was miscalculated. Is this a bug?

captura

teijo commented 7 years ago

The styles look different at least. Could be that there's some conflicting CSS that breaks the calculations.

Does it work properly when not in a modal?

kpagcha commented 7 years ago

The styles just modify color and font, not size nor position. And yeah, it works perfectly when not in a modal, that's why I'm posting the issue.

Also, it's worth to mention this only happens when loading the brackets using this plugin, however, if I load the brackets in the other non-modal place I am talking about where it does look ok and then load it on the modal through jQuery, it looks good, except the highlighting stops working and I am guessing the rest of JS-related features.

teijo commented 7 years ago

not size nor position

At least the boxes are rounded in your screenshot and there is a gap on left between the connector and the match box. However, if it looks the same on the working case, apart from the vertical misalignment, then it might not be a problem.

Maybe you can compare the calculated values of the styles with browser dev tools in order to check that the modal doesn't add something?

Can you set up a demo where this occurs? Hard to determine otherwise if it's the library that needs a fix 😅

kpagcha commented 7 years ago

I can't show you a demo because the plugin isn't published on CDNs so I can't link it in jsfiddle and similar sites.

kpagcha commented 7 years ago

But you can try the following code yourself locally and see how the connectors are mispositioned:

<!DOCTYPE html>
<html>
<head>
    <title>Bracket</title>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery.bracket.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="jquery.bracket.min.css">
</head>
<body>
    <div id="bracket"></div>
    <button data-toggle="modal" data-target="#bracket-modal">Show modal</button>

    <div id="bracket-modal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body" style="background-color: #052e58"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {

            var data = {
                "teams": [
                    ["Team 1", "Team 2"], ["Team 3", "Team 4"], ["Team 5", "Team 6"], ["Team 7", "Team 8"]
                ],
                "results": [
                    [[0, 2], [1, 3], [4, 2], [2, 0]], 
                    [[2, 0], [1, 0]],
                    [[0, 1]]
                ]
            }

            $('#bracket').bracket({
                init: data,
                skipConsolationRound: true
            });

            $('#bracket-modal .modal-body').bracket({
                init: data,
                skipConsolationRound: true
            });

            $('#bracket-modal .jQBracket').height($('#bracket-modal .jQBracket .bracket').height() + 50);
        });
    </script>
</body>
</html>

acamilleri commented 7 years ago

Hello,

I have same problem

kpagcha commented 7 years ago

@krysennn and are you using a Bootstrap modal or are you not?

acamilleri commented 7 years ago

@kpagcha I using tabs of bootstrap.

But with other project i using tabs of semantic ui and i have no problem.

teijo commented 7 years ago

Tested @kpagcha with your snippet and saw the problem.

The problem is that some of the size calculations are performed based on the rendering of the page (i.e. the code calls for .height() or .width()). However the bracket is initialized into an invisible modal window in your example. In this case the browser doesn't calculate the needed sizes as user cannot see the content.

If you want to get it to function as it is now, you must initialize bracket into a visible container, i.e.

showModal(function() {
   /*modal is now visible...*/
   $('#modalContainer').bracket();
})

You can see what I mean by using this delayed initialization in the snippet:

Just be sure to click the modal button before 5 seconds has elapsed.

    setTimeout(function() {
      $('#bracket-modal .modal-body').bracket({
        init: data,
        skipConsolationRound: true
      });
    }, 5000)

kpagcha commented 7 years ago

So is there any way to fix this? I tried forcing the modal's height on show to a previously rendered bracket's height but the connectors were still off.

teijo commented 7 years ago

The fix is to initialize bracket after container is rendered on your web page. Alternatively the library could maybe be improved so that calculations wouldn't be based on relative sizes.

kpagcha commented 7 years ago

What do you mean after the container is rendered? I am showing the modal and then initializing.

sokai commented 3 years ago

@kpagcha Here is my solution:

$( document ).ready( function() {
    /* ref: https://getbootstrap.com/docs/4.0/components/modal/#events + https://github.com/teijo/jquery-bracket/issues/91#issuecomment-271571329 */
    $( '#modalBrackets' ).on( 'shown.bs.modal', function() {
        $( '#brackets' ).bracket( {
            teamWidth: 135,
            skipSecondaryFinal: true,
            init: resultData
        } );
    } );
} );

teijo / jquery-bracket

Connector miscalculated position when using Bootstrap modals #91