I have floating button with multiple layers background.
How can i disable area of floating button outside modal ( button use position: absolute )
On the modal container, you can use overflow: hidden to hide any overflowing content.
Like so:
.modal{
/*
other css properties
*/
overflow: hidden;
}
However in doing so, you will also be hiding all other content that overflows. If this is a problem for you, create a container around the object you want hidden, and position it on the bottom right of your modal, with a fixed width. Once you've done that, add the overflow: hidden property to that container's CSS.
Related
Im having a fixed left navbar and using flexbox for 2 columns, navbar and content.
Have to add a toggle button in the middle of navbar and content to toggle the navbar.
Trying to add the button
<button
(click)="clickToggle(clicked)"
....
But its not aligned as it should.
Someone can help ?
Code production below:
https://stackblitz.com/edit/demo-jqnmjn?file=app%2Fapp.component.html,app%2Fapp.component.css
So you want the button to be positioned as presented in the picture above?
One option would be to place the button inside of your aside tag. The aside tag then needs:
position: relative;
Then your button needs to be positioned absolutely:
position: absolute;
right: 0;
Adjust top or bottom values to position the button vertically. To have the button sit right in between you 2 columns you could eather use a negative right value. Or you could you could make use of the transform: translateX() function.
This is something that I observe on Chrome on mobile (Android). If I have a div with that's using sticky for the position property and is positioned relative to the bottom, the div will be properly aligned when the page is first loaded, but when scrolling the page so that the browser's navigation bar gets hidden, then the div will jump up and no longer be aligned to the bottom.
Here's an example, using this div
<div style="background-color: red; position: sticky; bottom: 0">Hello world!</div>
I suspect the position is not being recalculated once the viewport gets resized. Is this a bug or is this the intended behavior? What's a good way to trigger the repositioning of the div (ideally without JS)?
I haven't been able to find a solution without JS, so this is roughly what I'm currently using.
Inside the div that I wasn't to sticky to the bottom, I added a div with fixed position and transparent color
<div id="hiddenDiv" style="position: fixed; color: transparent;"></div>
And then add some code to change the contents on a resize event
var repositionKey = false;
function onResize() {
repositionKey = !repositionKey;
document.getElementById("hiddenDiv").innerHTML = repositionKey;
}
addEventListener("resize", onResize);
This seems to trigger the position recalculation for the parent element and keeps the sticky div in the right place.
In a simple page where there is no overflow property specified, if the content overflows the window scrollbars appear.
Is the overflow: auto or scroll applied by the browser by default to the HTML or to the BODY element?
Example:
div {
height: 200vh;
border: 10px solid;
}
<div></div>
overflow is always defaulted to visible on every element on which it is not specified.
The overflow property specifies whether to clip content, render
scrollbars or just display content when it overflows its block level
container.
Using the overflow property with a value different to visible (its
default) will create a new block formatting context. This is
technically necessary — if a float intersected with the scrolling
element it would forcibly rewrap the content. The rewrap would happen
after each scroll step, leading to a slow scrolling experience.
visible is however, different from scroll which enforces scrolling bars, even when no clipping occurs. Visible allows the content to be rendered outside the viewport, and allows scrolling bars to appear whenever content is overflowing the initial viewport.
In your example, body is the reason for the scrollbars. Your body's content is rendered outside of the viewport (the div inside it). Therefore, it automatically displays scrolling bars, specific to the body- the scrolling bars are being rendered on the viewport instead of the element itself.
Example:
html, body {
width: 200px;
height: 200px;
}
div {
background-color: #F00;
width: 300px;
height: 300px;
}
<div></div>
Quote is from: https://developer.mozilla.org/nl/docs/Web/CSS/overflow
Its default value is overflow:visible;
The overflow property controls what happens to content that breaks outside of its bounds. here's what you can set it to:
visible: content is not clipped when it proceeds outside its box.
This is the default value of the property.
hidden: overflowing content will be hidden.
scroll: similar to hidden except users will be able to scroll through
the hidden content. scroll-bar appear even if no content is there to scroll through.
auto: if the content proceeds outside its box then that content will
be hidden whilst a scroll bar should be visible for users to read
the rest of the content.
initial: uses the default value which is visible
inherit: sets the overflow to the value of its parent element.
Here are some good resources :
http://www.w3schools.com/jsref/prop_style_overflow.asp
https://developer.mozilla.org/en/docs/Web/CSS/overflow
When I give overflow: hidden to a <div> & swipe my finger vertically to scroll, it doesn't scroll on touch device in UC Browser & Android Default Browser.
Can we fix this via JavaScript?
Edit
I don't want to scroll inside the <div>. I want to scroll vertically in the document. But, when there is horizontal scroll bar in the <div>, & I try to scroll vertically, document doesn't scroll vertically.
How to fix this?
Well, that's normal, as overflow: hidden does exactly that: tell the browser not to display the content that overflows the element and not to let the content scroll.
If you want your content to not overflow the element, but be able to scroll, do this:
overflow: auto;
or
overflow: scroll;
The difference? auto will show scroll bars when needed (when the content is wider or higher than the container), while scroll will show scrollbars always. Of course, in a touch device there is no difference.
If what you want is to scroll vertically, but not horizontally, you can use the specific properties:
overflow-x: hidden; /*don't scroll, nor show the overflow content horizontally*/
overflow-y: auto; /*allow scrolling vertically when needed */
I have an application a sort of a toolbar which will appear at the bottom of screen with fixed positioning. But when I scroll a page all the way down, toolbar hides some links at the footer of the page. Now I can hide that bar, but I want that even without hiding none of the client page's link should get hidden behind toolbar.
Thus I want to attach a transparent div at the bottom of the page. I attach it just above body tag. I know it can mess with client's page, but just wanna experiment. I attach it with this style
style='width:100%; height:190px;'. This works fine, but if I give absolute positioning to the body, it gets all messed up.
So I want to know whether there is a way to attach a div to bottom of a page regardless of positioning of the main container. Is this achievable only using css or javascript should be used?
You can set the bottom attribute to 0px.
Use the following style for the div.
<div style="position: absolute; bottom: 0px; height: 120px; width: 300px;background-color: blue">