Grow your CSS skills. Land your dream job.

How to stretch my page and get scroll bar when zooming in?

  • # February 7, 2013 at 6:43 am

    I couldn’t find a way to describe my situation but when zooming in the page it’s not zooming with all its contents , just look to the image and you will know what I mean :

    I can’t provide you with css code becuase of my company policy
    can you tell me what’s wrong in my style !
    html and body don’t grow when zoooming like other sites !
    I want the whole page with all its contents get bigger when zooming abd a csroll bar would appear .
    I’m still a beginner and I’m lost in attributes

    # February 7, 2013 at 6:47 am

    It’s going to be really hard to help without the code.

    Your image doesn’t really show us the problem and, anyway, it looks like you DO have scrollbars.

    # February 7, 2013 at 7:33 am

    the table is going outside the html body content .
    I’ll give you an example ! my page now is like this site . try to zooming-in here this page .
    I want the zooming to be like http://stackoverflow.com
    scroll I’m talking about is in the bottom of the window .

    # February 7, 2013 at 7:43 am

    I don’t get a scrollbar on stackoverflow when zooming until I get to 200%, which, I guarantee, no-one will ever do.

    If it’s a table then that is probably the problem but, again, without the code we can’t play with it to try things out.

    # February 7, 2013 at 7:45 am

    there is problem with margin .
    have you use margin or top left right to put space between two div ?

    use margin

    # February 7, 2013 at 7:49 am

    I have many css files and I don’t know which one I should show you its code . any way here it is :

    body{font-size: 11pt;color: #333333;font-family: Calibri,”Times New Roman”;}
    a{text-decoration: none}
    h3{border-bottom:1px solid #A19B9E;color: #c77405;font-style: italic;}
    label{font-weight: bold;color: #c77405;font-style: italic;}

    #Page{width:100%;margin:0;padding:0;min-width:994px;height:100%;}
    #Header{width:100%;height:60px;background-color:#FFFFFF;}
    #Header{background:url(/images/Logo.png) no-repeat;}
    #Header .menu {float:right}
    #Header .menu a {color:#c77405;text-decoration: none;}
    #Header .menu a:hover {color:#eb8f00;text-decoration: underline;}
    #Header .welcome {float:right;margin:0 10px 0 10px;font-style: italic;font-size: 10pt;}
    #Loading{display:none;background:#FFFFFF url(‘images/loading.gif’) no-repeat center;z-index:1000;}
    #DataForm{display:none;}
    #NavBar{border:0;height:30px;padding:0;text-align: center;vertical-align: middle;}

    #MainPage{width:100%;margin:0;padding:0;background:url(‘images/MainPage.jpg’) repeat-x;}
    #MainPage #SideBar{height: 100%;width:220px;margin:0;padding-top:20px;}
    #MainPage #SideBar h2{font-size: 11pt;padding-top:5px;padding-bottom: 5px;padding-left: 25px;}
    #MainPage #SideBar ul{list-style: none;font-size: 10pt;margin: 0;padding: 0 ;}
    #MainPage #SideBar ul li{padding: 2px;cursor: pointer; }
    #MainPage #SideBar ul li a:hover{color:#e78f08;text-decoration: underline;}
    #MainPage #SideBar ul li h3{font-size:10pt;cursor:default;margin: 5px}
    #MainPage #Container{padding:20px;width:74%;height: 100%;overflow: auto;}
    #MainPage #msg {display: none;max-width: 300px;}
    #MainPage #Result{height: 100%;width: 100%;min-width:610px;min-height:300px; max-height: inherit;padding-top:20px;}
    #MainPage #Result h3{border-bottom:1px solid #A19B9E;color: #c77405;font-style: italic;}

    #Footer {display: inline-block;width:100%;text-align: center;font-size: 12px;font-style: italic;font-family: serif;color:#787878;}
    #toolbar{margin: 0;padding: 0;}
    ul#ListToolBar li {cursor: pointer;list-style: none outside none;margin: 2px;padding: 4px;position: relative;}
    #Final{border-collapse: collapse;width:100%;}
    #Final tr td{vertical-align: top;margin: 0;padding: 0;border-color: #d3d3d3;}
    #Final tr.ui-state-default td{padding: 4px;}
    #Final table tr td{padding: 2px;}
    #Final .TopBorder{border-top:1px solid #d3d3d3}
    #Final .Primery{color:#9FAFD1}
    #Final .center{text-align: center; }
    #InsertForm h3{font-size: 12pt;}
    .ObjectData{min-width: 550px;}

    .red{
    background-color:#994d53;
    color: #ffffff;
    }

    and another style sheet :

    * {margin:0; padding:0;}
    body
    {
    background:#F3F3F3;
    font-size: 14px;
    line-height: 150%;
    font-family: Arial;
    color: #797979;

    }
    img
    {
    border:0;
    }
    a
    {
    color: #F69744;
    text-decoration:none;
    }
    a:hover
    {
    text-decoration:underline;
    }
    input
    {
    color:#797979;
    }
    textarea
    {
    color:#797979;
    }
    label
    {
    display:block;
    color:#F69744;
    font-weight:bold;
    margin-top:3px;
    margin-bottom:1px;
    }
    legend
    {
    color:#797979;
    }
    /**********************************************/
    #main
    {
    margin:0 auto;
    width:100%;
    height:100%;
    background:#FFFFFF;
    }
    #main img.mysql
    {
    margin-top:0px;
    }
    /**********************************************/
    #header
    {
    padding:0px 0 30px 0;
    display: block;
    }
    #header img.logo
    {
    margin-top:5px;
    }
    #header ul
    {
    float:right;
    margin-top:10px;
    margin-right:40px;
    font-size:16px;
    line-height:25px;
    }
    #header ul li
    {
    float:left;
    list-style:none;
    padding-left:20px;
    }
    #header ul li a
    {
    color:#797979;
    text-decoration:none;
    }
    #header ul li a:hover
    {
    text-decoration:underline;
    }
    #header ul li.home
    {
    border-right:1px solid #E6E6E6;
    padding-right:10px;
    padding-left:10px;
    position:relative;
    left:0px;
    top:10px;
    }
    #header ul li.contact
    {
    padding-right:10px;
    padding-left:10px;
    }
    /**********************************************/
    #container
    {
    position:relative;
    width:100%;
    background:#FFFFFF;
    }

    /**********************************************/
    #right-bar
    {
    float:left;
    width:236px;
    padding:0;
    margin:0;
    vertical-align:top;
    text-align:center;
    }
    #right-bar img.pic2
    {
    text-align:right;
    margin-left:18px;

    }
    /*************************************************************************************/
    #left-bar
    {
    float:left;
    width:236px;
    padding:0;
    margin:0;
    vertical-align:top;
    text-align:center;
    }

    /*************************************************************************************/
    #footer
    {
    width:100%;
    height:20px;
    vertical-align:middle;
    font-size:10px;
    font-weight:bold;
    /* position: fixed;
    bottom: 30px;*/
    /*margin-top:-100px;
    /*clear: both;*/
    }
    #footer ul
    {
    margin-top:10px;
    margin-right:10px;
    margin-left:30px;
    color: #797979;
    line-height:11px;

    }
    #footer ul li
    {
    float:left;
    border-right:1px solid #797979;
    list-style:none;
    margin:0 5px 5px 0;
    padding-right: 5px;
    }
    #footer ul li a
    {
    color: #797979;
    text-decoration:none;
    }
    #footer ul li a:hover
    {
    text-decoration:underline;
    }
    #footer .copyright
    {
    margin-top:5px;
    float:none;
    text-align:center;
    }
    p.page-title
    {
    font-size:18px;
    font-family:Tahoma;
    color:#F69744;
    padding-bottom:7px;

    border-bottom:1px solid #E6E6E6;
    }
    /********************************************************************************************/

    #main-bar-l
    {
    width:504px;
    vertical-align:top;
    height:100%;
    padding-bottom:20px;
    padding-left:20px;
    padding-right:10px;
    margin:0;
    line-height:20px;
    border-left:1px solid #F69744;
    }
    #main-bar-l p
    {
    margin-top:15px;
    margin-bottom:15px;
    }
    #main-bar-l img.pic2
    {
    float:right;
    margin-left:5px;
    margin-right:-14px;
    margin-top:-15px;

    }
    /*****************************************************************************************************************/
    #main-bar-r
    {
    float:left;
    display:block;
    width:504px;
    vertical-align:top;
    height:100%;
    padding:0 5px 10px 30px;
    margin:0;
    line-height:20px;
    border-right:1px solid #F69744;
    }
    #main-bar-r p
    {
    margin-top:15px;
    margin-bottom:15px;
    }
    /*****************************************************************************************************************/
    #submenu-title
    {
    width:200px;
    height:30px;
    margin-left:30px;
    margin-top:15px;
    color:#F69744;
    padding-top:4px;
    padding-left:25px;
    font-family:Arial;
    font-size:18px;
    text-align:left;
    background:url(images/sub_title.png) no-repeat;
    }
    .submenu
    {
    margin:10px 10px 10px 30px;
    color: #797979;
    line-height:11px;
    text-align:left;
    text-decoration:none;
    list-style:none;
    }
    .submenu li
    {
    color:#797979;
    padding:8px;
    padding-left:20px;
    text-decoration:none;
    border-bottom:1px dotted #797979;
    }
    .submenu li:hover
    {
    background:url(images/arrow.png) no-repeat left;

    }
    .submenu li.selected
    {
    background:url(images/arrow1.png) no-repeat left;
    }
    .submenu li.selected:hover
    {
    background:url(images/arrow1.png) no-repeat left;
    }
    .submenu a
    {
    color:#797979;
    text-decoration:none;
    }
    .submenu a:hover
    {
    color:#797979;
    text-decoration:none;
    }

    # February 7, 2013 at 8:10 am

    This worries me! ¬

    >I have many css files

    I can’t see any styles / properties for the table (unless it has an ID) so my guess is that there is some inline styling. Until we can see a live site it’s really going to be hard to help.

    # February 7, 2013 at 8:22 am

    if you are develoing a product you will have many style sheets :D !!
    what’s strange in that !
    I can’t give a link .
    I thought you guys are experts who can find the bug from an image
    it’s a position or overflow or somthing I still don’t know in CSS yet !
    thanks for help any way

    # February 7, 2013 at 8:35 am

    I solved it :

    body html
    {
    position: fixed;
    width: 100%;
    overflow:scroll;
    }

    but the scroll is not visible :(

    # February 7, 2013 at 8:43 am

    When I am developing a web page I know where all the parts of my page are in relation to the CSS.

    You may have added a fix but I doubt if you have actually resolved the underlying issue. My understanding is (and I’m sure others will chime in if i am wrong) is that tables don’t scale/zoom as you might expect and that has to be taken into account when doing your code.

    http://css-tricks.com/responsive-data-table-roundup/

    # February 7, 2013 at 9:07 am

    I’m not the ine who wrote the stylesheets . I’m just using them .
    and I was asked to fix this problem

    # February 7, 2013 at 9:10 am

    http://jsbin.com/apane6/14
    it’s my problem !!
    I want to get rid of this problem . I want the whole page which contains many tabs and tables inside tabs to grow together .
    thats simple …

    # February 7, 2013 at 9:21 am

    I am really struggling to get my head around what you’re talking about?

    # February 7, 2013 at 9:40 am

    I’m really sorry :$
    I just want my page to be like stackoverflow.com when zooming in .
    but style I have (which I didn’t write) do as you see in the image above .
    html and body don’t get bigger they are always in the size of my browser window like our page we are posting in :D
    the table is a dependent component and it has its own style
    the problem here appears !
    zoom in . table gets out of the tab :D
    I was asked to fing why my tab is not growing also like the table does :D
    I hope I made my question clear now

    # February 7, 2013 at 10:09 am

    The Jsbin seems to work fine zoomed and is also pretty responsive (as tables go).

    Here’s my question.

    How MUCH do you have to zoom in before you can’t see all the data.

    This could be a could be a problem that doesn’t need a solution.

    Once again, until we can see a live site…

Viewing 15 posts - 1 through 15 (of 26 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".