When creating a play-off tournament bracket, I face the challenge of adjusting for varying numbers of participants in each round. Typically, there are 2^n participants in each tour: 16, 8, 4, 2 which can be easily accommodated in a flex column layout. However, I encounter difficulty when the participant count falls between 16 and 8 in the first round. In such cases, I require invisible placeholders in the bracket for proper adjustment.
I attempted to make these invisible duels by using {visibility: hidden}, which works on the screen but surprisingly partially appears when printed. Why does this occur?
This is how it appears on the screen (as intended):
https://i.stack.imgur.com/F330b.png
And this is how it looks when printed (using ctrl+P):
https://i.stack.imgur.com/LTFJ8.png
Below is the provided code snippet:
import React from 'react'
...
...
export default DuelSimpleProject dependencies include:
{
"@material-ui/core": "^4.5.2",
"@material-ui/icons": "^4.5.1",
"firebase": "^7.2.3",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-redux": "^7.1.1",
"react-redux-firebase": "^3.0.4",
"react-router-dom": "^5.1.2",
"react-scripts": "2.1.5",
"redux": "^4.0.4",
"redux-firestore": "^0.9.0"
}