CODEWITHSUNDEEP
csscss-position
Vivek Chandra
Vivek Chandra

Reputation: 4358

position:fixed -- content disappearing on Zoom

went through the tutorial http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/ and tried the same to make a fixed top bar (just like Facebook,twitter,techCrunch and any other popular sites out there),but the bar fails on ZOOM.

Here's an example of what i mean -- http://rtabl.es/designingforstartups -- if you zoom in that link,you can see that the content on the right disappears from the screen . Same thing is happening with me,and i dont want the content to disappear on zoom..

Here's the test code,followed the tutorial and gave the container a position:fixed and the contents have position:relative with a float:left -- wondering where i'm going wrong.

Code -- 

        <html>
    <style type="text/css">
    #Contianer{
    position: fixed;
    height: 35px;
    width: 100%;
    z-index: 9999;
    color: white;   
    background-color: #474747;
    }
    .x{
    float: left;
    text-align: center; 
    position: relative;
    line-height: 35px;
    border:1px solid white;
    }
    #a{
    width:20%;
    text-align: left;
    min-width: 100px;
    }
    #b{
    width:20%;
    min-width: 100px;
    text-align: left;
    height: 35px;
    display: table-cell;
    } 
    #c{
    min-width: 200px;
    width:40%;
    }
    #d,#e{
    min-width: 50px;
    width:10%;
        }
    body{
    border:0;
    margin: 0;
    }

    </style>
    <body>
    <div class="Contianer" id="Contianer">
    <div id="a"  class="x">
        foo
    </div>
    <div id="b" class="x">
        bar
    </div>
    <div id="c" class="x">
        tom 
    </div>
    <div id="d" class="x">
        jerry
    </div>          
    <div id="e" class="x">          
        Out
    </div>
    </div>

    </body>

Upvotes: 5

Views: 40349

Answers (4)

Zac
Zac

Reputation: 11

You can use Javascript to fix it, and for best practices you can use a div to wrap the container with an absolute position and a div inside the container to put content into.

The Javascript

$(windows).resize(function(){
        if ($(window).width() < $('.content').width()){
            $('.container').css('position', 'static');
        }
        else{
            $('.container').css('position', 'fixed');
        }
    });

Upvotes: 1

Vivek Chandra
Vivek Chandra

Reputation: 4358

After dwelling with this issue,finally found a solution -- thanks to stackoverflow community!!.. here's the link(had posted another question as this ques dint gain any output)

unable to get the scroll when position:fixed -- elements disappears form the screen

Upvotes: 1

anon12356163
anon12356163

Reputation: 1

Your container is 100% of width and your element containers take 20+20+40+10+10=100% also. Now if you zoom, there won't be any free space to expand into, so you need to specify the width of these elements.

EDIT: "but the tutorial content stays" it is a background image on body element.

Upvotes: 0

ScottS
ScottS

Reputation: 72271

The problem is any fixed widths (even min-widths). Everything must be in a percentage (flexible) or at least account for some minor fixed widths. So in your example, if I down-size the percentages of some of the items to allow for the 1px borders, and I eliminate the min-width, I do not get the issue (however, on small screen it bumps the floats down). Here's your modified code:

#Contianer{
position: fixed;
min-height: 35px;
width: 100%;
z-index: 9999;
color: white;   
background-color: #474747;
}
.x{
float: left;
text-align: center; 
position: relative;
line-height: 35px;
border:1px solid white;
}
#a{
width:19%; /*downsized to give room for fixed width borders*/
text-align: left;

}
#b{
width:19%; /*downsized to give room for fixed width borders*/

text-align: left;
height: 35px;
display: table-cell;
} 
#c{

width:40%;
}
#d,#e{
min-width: 50px;
width:10%;
    }
body{
border:0;
margin: 0;
}

Upvotes: 0

Related Questions