So, I've got two divs that are holding individual tables (so that the top can act as a header and the bottom can act as a scrollable content area).
Everything is working fine functionally, but I've been banging my head against my desk trying to sort out this phantom border/margin that is showing up in Chrome on the scrollable area.
This is Firefox:
And this is Chrome:
As you can see, Chrome is rendering a faint margin/padding on the left of the scrollable area (starts where the "12a" time markers start. I've changed the background of the scrollable area to #ff0000 during testing to ensure that it is indeed not a border. But this is what it looks like without that style change:
I would add a simple margin-left to this element, but the calendar cells are rendered via javascript and cell width, etc are calculated based on the width of the container, number of days available to view and a couple other parameters. In tests, this proved to throw off the alignment of cells further right in the table.
Has anyone encountered this before? And is anyone aware of a way to disable this property on scrollable elements in Chrome? Any help is greatly appreciated.
Thanks in advance!
a border and scroll-bar is calculated in your total width. that seems to be why it looks as if the top box is pushed to the left, when it really is the couple pixels from the scroll-bar offsetting everything below it to the right.
try offsetting the scroll bar container with
left:-2px;
or however much the width is.
Related
How do I get vertical scrolling when a max height value is reached in percentage?
I do get vertical scrolling when I use height instead, but then I do get too much bottom space when the parent get very large, which I don't want, such that I tried max-height SEE THIS PEN and screenshot.
I try with max-height, no vertical scrolling appears, SEE THIS PEN and screenshot (btw: I notice in chrome the Scrollbar seems flickering when used)
Notes:
The vertical scrolling has to appear in the box (it's a popup box in
the original app)
I am testing in FF 25.
It works if I put the vertical scrolling on the outer panel but I can't put the scrollbar on the outer panel (.InfoPanel) as then my other absolute positioned stuff like the quick close and arrow aren't visible when scrolling.
I played with it a lot now, but don't seem to fix it. I think it's not possible and I am very currious what you think, or how you would solve it.
To preface this question, I am very VERY new to html/CSS so go easy on me please :)
I am currently designing a web-page that has a fixed position header at the top. The header contains a logo, some drop-down menus, and a right floated container showing the name of the person currently logged in.
The problem that happens is if I re-size the screen to be smaller, the elements of the header wrap onto the next line.
The gray background is a parent div (holding the logo, the drop down menus, and the logged in info) with a width of 100%, a fixed height and fixed position. I initially had the logo and the list of menus set to float:left to keep them in-line, but have been playing around with display:inline-block to see if that can help anything (sadly, it hasn't much). The container all the way on the right holding "Logged in as Alex " is set to float: right
I have tried giving the header bar a fixed width, as well as setting its overflow to auto - neither option fixed the problem.
In my perfect world, at the point where the content begins to wrap now, I would like the entire page to horizontally scroll instead of pushing the content to the next line. A good example of the functionality I'm looking for is the top bar on Youtube, where the items squish together as you minimize the screen and the page starts to scroll horizontally when they can't be squished any closer.
I've been struggling with this for many hours over the last few days, and happy help or direction would be greatly appreciated. Thanks :)
I tried to post images but I don't have enough reputation. I have images that I could find a way to send of before-after resizing if anyone wants
You can specify
min-width
and/or
min-height
:)
overflow is your friend:
Use overflow:scroll on the container, that should fix it. More on overflow here: http://www.w3schools.com/cssref/pr_pos_overflow.asp
This will sound very "noob", but I'm new to HTML/javascript/php, and so far I've been having a blast discovering new stuff. Right now though, I'm having a minor problem.
I'm trying to make a UI with lots of buttons (it's a matrix of buttons, 5x24). When the browser is maximized, it's all good, the buttons are where they're supposed to be. But when the browser is adjusted so that it becomes narrower (width becomes smaller), the buttons try to remain visible by moving on top of each other.
I want to know how to make it so that a horizontal scroll bar automatically appears.
I've tried putting everything in a <body> tag and putting style="width:100%;overflow:scroll;" but the buttons still do what they do, and that is, ending up on top of each other when they're supposed to be side by side...
Thank you very much!!!
The problem is, width: 100% means the full width of the parent element. Give your container the necessary width (in px, not %) to accomodate all your buttons. Than put that in a div with overflow: auto, and it should work.
Been struggling with this for at least a couple hours now. Tried searching around but no solution seems to be working. So anyways, I have a template that I'm working on, and the issue that I'm having is that the sidebar on the left just will not stretch all the way down! If the window is maximized, it looks totally fine. Once you resize the window though it breaks, leaving a large gap between the sidebar and the footer. It also breaks if the content goes down the page any more than it currently does...
See for yourself here: http://bakedcraft.ca/laboratory/testsites/crock/template.html
and the css: http://bakedcraft.ca/laboratory/testsites/crock/css/default.css
Any ideas?
Add position:relative to your .main class
right now your side bar is 100% height of the window, not the main container. by adding position:relative to the sidebar's parent, when the sidebar is 100% height, it becomes 100% of the main div.
Sorry, this isn't really an answer but it's not letting me write a comment...
I looked at your code in firebug (firefox + web developer add-on) and it's showing a box constraint of 467px height I tried to quickly find where this 467px are coming from but can't see it with quick look (it's 4 AM). It's inheriting that height from somewhere, most likely from a combination of other size constraints of related elements. With all the positioning you have going on, in may be hard to locate.
One suggestion I have is if you plan on making a fluid layout you should work with em's rather than straight pixels. As I said, this isn't an answer but I did notice the size constraint of your sidebar. If this problem is still open in the morning I'll see if I can get a better look at it for you.
Alright I was running your problem through my head and I think I figured it out. Forgive me cuz I'm typing this on my phone and can't use firebug to verify if I'm right or not but the constraint I noticed earlier of 467px is n't inherited from another container it's being constained by the text in the sidebar div. If u were to add more text the box will grow with it. I believe what u may want to do is make a child conatiner within the side bar div. Your main sidebar div will only house your grey background color grey. Create a child div within the sidebar div and put your text and images into those. Make sure on the parent div you make it's height 100%. The height of the elements inside the child div shouldn't need height specifications since they will be inherited from the parent sidebar div. Hope this makes sense.
You can do the fix mentioned earlier with using jquery but remember if someone shuts of their JavaScript then your issue remains and your page will break. You should try to find and fix the root cause not use a bandaid that can be taken off.
Is there a way to have a div extend to the bottom of the page no matter what the zoom is? I have tried to use fixed positioning and absolute positioning and I can't get the sidebar to extend just to the end of the viewable area?
Here is a screenshot of what I have so far. The scroll bar on the side only applies to the column on the right. I want that to extend to the bottom of the viewable area along with the map. This is on minimum zoom.
http://flic.kr/p/a5mEU7
I have made a jsfiddle version of your page at here.
I believe this is the solution you were after, be warned it may not work 100% in all browsers but it gives you a starting point.
-UPDATE-
The previous jsfiddle URL I gave was incorrect, just changed it to the correct one (got the original one wrong, sorry)