My application shows a UI-Bootstrap modal inside a div, above it there is navigation bar, usually when I start the modal the entire background is applied with a backdrop (dimmer), my modal is not appended to body but rather to the div like so (modal options):
appendTo: angular.element(document.querySelector("#mainContent")),
backdrop: true,
plunker
#mainContent is several levels down the DOM from body, but the entire viewport is dimmed by the backdrop. Is there a way to apply the backdrop (or even the entire modal assembly) to only 1 element instead of the entire viewport?
You have to change the CSS part of the backdrop to this and it will only cover the first parent container that doesn't have position:absolute
.modal-backdrop {
position: relative;
width: 100%;
height: 100%;
z-index: 1040;
background-color: #000;
}
I have added it on the plunker
Related
We have one small chat in site where some background image is there in chat
it looks cool but when customer clicks on order status it asks for order no but when this content is added background image disappears
we tried several thread in stackoverflow but nothing is working
we tried adding these things
background-size: cover;
/* background-size: 100% 100%; */
background-repeat: repeat;
when we increase the height to 1000% it works and shows image but then our scrollTop goes to wrong place
here is our code and
class of interest
pushdaddy-body pushy-whatsapp-body
.pushy-whatsapp-body:before {
display: block;
position: absolute;
content: "";
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 0;
opacity: .08;
background-image: url(https://cdn.shopify.com/s/files/1/0033/3538/9233/files/whatsapp99.png?v=1623221870);
here is live site where you can test
https://itsneotpras.myshopify.com/
click on chat and just click on order status
Don't use an absolute :before with height 100%, because 100% is relative to the parent height.
Instead here's three solutions:
1. New common parent element
Create another simple DIV wrapper with min-height: 100% that will be the new parent of your messages. That way, the min-height will be relative to the parent, but as soon you'll have more messages - it will grow as the content grows. Also don't make it position absolute.
PS: The background will move with the scroll!
2. Make it sticky
Add to your :before pseudo:
content: "";
position: sticky; /* instead of absolute */
PS: The background will not move with the scroll!
3. Parent background
Another way, if you want your background to be "fixed", change the background opacity in an image editor, and assign it to the .pushy-whatsapp-body element.
PS: The background will not move with the scroll!
As your box scrolls, your ::before element moves with it. I would take it off the ::before element and add it to the actual element's background, or modify how your ::before stays in place.
Can you just take it off the pseudo element? Put your background-image on the div class.
<div class="pushdaddy-body pushy-whatsapp-body"></div>
background-image: url("https://cdn.shopify.com/s/files/1/0033/3538/9233/files/whatsapp99.png?v=1623221870");
I have some svg files with position: "absolute" in my page, but whenever they're positioned close to the corners of my page they end up expanding the width of my Container element (I'm using Material UI React), I've tried using "maxWidth":"100vw" on the page container, with no success, as well as the prop maxWidth="lg" and "md". If possible I'd like the svg or img file to just disappear into the nothing without interacting in any way with its outside container https://gyazo.com/9d3d8cf86748ac434700ac0b0ceaf1c6
Have you considered doing something like this?
.container {
/* If for some reason the image doesn't fit, hide the overlap */
overflow: hidden;
}
/* Make image sit within it's container */
img {
height: auto;
width: 100%;
}
I have this UI element that opens a tooltip/popover thing when clicked. I would like the tooltip window to appear right below the UI element, but on mobile it should be aligned to the left and right side of the viewport instead of being centered under the "more…" button.
In other words, I would like to have:
.tooltip {
top: 100%; // appear right below the button
left: 10px; // 10px *from the edge of the window*
}
Is there a way to mix referentials like this? Have the top position be calculated based on a parent, while left and right are calculated based on the viewport?
(by the way I know I can do this with JavaScript but I wanted to look for a pure CSS solution first)
The best solution I have so far is to make sure that the parent that has position: relative and acts at the referential for the absolutely positioned tooltip spans the whole width of the viewport. This works but it means the tooltip can't just be a drop-in component that can be added anywhere in your app, which is what I was trying to achieve.
It’s possible with an extra parent element around the tooltip to position it vertically.
Working demo: https://codepen.io/paweldecowski/pen/vYXaXvN
<span>Anchor
<div class="tooltip-parent">
<div class="tooltip">Tooltip</div>
</div>
</span>
.tooltip-parent {
position: absolute;
left: 0;
right: 0;
}
.tooltip {
left: 10px;
position: relative;
}
Edit:
Actually, this will work without the parent element, too. Just position the tooltip absolutely:
.tooltip {
left: 10px;
position: absolute;
}
The tooltip will by default stick to the bottom of the anchor. Of course, you won’t be able to use top or bottom properties because they will be relative to the viewport, but you can adjust the vertical position with margin.
I have a parent with position:fixed; width/height:100%; overflow:auto and a child that also has position:fixed. When the parent's content overflows and the parent starts scrolling I would expect the child to stay fixed in relation to the viewport. It does not.
the scenario is a slide down panel on top of the content using css transforms. The slide-down panel has a close button that should stay in view while the panel's content scrolls. Change the .overlay-slidedown class on the .overlay element to .overlay-fade and, in that case, the close button will stay in it's place.
https://jsfiddle.net/xajk7uez/3/
If you add an extra layer within.overlay as a sibling to .overlay-close to only address the overflow-y: scroll; the position: fixed; on .overlay-close will work. This .overlay-content layer should also be 100% width/height
.overlay > .overlay-content {
width: 100%;
height: 100%;
overflow: auto;
}
See updated Fidle for the demo.
https://jsfiddle.net/n0wxfc60/2/
The Solution for your issue will be
placed the .overlay-close outside the .overlay
see my edits here https://jsfiddle.net/xajk7uez/5/
I believe this question addresses your issue.
Background
I have a small one-level CSS flyout menu (well, technically it's an expanding element). It is absolutely positioned at the bottom left of a parent absolutely-positioned element that is fairly narrow. See the second h1 element below:
<div id="controls">
<h1>Controls 1</h1>
<h1 id="size" class="poplinks button">
Size
<img src="">
<img src="">
<img src="">
</h1>
</div>
This is very simply turned into an expanding menu/flyout like so:
.poplinks:hover {
width:auto;
}
.poplinks a {
display:none;
}
.poplinks:hover a {
display:inline-block;
}
Problem
This results in the following button-like element:
The h1 has style width:48px;, and there is also a style rule to apply width:auto; to the h1 element upon hover, so it should be able to widen. However, upon hovering, the submenu is being forced to stay no wider than the parent element's width, when I'd like it to extend to the right (out of the parent's containing box).
What I want to see (obtained by moving the element outside the parent, but I would like it to remain inside for inheriting styling and so when I move the menu bar from the left to the top, it follows automatically):
Is this possible? Do you have any recommendations?
See this in action for yourself in a JS Fiddle.
Browsers
Note: I plan for this to work in Firefox, Chrome, and IE 8. I am doing the main styling in Firefox & Chrome and when basically done, will add conditional CSS to get IE to work right and look as close as I can.
Rationale
The reason I am positioning the parent menu absolutely is that I'm building an application-like page for displaying images. The page will be hosted within a parent Windows application and doesn't need a lot of identifying information: just to display the desired images. I chose to make the menu absolutely positioned rather than using inline-block or floats or some other method to get my menu columns into place (there are two). However, it doesn't have to be this way. If you have a suggestion for an alternate layout or strategy, I am all ears.
First, your #controls need overflow:visible. Then, #size should be given an explicit left instead of right. And finally, .poplinks needs white-space: nowrap to prevent the wrap.
http://jsfiddle.net/VaWeK/11/
I'm writing this answer because I might need it again in the future.
Although I've found this in the selected answer, it also mentions lots of other details asked by OP, and that somehow ended up hiding what was the important part to solve my problem.
What did the trick for me was the: white-space: nowrap.
I needed this for a dropdown component, which I think is a common use case.
The code below uses React and styled-components.
const styled = window.styled;
const LS = {};
LS.DropdownButton_DIV = styled.div`
position: relative;
width: 150px;
height: 30px;
display: flex;
align-items: center;
padding-left: 8px;
border: 1px solid silver;
user-select: none;
cursor: pointer;
margin-bottom: 100px;
`;
LS.Dropdown_DIV = styled.div`
position: absolute;
left: 0;
top: 100%;
display: ${props => props.open ? "block" : "none"};
`;
LS.DropdownItem_DIV = styled.div`
display: flex;
padding-left: 8px;
border: 1px solid silver;
/* THIS IS WHAT SOLVES THE PROBLEM */
white-space: ${props => props.noWrap ? "nowrap" : "initial"};
`;
function App() {
const [open1,setOpen1] = React.useState(false);
const [open2,setOpen2] = React.useState(false);
function toggleDropdown1() {
setOpen1((prevState) => !prevState);
}
function toggleDropdown2() {
setOpen2((prevState) => !prevState);
}
return(
<React.Fragment>
<LS.DropdownButton_DIV onClick={toggleDropdown1}>
Dropdown Button 1
<LS.Dropdown_DIV open={open1}>
<LS.DropdownItem_DIV>
Dropdown Item Longer Than Parent
</LS.DropdownItem_DIV>
</LS.Dropdown_DIV>
</LS.DropdownButton_DIV>
<LS.DropdownButton_DIV onClick={toggleDropdown2}>
Dropdown Button 2
<LS.Dropdown_DIV open={open2}>
<LS.DropdownItem_DIV noWrap={true}>
Dropdown Item Longer Than Parent
</LS.DropdownItem_DIV>
</LS.Dropdown_DIV>
</LS.DropdownButton_DIV>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById("root"));
* {
box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<script src="//unpkg.com/styled-components#4.0.1/dist/styled-components.min.js"></script>
<div id="root"/>
Two ways: you can either hardcode an absolutely defined width, or you can do a relative width that is greater than 100%. Width of 100% will be 100% of the containing div (as long as that div has a defined width). If this div has an absolute width, meaning it is defined with pixels instead of percentages or ems, then you can simply make the hover css wider than the parent div. For example, if your parent div is 100px wide, the hover on the child should be 200px wide or 200% or something like that.