My problem is when popover comes out it always stay inside of scroll. So that when I need to see popover content I need to scroll down then I can see it. I use z index. But I can not show the popover out side of scroll. I am using angular popover.
If I use position fixed instead of absolute it always open aspect of window and I don't want it.
This is an aspect of how CSS works. You are using incompatible CSS techniques. A child element (popover) that is absolutely positioned cannot be rendered outside a parent element boundary with overflow restrictions (hidden or scroll). The overflow property tells the browser to enforce rendering restrictions on all child elements except ones with "fixed" position.
If you show your code, we can probably help you achieve your goal with some modifications.
Edit
With the example provided, all that needs to be done is to add a CSS rule to the .sectionone element for position: static
.sectionOne {
position: static; // solution
overflow-x: scroll; // in example provided
}
.table {
width:1000px; // in example provided
}
Related
When I create Web Components the default size is 0x0, despite containing elements.
For example here my element is 0x0:
But when I hover over the button contained within then you can see the button does have a width and height:
So my question is how can I make the custom element the same size as the child element?
Why does this happen?
I suspect it is due to the shador DOM and <slot>, but surly there must be a trick to give the custom element the correct height?
Many thanks
By default, custom elements aren't blocks. You need to explicitly set display: block; property in CSS, like this:
juel-menu {
display: block;
}
I created an example on StackBlitz... The fault was mine, the <slot> is inside an absolutely positioned <div> inside the shadow root... Silly me!
disclaimer: I know that fixed elements are not ment to take theire own space in the flow of a page but i think i need it anyway.
Question:
I try to have my nav in a Grid which has the height of 100vh When I press the trigger element the whole grid slides to the side and reveals the Navigation by adding a class with js. I want the whole viewport container to be in a fixed position but as I set it to position: fixed; all of the content below will overflow the container as it should by default behavior.
is there a way to "clearfix" this overflow?
I aswell want to hide it again with a "onscroll" event, so just changing the backgroundcolor is no option for me.
One way could be to change the overflow permission in the container with something like:
someDiv{
<!---Your nav should be wrapped with this-->
position: fixed;
overflow: hidden !important;
}
Then, add an onClick to your nav so when the nav is accessed, the overflow is changed
document.getElementById('someDiv').onclick = function(){
document.getElementById('someDiv').style.overflow = 'visible';
}
Not quite sure if this is what you are after.
My biggest problem here is to express what I want, so please free to alter the formulation / suggestion correct wording for things.
On mobile I wish my page to be only vertically scrollable (page width and view port width are the same. A bug is causing an element adding more width than it should. I have identified the culprit element, when I set this element style to "display:none;" the display is correct (no horizontal scroll), when I don't I get an horizontal scroll.
To make it clear, with ".culpritElement {display: none}":
With culpritElement visible:
culpritElement is generated with some inline style by a third party library that I don't want to tweak. Is there a CSS directive to set to make the element visible but out of the positioning flow of the others (and page size computing).
You could set .culpritElement { max-width: 100vw; overflow-x: hidden; }
Or you could apply the above css style to its parent element
I have a website at filmblurb.org.
The page-container of my site extends to the bottom of the window when you scroll out to make for a 100% CSS layout style, but for some reason even when the height is 100% for both the body and tag, those two elements go about halfway down the page and then stop when the viewport is zoomed out. When I'm profiling those elements in Google Inspect Element that is. My page-container is currently min-height: 100%, but that for some reason actually does extend to the bottom of the viewport when zoomed out.
I've also taken screenshots of what I'm seeing to give you a better idea. Here they are [link]i917.photobucket.com/albums/ad16/jtarr523/… (for the body) and
(for the HTML)...Both are not extending to the bottom.
Anybody know how to fix this?
I would appreciate it.
min-height: 100% on the html element means that that element will be at least as tall as the viewport. It does not mean that it will always extend to the bottom. If you scroll down, then you may still be able to scroll below the bottom of the <html> element.
The only way to prevent this (short of JavaScript) is to ensure that all elements on the page (that is, everything that could possibly cause a scrollbar) is kept within the html element. A simple way to force this is to put overflow: hidden on your html element:
body {
overflow: hidden;
}
If the problem is being caused by a float, then that will solve it. If the problem is caused by an absolute-positioned element or a negative bottom margin on the last element, then that will replace your problem with a more serious one: the page will be cut off at the bottom of the html element. You will then have to find the problem element some other way.
(The same applies to the body element; it will need its own overflow: hidden; to ensure that nothing can extend beyond it.)
Not sure exactly if it would work with browser zoom, but in my experience (and according to this question) you need to set the html tag height to 100% if you are setting container elements to min-height: 100%.
html { height: 100%; }
body { min-height: 100%; }
Replace body with a reference to your main container and it should still work. As far as I can tell there are no adverse reactions to setting html to 100%; it doesn't cut the page off or mess up any other styles.
Like I said, I'm not 100% sure this is related to your problem, but it's probably worth a shot.
My page http://dl.dropbox.com/u/49912546/anchor_link_test.htm displays differently when an anchor is used too http://dl.dropbox.com/u/49912546/anchor_link_test.htm#vanquish-s - content below an image is moved up slightly
This happens consistently across browsers, so there must be something in the spec that means this is the correct behaviour... but what? It only happens when an image is loaded (if the src is invalid the bug doesn't happen).
*edit
By the way, I found a workaround already http://dl.dropbox.com/u/49912546/anchor_link_test_solved.htm#vanquish-s, so I'm not looking for bug fix - I just want to know why all browsers have CSS implementations that cause this behaviour.
half content appears to shift upwards because the .panel
its contained within is set to overflow:hidden & has content that is being clipped as a result.
When the browser attempts to identify the element in the named anchor it sees thats its within a container that can clip its content & so scrolls that element to the top to ensure its visible.
For example if you were to add any elements within contentInner but above the named h3, then they would not be visible on the page when the named anchor was used as half content is scrolled such that h3 is at the top. (The same result as if overflow:scroll were applied; the named anchor causes the scrollbar to position itself in line with the top of the named element)
In my case removing overflow:hidden worked
#maincontent {
width: 100%;
background: transparent;
/* overflow: hidden; */
clear:both;
}