CODEWITHSUNDEEP
jquerycssxhtml
A_Elric
A_Elric

Reputation: 3568

Prevent drop-down from resizing div above it

This is an issue I've been running into for a little while.

In the first picture you can see the part of my layout before I click on it to expand it:

https://i.sstatic.net/Gpv9p.png

After clicking look at what happens to the text above it:

https://i.sstatic.net/0CQnW.png

I'm not entirely sure why this happens.

Here's my code:

<html>
<head>
    <title>Program Status Page</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery("#Hidden").hide();
            //toggle the componenet with class msg_body
            jQuery("#Even").click(function()
            {
                jQuery(this).next("#Hidden").slideToggle(500);
            });
            jQuery("#Odd").click(function()
            {
                jQuery(this).next("#Hidden").slideToggle(500);
            });
            $("#Test").on("click", function(){
                if ( +$(".weight", this).text() < 50 )
                    $(this).appendTo("#unlikelyToBeCalled");
            });
        });

    </script>
</head>

<body class="body">

    <img class="Top" src="Top-Bar.png" />
    <h1> Likely to be called</h1><br />

    <div id="Likely">
        <div id="Even">
            <div class="ProgramName">Blah11332131231231231</div>
            <div class="ProgramGraph">Blah23412312313</div>
            <div class="Status">Blah</div>
        </div>
        <div id="Hidden">
            <div class="Weight"> 1234</div>
            <div class="Values">Value1: Blah</div>
            <div class="Overrides">Overrides</div>
        </div>
    </div>

    <img class="Bottom" src="Bottom-Bar.png" />
</body>

The CSS is pretty basic.

body.body {
background-color: #d0c9c9;
min-width: 1600px;
height: 100%
overflow-x: hidden;
}
#Likely{
position:relative;
margin-left:auto;
margin-right:auto;
display: table;
font-size:24px;
width: 80%;
}
#Unlikely{
position:relative;
margin-left:auto;
margin-right:auto;
display: table;
font-size:24px;
width: 80%;
}
#Unable{
position:relative;
margin-left:auto;
margin-right:auto;
display: table;
font-size:24px;
width: 80%;
}
#Even{
display: table-row;
position:relative;
margin-left:auto;
margin-right:auto;
width: 80%;
font-size:24px;
width: 80%;
float: right;
}
#Odd{
display: table-row;
position:relative;
margin-left:auto;
margin-right:auto;
font-size:24px;
width: 80%;
float:right;
}
#Hidden{
 position:relative;
 display: table-row;
 height:40px;
 margin-left:auto;
 margin-right:auto;
 background-color: #336699;
 width: 80%;
}
.ProgramName{
display: table-cell;
width: 10%;
position:relative;
top:0;
left:0;
}
.ProgramGraph{
display: table-cell;
width: 60%;
position:relative;
top:0;
left:0;
}
.Status{
display: table-cell;
width: 10%;
position:relative;
top:0;
left:0;
}


.Weight{
display: table-cell;
width: 10%;
position:relative;
top:0;
left:0;
}
.Values{
display: table-cell;
width: 60%;
position:relative;
top:0;
left:0;
}
.Overrides{
display: table-cell;
width: 10%;
position:relative;
top:0;
left:0;
}
.Top{
position:relative; top: 0;
opacity: 0.95;
filter:alpha(opacity=95);
background-color:#131313;
width: 100%;
}
.Bottom{
position:absolute; bottom: 0;
opacity: 0.95;
filter:alpha(opacity=95);
background-color:#131313;
width: 100%;
}

I'm hoping that someone can make the upper div (id="Even") totally uneffected by the sub-panel dropping from it. Thanks a ton!

Upvotes: 0

Views: 1298

Answers (1)

JeffS
JeffS

Reputation: 428

The problem is with the display: table-row; that you have on both of them. The browser is trying to display them as rows in the same table, so when the hidden div appears it will align them together, thus it will force the #Even div to move over.

As for fixing it, I can't find a reason to use display: table-row by default it will look find without it. After that you just need some tweaking to allow the div to display properly.

#Even{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width: 80%;
    font-size:24px;
    width: 80%;
    float: right;
}

#Hidden{
    position:relative;
    height:40px;
    margin-left:auto;
    margin-right:auto;
    margin-top:28px;
    background-color: #336699;
    width: 80%;
}

Is what I used and it appeared to work. You will likely need to do some finagling with the margin-top:28px on #Hidden as it will vary based on how big your #Even div is. (this is so that when the div appears it won't cover your #Even div)

Upvotes: 1

Related Questions