CODEWITHSUNDEEP
javascriptjqueryhtmlhideshow
germainelol
germainelol

Reputation: 3331

jquery - .hide() .show() ruins CSS styling

I have a div containing a set of textboxes and buttons which is showing by default. I also have a set of tournament brackets made using jquery, which is set to display: none. 

$('#buttontest').click(function() {
    $('div.bracket').show();
    $('div.teamList').hide();
});

When I use this code, it works so that the swap around in terms of what is showing, but when it shows the tournament brackets, it ruins the css styling behind it, the teams on the tournament tree do not match up. I have linked 2 screenshots at the bottom to highlight this.

Here is what the tournament tree should look like

enter image description here

But when I hide the brackets, and show them after the button is clicked, it ends up like this

enter image description here

Here is my code for the HTML side of things it is in JADE template HTML language, but it is easy enough to see what is going on :)

div.teamList
    form.pull-left(method="post", id="loginForm")
        input.input-small(id="team1", type="text", name="Team 1", placeholder="Team 1")
        input.input-small(id="team2", type="text", name="Team 2", placeholder="Team 2")
        br
        input.input-small(id="team3", type="text", name="Team 3", placeholder="Team 3")
        input.input-small(id="team4", type="text", name="Team 4", placeholder="Team 4")
        br
        input.input-small(id="team5", type="text", name="Team 5", placeholder="Team 5")
        input.input-small(id="team6", type="text", name="Team 6", placeholder="Team 6")
        br
        input.input-small(id="team7", type="text", name="Team 7", placeholder="Team 7")
        input.input-small(id="team8", type="text", name="Team 8", placeholder="Team 8")
        br
        button.btn.btn-primary.btn-mini(type="submit", value="Submit") Submit
        button#buttontest.btn.btn-primary.btn-mini(type="button") Submit
div.container
    div.bracket

https://raw.github.com/teijo/jquery-bracket/master/jquery.bracket.js

https://raw.github.com/teijo/jquery-bracket/master/jquery.bracket.css

And the singleElim - http://pastebin.com/z6KvRqGU

Upvotes: 2

Views: 1814

Answers (2)

Kaizen Programmer
Kaizen Programmer

Reputation: 3818

You need to leave the .bracket div visible until you've initialized the bracket. So remove display:none from your custom.css stylesheet and then do this n your singleElim8.js file.

$(function() {
    $('#singleElim8').bracket({
        init: singleElim8Data
    })
    $('.bracket').hide();
});

In your 8teams jade use your original js:

$('#buttontest').click(function() {
    $('div.bracket').show();
    $('div.teamList').hide();
});

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Include clearfix

Include clearfix CSS and add it this way:

div.container.clearfix

Or simple, give this div a CSS of overflow: hidden;

Upvotes: 0

Related Questions