Bracket not showing properly

[haziqfiqri]

I am trying to test displaying bracket from jquery-bracket but Its not showing like how the example show. Am I doing something wrong here? Example output

(layout.pug)

        script(src="/socket.io/socket.io.js")
        script(src="/bower_components/jquery/dist/jquery.js")
        script(src="/bower_components/bootstrap/dist/js/bootstrap.js")
        script(src="/js/main.js")

        //-Test
        script(src='/bower_components/jquery/dist/jquery.min.js')
        script(src='/bower_components/jquery-bracket/dist/jquery.bracket.min.js')
        link(href='/bower_components/jquery-bracket/dist/jquery.bracket.min.css', rel='stylesheet')

(main.js)

$(function() {
    var minimalData = {
        teams : [
          ["Team 1", "Team 2"], /* first matchup */
          ["Team 3", "Team 4"]  /* second matchup */
        ],
        results : [
          [[1,2], [3,4]],       /* first round */
          [[4,6], [2,1]]        /* second round */
        ]
    }
    $('#minimal').bracket({
      init: minimalData /* data to initialize the bracket with */ })
})

(test.pug)

extends layout

block content
    //- Test Jquery Bracket
    #minimal

[teijo]

Perhaps you have some other styles that are interfering with the bracket style sheets? I can see some gray lines on the background, so I assume your code snippets are part of a larger site.

[haziqfiqri]

Perhaps you have some other styles that are interfering with the bracket style sheets? I can see some gray lines on the background, so I assume your code snippets are part of a larger site.

Its just personal project that I am working on nothing confidential here, sure I could share my css as well for references, I do think maybe a css overlap or something. But inside my css there are not much of codes there as I am not focusing on styling yet.

/**Error Styles*/
.alert-error{
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert-success_msg{
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

/**Chat Styles*/
.container-base{
    background: #ffffff;
    margin: 0;
    padding: 0 10px 10px;
    max-height:65vh;
    overflow-x:hidden;
}
.container-chat {
    border: 2px solid #dedede;
    background-color: #f1f1f1;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
}
#container-inline h6,
#container-inline p {
    display: inline;
    vertical-align: top;
    font-size: 16px;
    line-height: 28px;
}

/**Live Score*/
.score {
    font-size: 1.5em;
    position: relative;
    margin: auto;
    text-align: center;
}
.score td {
    width: 50px;
}
.wrap {
    width: 100%;
    height: 100%;
}
.color {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: white;
    transition: background .25s ease-in-out;
}
.container-livescore {
    position: relative;
    margin: auto;
    text-align: center;
}
.timelabel {
    font-size: 1.3em;
    padding-top: 30px;
    transition:  .25s ease-in-out;
}
.userlabel {
    font-size: 1.3em;
    padding-top: 30px;
    transition:  .25s ease-in-out;
}
.weaponlabel {
    font-size: 1.3em;
    padding-top: 30px;
    transition:  .25s ease-in-out;
}
.time {
    font-size: 3em;
    transition:  .25s ease-in-out;
}
.pistol td.pic img{
    max-width: 150px;
    max-height: 70px;
}
.rifle td.pic img {
    width: 400px;
    height: auto;
}
.name {
    font-size: 3em;
}
.knife td.pic img{
    max-width: 150px;
    max-height: 100px;
}
.weapon ul {
    list-style: none;
    padding: 0;
    margin: auto;
    text-align: center;
    margin-top: 20px;
}
.weapon ul li {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 20px;
}
.weapon table {
    margin: auto;
    text-align: center;
}
.grenade ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 50px;
}
.grenade ul li{
    list-style: none;
    padding: 0;
    margin: 10px;
    display: inline-block;
}
.grenade ul td.pic img{
    width: auto;
    height: 150px;;
}

Edited: Which gray line may I ask?

[haziqfiqri]

      I didn't change any css files,only change .ts、.js、.html files.It may not have been modified by me.You can come to my github - https://github.com/CoolLittle/jquery-bracket … ------------------ 原始邮件 ------------------ 发件人: "Haziq Fiqri"<notifications@github.com>; 发送时间: 2019年11月6日(星期三) 下午5:25 收件人: "teijo/jquery-bracket"<jquery-bracket@noreply.github.com>; 抄送: "曹政"<2271181058@qq.com>;"Comment"<comment@noreply.github.com>; 主题: Re: [teijo/jquery-bracket] Bracket not showing properly (#167) Perhaps you have some other styles that are interfering with the bracket style sheets? I can see some gray lines on the background, so I assume your code snippets are part of a larger site. Its just personal project that I am working on nothing confidential here, sure I could share my css as well for references, I do think maybe a css overlap or something. But inside my css there are not much of codes there as I am not focusing on styling yet. /Error Styles*/ .alert-error{ color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .alert-success_msg{ color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } /*Chat Styles/ .container-base{ background: #ffffff; margin: 0; padding: 0 10px 10px; max-height:65vh; overflow-x:hidden; } .container-chat { border: 2px solid #dedede; background-color: #f1f1f1; border-radius: 5px; padding: 10px; margin: 10px 0; } #container-inline h6, #container-inline p { display: inline; vertical-align: top; font-size: 16px; line-height: 28px; } /Live Score*/ .score { font-size: 1.5em; position: relative; margin: auto; text-align: center; } .score td { width: 50px; } .wrap { width: 100%; } .color { position: fixed; width: 100%; background-color: white; transition: background .25s ease-in-out; } .container-livescore { position: relative; margin: auto; text-align: center; } .timelabel { font-size: 1.3em; padding-top: 30px; transition: .25s ease-in-out; } .userlabel { font-size: 1.3em; padding-top: 30px; transition: .25s ease-in-out; } .weaponlabel { font-size: 1.3em; padding-top: 30px; transition: .25s ease-in-out; } .time { font-size: 3em; transition: .25s ease-in-out; } .pistol td.pic img{ max-width: 150px; max-height: 70px; } .rifle td.pic img { width: 400px; height: auto; } .name { font-size: 3em; } .knife td.pic img{ max-width: 150px; max-height: 100px; } .weapon ul { list-style: none; padding: 0; margin: auto; text-align: center; margin-top: 20px; } .weapon ul li { list-style: none; padding: 0; margin: 0; margin-top: 20px; } .weapon table { margin: auto; text-align: center; } .grenade ul { list-style: none; padding: 0; margin: 0; margin-top: 50px; } .grenade ul li{ list-style: none; padding: 0; margin: 10px; display: inline-block; } .grenade ul td.pic img{ width: auto; height: 150px;; } — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

Not quite sure I follow you, can you explain more a little bit? add   inside my pug file? Edit: I'll try to check your repo to see whats going on.

[CoolLittle]

You can try release-0.11.1 version. Maybe you will get it