I want to use a dialog with an icon at the top such as this:
This is currently what I am getting:
Set the container overflow css property to visible
.popupContainer {
overflow: visible;
}
Or make the icon's position absolute and give it a proper z-index
.popupContainer {
position: relative;
}
.icon {
position: absolute;
margin-left: auto;
margin-right: auto;
z-index: 100;
}
Related
This problem is costing my sanity.
I want to use the React Fluent UI Carousel component with thumbnails and place it in the middle of my container, everything works fine till I add more than 8 slides. The carousel moves to the left side of the screen and eventually disappears from the viewport.
I am using the default code snippet from Fluent UI IS AVAILABLE HEREFluent ui thumbnail carousel
enter image description here
I have solved the problem, just overwrite the following properties:
.ln {
width: 600px;
}
.ui-carousel__navigation {
margin-top: -55px !important;
position: absolute;
display: flex;
flex-flow: wrap;
justify-content: space-between;
width: 1000px;
margin-left: -200px;
}
.nb {
transform:none !important;
}
.ol {
transform: none !important;
}
.nc {
transform: none !important;
}
The modal's text is rendered correctly, however the background is rendered only within the range of the screen size, when you scroll it's transparent.
I have noticed that the background is rendered only when some action happens like click on a button on that modal or even when i open the Developer Tools.
This works as expected in other browsers though.
Here is the modal container's css
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
overflow: auto;
background-color: rgba(0,0,0,.7);
cursor: pointer;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
And the modal itself
background-color: ${colors.white};
display: inline-block;
margin-top: 50px;
text-align: left;
cursor: initial;
Any ideas what may be the case with IE's rendering?
I found a way to sort this out.
Inside this modal I am actually rendering another div (which has different composition of text and actions in different pages) that inherits this css:
background-color: ${colors.white};
display: inline-block;
margin-top: 50px;
text-align: left;
cursor: initial;
But apparently when you scroll down and as the new content loads the style does not apply. After adding once again background-color: ${colors.white}; to the div rendered inside the modal it's all looking nice.
Following link is affected: https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=2753787&tc_deviceCategory=undefined&template_layout_id=5699672553&updated=1523614982274
We are experiencing problems with a form and its parent div. We tried to bring in a frosted glas style to the parent div landingboxForm, but if we are working with pseudoelements, nothing happens.
The tutorial is from here https://medium.com/#AmJustSam/how-to-do-css-only-frosted-glass-effect-e2666bafab91 and is working well for others. I just do not succeed in port it for our landing page.
Does anybody know why the :before div tag is just grey in the Chrome inspector and why it does not appear?
CSS:
.lp-sorba {
background-size: cover;
position: absolute;
width: 100%;
top: 0;
left: 0;
bottom: 0;
height: 900px !important;
}
.lp-sorba .landingpageHeader {
height: 80px;
background: #1d89d2;
}
.lp-sorba #hs-link-logo > img {
margin-top: 22px;
}
.lp-sorba .landingboxForm:before {
content:" ";
background: inherit;
left: 0;
right: 0;
top: 0;
height: 100%;
width: 100%;
bottom: 0;
box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
filter: blur(10px) !important;
}
.lp-sorba .landingboxForm {
background: inherit;
width: 100%;
height: 100%;
position: relative;
border-radius: 5px;
box-shadow: 0 23px 40px rgba(0,0,0,0.2);
padding: 20px;
border: 0.5px solid #edebeb;
}
As for your question
why the :before div tag is just grey in the Chrome inspector and why it does not appear?
Your pseudo element is collapsing right know. Add position: absolute; to the .lp-sorba .landingboxForm:before rule.
But that won't solve your underlying problem / won't create the frosted glass effect.
The way how filters work is: they get applied to the element itself only, not the ones lying behind it.
In the example from Medium/Codepen, the form element inherits the background from the main element. By that it's pseudo element may apply a filter to it.
In your setup, the form is positioned absolute, while the image tag is also positioned absolute. The forms filter won't bleed into that image tag.
Revisit the example:
apply a background image to a parent container
inherit that in the form
pseudo filter on the form will blur the forms inherited background
I would like to know how to move the close button in lightbox 2 to the top?
.lb-data .lb-close{display:block;
float:right;
width:30px;
height:30px;
background:url(../images/close.png) top right no-repeat;
text-align:right;
outline:0;
filter:alpha(Opacity=70);
opacity:.7;
-webkit-transition:opacity .2s;
-moz-transition:opacity .2s;
-o-transition:opacity .2s;transition:opacity .2s}
add this code to your css:
.lb-data .lb-close {
position: absolute;
top: -50px;
margin-right: -50px;
}
you should play with the pixel sizes to locate it exactlly where you want.
I just got into CSS animations with ngAnimate. Cool stuff! I'm now struggling to figure out how to control the animation of a sibling element affected by some animation.
Plunker: https://plnkr.co/edit/XqpMPklO2SDlZQ1GIJ5Z?p=preview
For example, in the above plunker, the top div animates away nicely, but the bottom div doesn't. Is there a way to also animate the bottom div when the top is animated?
div.top {
width: 100%;
background-color: red;
height: 200px;
position: relative;
transition: 1s linear all;
opacity: 1;
top: 0;
}
div.bottom {
widows: 100%;
background-color: blue;
height: 300px;
}
button {
width: 100%;
padding: 25px;
}
div.top.ng-hide {
opacity: 0;
top: -1000px;
}
The problem has to do with the top div dissapearing suddenly. Make it transition to height: 0 and the bottom div will follow it's motion.
div.top.ng-hide {
/* ... */
height: 0;
}
Plnkr Fork