I am experiencing an odd issue and am wondering if it's a bug in the rendering engines - it occurs in WebKit and also Firefox that I've tested.
If you have a div that's fixed on the page and you add another div inside it and also set it to be fixed (to obtain a fixed header within a fixed popup), you can ensure that the header will remain visible even when the user scrolls the popup. Unless you set transform scale on the popup - doing that will break position:fixed and cause it to no longer fix to the top of the parent div and instead it will scroll along with the content. Is that expected behavior - how can I work around that?
JSFiddle
Well the transform: scale(x) will break the element out of the coordinate flow and thereby can not have a fixed position.
I'd recommend instead wrapping the text below #header in a constrained div with overflow: auto. A fixed child of a fixed ancestor just doesn't make that much sense, but I can see what you were going for.
Related
I am getting horizontal scroll on my HTML website layout all of a sudden and I cannot figure out how or why. Any tips?
This happens when an element's width is greater than the viewport width. This could be caused by text flowing outside of a container or another incorrectly sized element.
Good Fix
Use the inspector and start deleting elements one by one, eventually you'll delete an element that will remove the horizontal scroll. Note that you can CTRL-Z to undelete an element in the inspector. Once you've found the offending element you can inspect/adjust it's styles to fix the overflow.
Cheat Fix
Add overflow-x: hidden; styling to your body element.
This is not advisable though as it's not fixing the overflowing element, instead it's hiding the part that overflows.
I have an iframe container on my page that loads a map when i click on a button. And for some reason, when the map loads it causes surrounding objects to go blurry.
Example: https://i.postimg.cc/xCfJWwZG/beforeafter.png
I have tried adding -webkit-font-smoothing: subpixel-antialiased; to various things in the CSS and transform: scale(1.0) translate3d(0,0,0); which only makes the objects permanently blurry. How do i stop the iframe from screwing up my page.
Most likely the problem is not being directly caused by the position:absolute css property but is caused by anti-aliasing due subpixel positioning of the iframe.
With either positioning using a % value or using a transform with % values the iframe can be inadvertently positioned in a subpixel position i.e. left is set to 10% and that calculates to say 10.5px. That results in the iframe content appearing blurred.
In my case something as simple as an odd value (35px) for padding on a ancestor element resulting in an odd value for width and then a left:10% on the iframe was enough to cause the problem, setting the padding to an even number then removed the problem.
Adding it as an answer so that people looking for similar problem will find it.
Sometimes the content of the iframe has absolutely positioned elements inside that due to css positioning might take up the whole screen if the iframe is not positioned relative to some container.
So it seems in this case this is the problem.
So try to wrap the iframe in a container and set its position:relative to fix it.
I have a dojox chart (chartDiv) that gets created within another container div (panelContainer).
Even though I have the width and height of the chartDiv set to be 90%, it either introduces scroll bars into the chartDiv, or if I dtart altering the padding and margin settigns for the ChartDiv, it will spill outside of the parent container.
I know this is going to be a basic issue, but I have been playing with lots of different CSS settings but nothing seems to solve keeping the chartDiv within the confines of the panelContainer (taking up 95% of the space)
This fiddle might help you spot where I have gone wrong.
When you make a chart (or a dojox.gfx canvas) without width/height, it will try its best to determine its dimensions from the container you put it in. It can get confused though!
In your fiddle's case, #chart has a known width, because it's a block element and inherits its width from panelBG which is 100% of panelContainer's width.
The #chart div doesn't really have a height though, since a block element is 0px tall until you put something in it (or add some style to it). As a consequence, (I think) the chart simply assumes a height of some proportion to the width.
In your CSS, I see you have a #chartDiv rule with width and height 90%. I'm guessing you intended that to be #chart. That wouldn't actually have resolved the problem entirely though!
Assuming you changed that, the chart would now use 90%x90% as width/height, but if you try it, you'll see that the labels/axis are still positioned incorrectly.
Because you've floated the title container to the left, the chart container starts on the same "line" and tries to have its content "float" around the title container. This skews the axis labels out of place (green), while the actual chart (svg/canvas, pink) drops down below the title container.
To fix this, tell the chart container to stay clear of floats on both sides:
#chart {
width: 90%;
height: 90%;
clear: both;
}
It isn't really necessary to float anything though, and setting the height to 90% isn't always ideal. I made a suggestion in an updated fiddle: http://fiddle.jshell.net/froden/WsrHs/4/ .
The differences are just that the title container is a div spanning across the top, while the chart container is absolutely positioned so that it fills whatever space is left underneath. You can then just set width/height on panelContainer.
Absolutely positioned elements are taken out of the normal flow. This is why some of the elements are expanding beyond their containers. I have a feeling your floats are involved in that, too, but the fiddle is a little too complicated and a simpler version needs to be made.
I have the weirdest issue that I haven't been able to find a solution for. I have a table where one of the cells has its contents wrapped in a relatively positioned div element (essentially I'm showing a "progress bar" in a cell, so its a div with another div inside (that expands its width to the % completed), and a span inside that showing the value).
The table is inside a div that has its overflow-y set to auto, and a max-height of 400px.
In FF, Chrome, and IE8 and 9 it looks/works great, but in IE7, the cells with those progress bar divs continue to show their content and don't ever scroll with the rest of the table contents.
This JSFiddle http://jsfiddle.net/ujV4M/1/ shows what I'm talking about if you view it in IE7.
Edited: Add position:relative to the element containing the table
I removed the relative position, as I've known IE7 to cause issues with scrollable content areas with regards to elements that aren't statically positioned, and I added margin-left to the text:
http://jsfiddle.net/3H6eG/
Obviously my solution avoids the issue rather than solves it, but it looks like it works as it should. Or do you need relative positioning for a specific reason?
Adam
Is there a way to make an element not contribute to parent overflow, but keep it visible? Let me clarify
There is a watermark-like logo to be applied to a page in the manner below. It is supposed to be positioned partly outside the main content (dashed blue line)
I'm not aware of the option to set an element background in such a manner that it would persist as the browser window is resized horizontally, so I've just added a <div> with the logo as its background and position:absolute with the necessary offset relative to main content container.
Previously, the page would not get a horizontal scrollbar as long as the browser was wider than W1. Now, with an additional "watermark" element added outside of the main content box, the scrollbar would appear whenever the browser is narrower than W2
Is there something obvious I'm missing? A background setting, or possibly a neat margin workaround/
Update:
I've added a rough jsfiddle to illustrate the issue
Unfortunately, just because you nested the "watermark" div and positioned it absolutely doesn't make it outside of the document. If you put it outside of the document, the page will scroll (as you see).
To me, the first solution I think of is to move the watermark outside of the "content" div and apply the watermark to its parent container. I'm guessing you haven't done that because you need it to be relative to the "content" div, but it's something to try.
Also, the reason it scrolls is because the document has been overflow. The quick fix, yet not recommended, is to use "overflow-x: hidden;" on the parent container of the "content" div.
It's harder to give you a solution since you've stripped the rest of your HTML, and some "fixes" may not be as applicable if your structure is complicated in certain ways.
Remember that the width of your elements is greater than the actual "width" it includes padding & margins, if you have padding on your div reduce the "width" by the equivalent amount.
does that make sense? if you post the actual css & html it might be easier to give you a more detailed answer
additionally could you not assign the image as the background of the actual body element and set it to centered?
I've had a play with the code and come up with a possible solution for you.
set
body{overflow-x:hidden;}
then add
#media all and (max-width: 400px)
{
body{overflow-x:auto; }
}
as soon as your screen is smaller than 400px (the width of the div) your overflow:hidden will be overridden and you'll be given you scroll bars.
at this point you may also want to reduce the width of your watermark.