jquery-bracket
jquery-bracket copied to clipboard
teijo
Connector miscalculated position when using Bootstrap modals
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?
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?
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.
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 😅
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.
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>
@kpagcha I using tabs of bootstrap.
But with other project i using tabs of semantic ui and i have no problem.
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)
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.
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.
What do you mean after the container is rendered? I am showing the modal and then initializing.
@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
} );
} );
} );
