position:fixed -- content disappearing on Zoom

Question

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>

tried replacing div's with ul(for the container) and li's for the contents,dint seem to work. The bottom bar in the Tutorials stays fine even after zoom.. — Vivek Chandra, Nov 05 '11 at 12:03
Not only zoom, but resizing the browser window smaller also hides them. — Wesley Murch, Nov 05 '11 at 12:43
Yes it does,hoping to find a work around or to know where i'm going wrong.. — Vivek Chandra, Nov 05 '11 at 12:48

score 1 · Answer 1 · answered May 26 '12 at 20:45

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');
        }
    });

score 1 · Accepted Answer · edited May 23 '17 at 12:30

1

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

edited May 23 '17 at 12:30

Community

1
1

answered Nov 06 '11 at 18:29

Vivek Chandra

4,240
9
33
38

anon12356163 · Answer 3 · 2011-11-05T13:26:36.543

0

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.

edited Nov 05 '11 at 13:26

answered Nov 05 '11 at 12:49

anon12356163

1
1

Tried it with specific width also,dint seem to get the content back on the screen – Vivek Chandra Nov 05 '11 at 12:57

score 0 · Answer 4 · answered Nov 05 '11 at 12:57

0

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;
}

answered Nov 05 '11 at 12:57

ScottS

71,703
13
126
146

The problem i'm having is not fitting the contents in the screen -- This is just a small code i wrote as a gist to explain the issue -- i the entaire block in the container to stay on the screen on zoom -- as seen in the 1st tutorial(zoom in and try to see what i mean).. – Vivek Chandra Nov 05 '11 at 13:00
Exactly. If you look at the footer, the entire container is defined by percentages, and if you narrow the window and zoom, it bumps down the right side also, and if you narrow enough, I can get it to go off screen also. Any fixed width items will at some point cause the content to go off screen because the zoom is increasing the fixed width by some zoom factor. – ScottS Nov 05 '11 at 13:06
only the foot panel is given a 94% width and the rest anchors(in the footpanel) are given a 16px -- specific width(home 50px and chat 126px).I agree at some point any fixed will go offscreen but the tutorial content stays -- by that i mean -- u get a scroll,but in my code the scroll itself isnt preset,even if it is wont show the contents of the top bar..!!.. – Vivek Chandra Nov 05 '11 at 13:14
Correct. Any `fixed` element, once it goes off screen, is not accessible via a scroll (even the tutorial). They have such narrow buttons that you have to go extremely narrow to get it to be a problem. In your case, you have elements taking up basically 100%, so as anon12356163 commented in his answer, if you have no room to "expand" on zoom for any fixed width elements in your `fixed` positioned container. If your goal is to always keep on screen, you need to use only percentages for all widths of elements "inside" your bar. However... – ScottS Nov 05 '11 at 13:29
...if your goal is to keep the items accessible to viewing (perhaps by scroll to the left) but have them fixed at the top of the screen, then you might find a previous answer of mine helpful at http://stackoverflow.com/questions/3303173/position-element-fixed-vertically-absolute-horizontally/3303944#3303944. – ScottS Nov 05 '11 at 13:30
as i observed,this disappearing issue happens in techCrunch aswell but not in twitter or facebook.Want to get that sorta top bar -- any tips on how ?.. saw the link in ur previous post,u've given `fixed` within a `relative`,i wanted the fixed itself to contain the elements and the contents of which should be awailable on scroll(when on zoom or window resized).. – Vivek Chandra Nov 05 '11 at 17:14
Sorry I'm out of ideas. My observation of Facebook looks as if they are running some type of script to resize the fixed width after the page zoom. – ScottS Nov 05 '11 at 18:38
found the solution -- http://stackoverflow.com/questions/8025818/unable-to-get-the-scroll-when-positionfixed-elements-disappears-form-the-scr/8026202#8026202 – Vivek Chandra Nov 06 '11 at 18:27

position:fixed -- content disappearing on Zoom

4 Answers4