I am creating a Pop Up in React but maybe the position of some divs is incorrect. I need my popup to be centered as it is with fixed width and height, but the shadow background doesn't work. Please help me
<div className={style.container}>
<div className={style.bg}>
<div className={style.popup}>
<div className={style.popup_inner}>
<div className={style.center}>
<h5 className={style.textStyle}>Save changes to channel?</h5>
<h5 className={style.textStyle}>‘Sapyens Night’</h5>
<hr className={style.line} />
<p>
If you confirm changes will be automatically presented<br/>
to to all users.<br/>
If you change audio source, small audio disruption
might<br/>
occur.
</p>
<div className={style.buttons}> <button className={style.back}
onClick={this.props.closePopup}>
Back
</button>
<button className={style.goLive}>Save</button></div>
</div>
</div>
</div>
</div>
</div>
.popup {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.popup_inner {
position: absolute;
width: 433px;
height: 342px;
border-radius: 20px;
background: white;
border: 1px solid #502f7e;
}
.bg{
position: relative;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
Try to do like this
.bg{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
Related
I created cart modal, when i add multiple items to it, the style looks weird because the firs item cant see in the modal. probably i have some style issue. i am gonna share the code of my modal and styles. The screenshot i took probably has 4 product but shows three
<div onClick={this.props.onClick} className={modalStyles.darkBg}/>
<div className={modalStyles.centered}>
<div className={modalStyles.modal}>
<p className={modalStyles.heading}>
My bags, {this.props.cart.length} items
</p>
{this.props.cart.map((item, index) => (
<div className={modalStyles.modalBody} key={item.id}>
<div className={modalStyles.row1}>
<div className={modalStyles.row2Child}>
<button type="button"onClick={()=> {this.props.addToCartWithQty(item)}}>+
</button>
<p>{item.qty}</p>
<button type="button" onClick={()=> {this.props.removeFromCart(index)}}>-
</button>
</div>
<img src={item.gallery[0]} alt="Avatar"/>
</div>
</div>
))}
</div>
</div>
Styles:
.darkBg {
position: fixed;
background-color: rgba(0, 0, 0, 0.2);
width: 100vw;
height: 100vh;
z-index: 10;
top: 0;
left: 0;
}
.centered {
position: absolute;
top: 35%;
right: 0;
transform: translate(-50%, -50%);
z-index: 10;
}
.modal {
width: 350px;
height: auto;
background: white;
color: white;
z-index: 10;
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
}
.heading {
margin: 0;
padding: 10px;
color: #2c3e50;
font-weight: 500;
font-size: 18px;
text-align: left;
}
.modalBody {
display: flex;
flex-direction: column;
padding: 10px;
font-size: 14px;
color: #2c3e50;
gap: 10px;
}
On .modal class You need to add max-height instead of height and overflow-y should be set to scroll to be able to scroll not visible elements.
max-height: 80vh;
overflow-y: scroll;
you can wrap items in 1 div and give overflow-y: scroll; it will make that div scrollable with all items in it.
I've been looking for some examples (here) to help guide me with drawing two circles with a line between them (sort of like point A to point B graphic) using CSS. I'm very new to custom-CSS so forgive me if this is something simple I am missing in my config.
I have the CSS created with the graphic being displayed on my webpage, but depending on screen-size, my outer-circle can become deformed - I think it has something to do with my display: flex maybe? See the following screenshots:
Good design
Bad design
Here is my CSS code specific to making the graphic
.circuit-graphic {
display: flex;
align-items: center;
justify-content: center;
}
.circuit-graphic .circle {
width: 60px;
height: 60px;
border: 2px solid #dc3545;
border-radius: 50%;
position: relative;
}
.circuit-graphic .circle:before {
display: block;
content: '';
width: 40px;
height: 40px;
background: #dc3545;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circuit-graphic .line {
width: 100%;
border: 5px solid #dc3545;
}
and I set it in my HTML like so in pseudo
<div class="row align-items-center">
<div class="col-auto">
[.........]
</div>
<div class="col">
<div class="circuit-graphic">
<div class="circle"></div>
<div class="line"></div>
<div class="circle"></div>
</div>
</div>
<div class="col-auto">
[.........]
</div>
</div>
The goal I am trying to achieve is have two boxes on either side of the screen, with this graphic between them that can change it's width dynamically based on the screen size.
See my working example here.
The problem is in your line, the line is trying to occupy 100% of the space, in these cases what you need is to fill, this is achieved by making the element flex, and flex: 1, like this
.circuit-graphic .line {
display: flex;
flex: 1;
}
You can see this better here
.circuit-graphic {
display: flex;
align-items: center;
justify-content: space-between;
}
.circuit-graphic .circle {
width: 60px;
height: 60px;
border: 2px solid #dc3545;
border-radius: 50%;
position: relative;
}
.circuit-graphic .circle:before {
display: block;
content: '';
width: 40px;
height: 40px;
background: #dc3545;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circuit-graphic .line {
border: 5px solid #dc3545;
display: flex;
flex: 1;
}
<div class="row align-items-center">
<div class="col-auto">
</div>
<div class="col">
<div class="circuit-graphic">
<div class="circle"></div>
<div class="line"></div>
<div class="circle"></div>
</div>
</div>
<div class="col-auto">
</div>
</div>
I've just set min and max widths constant by adding min-width and max-width.
UPD: the solution above is better with adding values to flex-shrink and flex-grow, but the balls will still start shrinking at the minimum screen sizes. So, the solution of mine fix this problem. But I guess hardcoding of min- and max-width is not the best solution.
.circuit-graphic .circle {
min-width: 60px;
max-width: 60px;
height: 60px;
border: 2px solid #dc3545;
border-radius: 50%;
position: relative;
}
I'm currently facing an issue regarding a Text over an image.
Here is my css code :
.box{
position: relative;
display: inline-block; /* Make the width of box same as image */
}
.box .text{
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 40%; /* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial,sans-serif;
color: #fff;
width: 60%; /* Set the width of the positioned div */
}
Here is my html :
<div class="box">
<img src="name.jpg" alt="">
<div class="text">
SpinnerBait Brochet
</div>
</div>
Here is how it looks like in codepen.io :
BUT, when i'm adding my html in my wordpress I have a completely different rendering.
I do have my picture where I added it in the page BUT my text is in the middle of my page (and not in the middle of my image...)
Do you have any idea what could be the issue ?
Thanks
By looking at your question my guess is that you are trying to center the text on top of the image.
Try the following:
HTML:
<div class="box">
<img src="https://via.placeholder.com/350" alt="Placeholder">
<div class="text">
SpinnerBait Brochet
</div>
</div>
CSS:
.box {
display: inline-block;
position: relative;
}
.box .text {
display: inline;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #000;
color: #fff;
}
CodePen here.
Essentially what the CSS is doing is:
Positioning the text absolutely in the center of it's relative container:
display: inline;
position: absolute;
top: 50%;
left: 50%;
Changing the starting position of the X and Y axes points to the true center of the element.
transform: translate(-50%, -50%);
I'm getting trouble with drawing a line through a circle.
I'd like to have a line that also adapt to the div height, this is what I tried so far :
<html>
<body>
<div class="item">
<div class="item__level opacity-10">
<div class="item__level__round"></div>
<div class="item__level__line"></div>
</div>
</div>
</body>
</html>
And CSS
.item{
width: 100%;
height: 40px;
}
.item__level{
width: 10%;
position: relative;
height: 100%;
}
.item__level__round{
width: 20px;
height: 20px;
background: #1F8AEE;
border-radius: 50%;
position: absolute;
transform: translateX(50%) translateY(50%);
}
.item__level__line{
position: absolute;
border-left: 2px solid red;
left: 12%;
top: 0;
height: 100%;
}
https://codepen.io/anon/pen/eQMdjm
It seems like the red line is not perfectly in the center of the circle, is it an optic illusion ? I'm on this since a while
update - Sorry, I just reread your question. Yea the line could be off by a pixel depending on the widths. Check this fiddle for an example https://jsfiddle.net/Hastig/pzo4fe2a/ (red line is 20px wide and blue line is 21px. It doesn't cut a pixel in half so the full 1px difference appears to the right (in FF) instead of a half pixel on left and the second half on right. If you're doing percentage widths and heights the issue can occur in responsive design because you can't control the device width.
original answer - Try adding left: 50% and top 50% to your circle and line and use the -50% to compensate and keep it centered.
.container {
display: relative;
width: 100vw;
height: 100vh;
}
.circle {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: skyblue;
border-radius: 100%;
}
.line {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 2%;
height: 100%;
background-color: skyblue;
}
<div class="container">
<div class="circle"></div>
<div class="line"></div>
</div>
Play with the fiddle pane to see it respond to viewscreen size.
https://jsfiddle.net/Hastig/7d8ebqxm/
I am trying to align vertically header text next to an image. My problem is when I decrease the window width and the text wraps (height is higher than image height) it starts to align to the top of image
.half {
width: 50%;
}
h4 {
font-size: 40px;
}
<div class="half">
<div class="advantages_header">
<img class="advantages_icon" src="http://placehold.it/90x90" />
<h4>HEADER TEXT MAYBE LONG</h4>
</div>
</div>
Oh! I just figured out by myself, thanks for reading, I hope it will help someone :)
.half {
width: 50%;
}
.advantages_header {
position: relative;
height: 90px;
}
h4 {
left: 110px;
margin-right: 110px;
font-size: 40px;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
img {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
<div class="half">
<div class="advantages_header">
<img class="advantages_icon" src="http://placehold.it/90x90" />
<h4>HEADER TEXT MAYBE LONG</h4>
</div>
</div>