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

[dfogge]

“I thought you guys are experts who can find the bug from an image”

welp, i guess you were wrong:
https://css-tricks.com/forums/discussion/21516/a-guide-to-using-codepen-help-us-help-you-/p1

[Safey89]

you are so right . you can’t help without seeing what I’m talking about and I’m not allowed to show you local code .
I asked our designer here in company and he didn’t know what’s wrong .
he said I should know how zooming works in firefox to know why the tabs of jequery is always getting their width from brower width .
any help in that ?

[Safey89]

I wrote some code here’s somthing similar to my problem :
http://jsfiddle.net/U2YkF/11/

[Safey89]

please help me :(
I tried many ways and I had two results :
if I want to make my site like this site :
all elements inside html and body I have to make width:100% for html and body and not specify any width for any element (table) inside html and body .
second way (which I was asked to do ) : I have to give html and body width of the table to keep it always (keep the table) inside html and body .
but that’s so wrong !! beacause I have to make my site for all screen sizes .
I want the page to expand when zooming or when width of tables is large the body and html goes wider too

[Kitty Giraudel]

> if you are develoing a product you will have many style sheets :D !! what’s strange in that !

Nothing strange with that. However there is something wrong: you shouldn’t have multiple stylesheets in the production environment.

> I thought you guys are experts who can find the bug from an image

We are front-end developer. Not magicians.

[Safey89]

okay I’m sorry , I’m not the one who wrote those stylesheets . I’m just trying to find errors and I’m a beginner and here’s my pain

[Safey89]

maybe this’s called a fluid width of table

[Merri]

Solution A: limit the width of content within the table.

Solution B: give the table’s parent element overflow-x: auto; (and make sure it also has a width defined).

That’ll make scrollbar for the table’s parent element so you’ll be scrolling the table horizontally instead of the whole page.

[Safey89]

I was asked to scroll the whole page when zooming not only the table , also I thought It’s wrong to give the table a width (for example : 1200px) beacuase I don’t know what screen would be used to display my site !

[Safey89]

I think I found my solution :

$(‘html’).css(‘width’,$(window).attr(‘innerWidth’));
$(‘html’).css(‘overflow-x’,’scroll’)
$(‘html’).css(‘position’,’absolute’)

[Safey89]

thanks everyone and sorry if i bothered you ^_^

[Author]

Posts