I'm working on a react JS app , and I'm using react-modal package . I don't know how to make the outside part of the Modal ,when it is opened, completely transparent .
This is the props that I pass it to the Modal :
<Modal
onRequestClose={() => {
this.setState({ modalIsOpen: false });
}}
isOpen={modalIsOpen}
className="Modal"
></Modal>
This is the CSS code :
.Modal {
text-decoration: none;
user-select: none;
align-self: center;
justify-content: center;
align-items: center;
border: 2px solid #040408;
border-radius: 30px;
background-color: white;
margin-top: 10%;
margin-bottom: auto;
width: 20.8%;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
outline: none;
padding-left: 2px;
padding-right: 2px;
}
And this is the result that I get :
I want my modal to look just like a popup.
Do you mean background of model to be transparent? like the grey part of picture? in this case you should put it inside another div.
<div className='transparent'><Modal/></div>
Otherwise I don't understand the question.
Maybe you want to make the div fixed and max size, so it cover all the screen.
Related
I have a problem with height of my website. My component has
height: 100vh;
property but there is a moment when child component becomes really long- in that case height doesn't change and component lands somewhere below on white background. Is there any way to let main component know he has to use new height? I'm adding image to show it better.
Code sample as requested:
return (
<div className="App">
<Navbar></Navbar>
<Container id="maincontainer" maxWidth="xl" sx={{border: (theme) => `1px solid ${theme.palette.divider}`,bgcolor: 'background.paper',boxShadow: 5}}>
<div id="inputcontainer">
<StepperForm
></StepperForm>
</div>
<div id="outputcontainer">
<ThreeScene
></ThreeScene>
</div>
</Container>
</div>
);
css:
.App {
text-align: center;
background-color: rgb(177, 177, 177);
min-height: 100vh;
}
.App-header {
background-color: #000000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
width: 100%;
}
.App-link {
color: #61dafb;
}
#maincontainer {
height: 100vh;
min-height: 100vh;
overflow: auto;
}
#inputcontainer {
width: 50%;
float: left;
height: 100vh;
text-align: left !important;
box-shadow: none !important;
background-color: white !important;
min-height: 100vh;
}
#outputcontainer {
width: 50%;
float: right;
height: 100vh;
min-height: 100vh;
}
What bothers me too is that my navbar shadow is being hidden:
Why are you declaring height to 100vh every time. This makes page too big and your components rendered between them seperated by 100vh margin.dont use 100vh your page automatically set its height if you want you can do
height:'auto',
And also try to elaborate your question more. Like we can't help you in your boxShadow because we can't see the code of it, also add images that are understandable
i'm trying to make a react project with styled components, and i want to use a radio button, but when i try to add css to the radio when it's checked it didn't work as i expected, can you help me?
const RadioGroup = styled.div`
border: solid 3px #332f35;
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: lighten(#332f35,40%);
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
input[type=radio]:checked + label{
color: lighten($bg,60%);
background: #ff9000;
}
input[type=radio] + label {
border-left: solid #a1a1a1;
}
`
this is the styled component i'm trying to use in the Radio button, thanks guys!
I am trying to create a component that I can insert as a vertical line between flex box columns. I need the height to be dynamic. I am setting the height=100% and setting align-self: stretch(because the flexbox is a row). Nothing is happening. The div gets a height of 0
This is the component
import styled from 'styled-components'
export default styled.div`
border-left: 3px solid gray;
height: 100%;
align-self: stretch;
width: 1px;
display: block;
margin-left: 20px;
margin-right: 20px;
`
And this is how I inject it
<VerticalLine></VerticalLine>
If I add some content to the component, then the line is only as tall as the content
<VerticalLine>a</VerticalLine>
You can remove the height, because flex is adjusting the height by themself:
.verticalLine {
border-left: 3px solid gray;
align-self: stretch;
width: 1px;
display: block;
margin-left: 20px;
margin-right: 20px;
}
See my example on jsFiddle
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.
These are AngularUI Bootstrap popovers, which are written in Angular instead of jQuery.
I have a popover in a plnkr that is working, but it's positioning is messed up. It is being cut in half by the page.
When I inspect the popover's CSS, I see some code which doesn't make any sense to me. I understand what it's doing, but where are these element.style properties coming from? They seem to be the problem.
element.style {
top: -139px;
left: 112px;
display: block;
}
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
line-break: auto;
}
There isn't even a scroll option available. Is there a way to position a popover so that the entirety of it appears on the page, regardless of where the button is?
In the element where you whant your popover displayed, add the following directive:
popover-append-to-body="true"
Like this:
<small popover="{{form.descripcion}}" popover-trigger="mouseenter" popover-append-to-body="true">
[{{form.status}}]
</small>
The element styling is set in the source of UI Bootstrap in the tooltip section.
Tooltips and popovers are not meant to store that much data which is why they just center it over the element that it is attached to.
EDIT
For this specific example you can add this CSS:
.popover-parent + .popover {
top: 0 !important;
}
.popover-parent + .popover .arrow {
top: 15px !important;
}
The most dynamic way would be to hook into the event that shows the tooltip and calculate the position of the popover then.