I have created a Modal in which I add a Canvas from Recat Three Fiber.
The documentation says that Canvas should fill the parent's space.
To show it well, I added a yellow color to the Canvas parent as you can see in the picture.
However, Canvas doesn't want to fill that space.
The important thing is that when I change the size of the browser minimally, it works immediately.
Do I have something not defined in this way?
<Modal bodyStyle={{ height: "500px" }}>
<Content>
<Canvas
style={{
width: "100%",
height: "100%",
}}
>
<color attach="background" args={["skyblue"]} />
</Canvas>
</Content>
</Modal>;
const Content = styled.div`
width: 100%;
height: 100%;
background: yellow;
`;
IMAGE
Related
I'm trying to add the Next Image component to my project.
And I have a problem, the image disappears when I add layout='responsive'.
code:
<Box>
<Link href='/' >
<Image src='/images/logoDark.svg'
alt='navbar-logo'
width={260}
height={56}
layout='responsive'
/>
</Link>
</Box>
Is there a solution? or any other way to optimize images?
Based on what is found here (https://github.com/vercel/next.js/issues/19314), it seems layout='responsive' has no intrinsic size. So you will have to add a width to the containing element.
You need to wrap the next/image into a container with display:block, so that the image will be displayed.
set height and width for the parent of the Image component :
<Box width={263} height={56}>
<Link href='/' >
<Image src='/images/logoDark.svg'
alt='navbar-logo'
width={260}
height={56}
layout='responsive'
/>
</Link>
</Box>
ensure the parent element uses display: block in their stylesheet like Box component or div
Component
<div className="photo">
<Image
width={300}
height={300}
src="https:/images.unsplash.com/photo-1501432377862-3d0432b87a14?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
alt="photo"
layout="raw"
/>
</div>
<style jsx>{`
#media (max-width: 768px) {
.photo {
margin: 0 auto;
justify-content: center;
display: flex;
width: 200px;
height: 200px;
}
}
`}</style>
next.config.js
experimental: {
images: {
layoutRaw: true,
},
},
This worked for me, the image doesn't disappear and is responsive,
I got a problem with framer-motion. I have modal with overlay and I want to overlay have a fading in animation but modal-container (his child element) to have and scale animation (from 1px width and height to 100vh and 100vw). I would like to prevent somehow overlay from scaling and just change his opacity by animation. Do you have any ideas on how to prevent child from parent's animation?
I'm framer-motion very beginner so sorry for probably shitty code :D
my code:
<motion.div
layout
data-isOpen={isOpen}
className="parent"
ref={modalRef}
>
<ModalContainer
initial={{opacity:0}}
animate={animate}
>
<div className="w-100 d-flex justify-content-end">
<Close
onClick={() => {
closeModal();
clearAllBodyScrollLocks(modalRef);
}}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20.39 20.39"
>
<title>close</title>
<line
x1="16.39"
y1="16.39"
x2="4"
y2="4"
fill="none"
stroke="#000000"
strokeLinecap="round"
strokeMiterlimit="10"
strokeWidth="1"
/>
<line
x1="4"
y1="16.39"
x2="16.39"
y2="4"
fill="none"
stroke="#000000"
strokeLinecap="round"
strokeMiterlimit="10"
strokeWidth="1"
/>
</Close>
</div>
{children}
</ModalContainer>
</motion.div>
parent class :
.parent{
width: 1px;
height: 1px;
position: absolute;
justify-content: center;
align-items: center;
overflow: auto;
border-radius: 2%;
}
.parent[data-isOpen="true"] {
display: block;
background-color: rgba(0,0,0,0.3);
margin: auto;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left:0;
z-index:2;
border-radius: 2%;
padding: 4rem 0;
}
disclaimer: if you have any other idea how to make it better, please tell me (i have only just one requirement to make modal-container scaling from button, which opens modal. I mean it grows from his center to position fixed)
Thanks for help
If you're asking how to not have the overlay scale, then you just need to apply the scaling animation to the ModalContainer element, instead of the parent. But in that case, the modal will still fade in since its parent element is fading in. Is that what you want?
I think your solution will be to not have the modal be a child of the overlay. That way you can animate the opacity of the overlay, and the scale of the modal without either affecting the other.
If you want to keep them in the same component (you probably do), you could just have them both be siblings of the same parent element.
Structurally, something like this:
<div>
<Overlay animate={{opacity: isOpen ? 1 : 0}} />
<Modal animate={{scale: isOpen ? 1 : 0}} />
</div>
This question already has answers here:
Styling Google Maps InfoWindow
(8 answers)
Closed 2 years ago.
I want to change the style of infowindow:
creat a CSS file to change .gm-style .gm-style-iw-d and .gm-style .gm-style-iw-c proprty but nothing to chnage , i wnat to change or disable max-width ,over-flow:scroll , padding-right,... like this pic :
and i read this link: InfoWindowOptions and write this line for change maxWidth :
<InfoWindow options={{maxWidth:300}} onCloseClick={() => togelOpenCloseInfoWindos}>
but nothing to change.
and this is my code:
{isOpen &&
<InfoWindow options={{ maxWidth: 300 }} style={{ backgroundColor: 'red' }} onCloseClick={() => togelOpenCloseInfoWindos}>
<Grid container style={{ paddingLeft: 8, paddingRight: 8, }} xs={12} spacing={0} >
<Grid item xs={7} sm={8} zeroMinWidth>
<Typography noWrap component="p">
<Box fontWeight="bold">
{props.MyProps.locations.NICKNAME}</Box>
</Typography>
{/* <p className={classes.card_title}>{car.NICKNAME}</p> */}
</Grid>
<Grid item xs={5}>{speed_logo(props.MyProps.locations)}</Grid>
<Grid item xs={7} style={{ marginTop: -9 }}><p className={classes.card_time}>{timeToShow(props.MyProps.locations.SENTDATE)}</p></Grid>
<Grid item xs={5} style={{ marginTop: -9 }}>{tempture_logo(props.MyProps.locations)}</Grid>
<Grid xs={12}><Typography component='p' className={classes.card_Address}>{props.MyProps.locations.POSDESCRIPTION}</Typography></Grid> </Grid>
</InfoWindow>
}
please help me to change style of infoWindow
I'm not sure how to change your InfoWindow via element.style{} in the CSS file however I successfully override these values when I put it inside the .gm-style .gm-style-iw-c {} on the CSS file and appending !important on each line, like the following code:
.gm-style .gm-style-iw-c {
padding-right: 10px !important;
padding-bottom: 0px !important;
max-width: 500px !important;
max-height: 326px !important;
min-width: 0px !important;
position: absolute;
box-sizing: border-box;
overflow: hidden;
top: 0;
left: 0;
transform: translate(-50%,-100%);
background-color: #dd9191;
border-radius: 8px;
box-shadow: 0 2px 7px 1px rgba(0,0,0,0.3);
}
Note: This might be what you are looking for, however it is possible that class names will be changed by Google Maps Platform in the future.
As for the maxWidth options in the InfoWindow, I tried using it in my reactjs code without overriding it in my CSS file and it worked properly. Here is how it looks like in my code:
<InfoWindow onCloseClick={this.props.handleCloseCall} options= {{maxWidth : 100 }}>
<span>This is InfoWindow message!</span>
</InfoWindow>
Note: You need to change the YOUR_API_KEY_HERE string with your own API key in the index.js of the code provided for it to work properly.
Hope this helps!
The blue marked area takes up a lot of space. How can I adjust the height of the Toolbar?
Can you show by example?
Or how can I create a css file and import it into the toolbar. I need to change the height, I couldn't change whatever I did. please can you help with this?
There is almost no method I have not tried.
In short, I want to adjust the height of the Mtabletoolbar field marked in blue.
<MaterialTable
Toolbar: props => (
<div style={{ backgroundColor: 'blue', }}>
<MTableToolbar {...props} classes={{ customizeToolbar: "15px" }} />
</div>
),
/>
`
const styles = {
customizeToolbar: {
minHeight: "100px"
}
}
`
I have been trying for 2 days, please can you help with the subject?
I need to change the style structure below. especially I have to change the min-height
.MuiToolbar-regular {
min-height: 64px;
}
`
.MuiToolbar-root {
display: flex;
position: relative;
align-items: center;
}
.MuiToolbar-regular {
min-height: 56px;
}
#media (min-width:0px) and (orientation: landscape) {
.MuiToolbar-regular {
min-height: 48px;
}
}
#media (min-width:600px) {
.MuiToolbar-regular {
min-height: 64px;
}
}
.MuiToolbar-dense {
min-height: 48px;
}
`
Simply adjust the style of the element where blue appears,
and make the child vertical center as below:
<div
style={{
backgroundColor: "lightblue",
height: "200px",
display: "flex",
alignItems: "center"
}}
>
<MTableToolbar {...props} />
</div>
I use a Tabs with some TabPane in my code but the text stay always in Blue, I want to change it to grey.
I try several things but none fuction.
I try:
this for apply the text color with the parent:
<Tabs style={{ height: "fit-content",font: "#363636" }} >
and
<Tabs style={{ height: "fit-content",color: "#363636" }} >
this for each the children :
<TabPane tab={t("tabPanelGeneral/name")} key="1" style={{ color: "#363636" }}>
and
<TabPane tab={t("tabPanelGeneral/name")} key="1" style={{ font: "#363636" }}>
Putting it here if someone still needs it
You can use tabBarStyle prop to add custom css. source
To change the color of the active tab, You need to update color of the button:
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
color: #363636 !important;
font-weight: 500;
}
To change the color of the blue bottom bar:
.ant-tabs-ink-bar {
position: absolute;
background: #000000;
pointer-events: none;
}
if you change the color of the tab text then put CSS like this
demo codesandbox link you view demo
.ant-tabs-tab {
color: #363636 !important;
}
.ant-tabs-tab-active {
color: #363636 !important;
}
You can set
.ant-tabs-ink-bar {
background: none;
}
And use a custom-tab
.custom-tab{
height : fit-content;
color:#363636;
}
You can apply css for your active tab.
.ant-tabs-nav .ant-tabs-tab-active {
color: '#363636';
}
you simply can add classNames to your components and add their styles on your style sheet :
<Tabs className="custom-tab" >
and the style sheet :
.custom-tab{
height : fit-content;
color:#363636;
}