I have a below pop component, the problem in this component is when in the mobile view, when the user clicks on the input field, the modal goes up because the android keypad shows.
since I have the height of the modal to have the mobile keypad also. How can I render the keypad inside the modal, so that the modal sticks as like
App.js
import { useState } from "react";
import Modal from "./Modal";
import "./styles.css";
export default function App() {
const [isModalOpen, setIsModalOpen] = useState(false);
const onToggleModal = () => {
setIsModalOpen((prevState) => !prevState);
};
return (
<div className="App">
<button onClick={onToggleModal}>Click me to open modal</button>
{isModalOpen ? (
<Modal show={isModalOpen} close={onToggleModal}>
<input />
</Modal>
) : null}
</div>
);
}
If you see the sandbox, I think is it because of the CSS of giving border as 0 and position as fixed ?
Any help is appreciated
sandbox
Related
How can I write on the picture
I have a small card that contains a picture and I want to write on the picture, how can I do that
import React from "react";
import {
Box, Image, Badge, Text, Stack,
useColorMode, Button, Flex, Spacer
}
from "#chakra-ui/react";
const InterestCard = () => {
// Hook to toggle dark mode
const { colorMode, toggleColorMode } = useColorMode();
return (
<Box w="130.7px" rounded="20px"
h='125.04px'
overflow="hidden" mt={10}>
<Image src="https://media.geeksforgeeks.org/wp-content/uploads/20210727094649/img1.jpg"
alt="Card Image" boxSize="300px">
</Image>
</Box>
);
}
export default InterestCard;
I would like to center the selected image instead of having it showing on the left hand side.
See image of behaviour:
I'm using the packages from the sandbox below in Next.js 11 with TailwindCSS 2.2.4:
https://codesandbox.io/s/5vn3lvz2n4
Dependencies:
"react-images": "^1.2.0-beta.7",
"react-photo-gallery": "^8.0.0"
I'm having a hard time targeting the CSS class, but I narrowed down to:
class="react-images__view react-images__view--isModal css-1qrom1v css-1ycyyax" using the browser dev tool in Safari.
Below is my PhotoLibrary file:
import React, { useState, useCallback } from "react";
import Gallery from "react-photo-gallery";
import Carousel, { Modal, ModalGateway } from "react-images";
import { photos } from "../data/photoData";
export default function PhotoLibrary() {
const [currentImage, setCurrentImage] = useState(0);
const [viewerIsOpen, setViewerIsOpen] = useState(false);
const openLightbox = useCallback((event, { photo, index }) => {
setCurrentImage(index);
setViewerIsOpen(true);
}, []);
const closeLightbox = () => {
setCurrentImage(0);
setViewerIsOpen(false);
};
return (
<div>
<Gallery photos={photos} onClick={openLightbox} />
<ModalGateway>
{viewerIsOpen ? (
<Modal onClose={closeLightbox}>
<Carousel
currentIndex={currentImage}
views={photos.map((x) => ({
...x,
srcset: x.srcSet,
caption: x.title,
}))}
/>
</Modal>
) : null}
</ModalGateway>
</div>
);
}
Has anyone played around with the carousel in Next.js and able to see what I'm doing wrong? If you have a better solution I'm open to that too.
Add the following CSS to your globals.css file.
.react-images__view-image--isModal {
display: inline-block;
left: 50%
}
As the title states, I would like for a MaterialUI FAB button to be centered and stay centered with resizing. The current placement is shown in the screenshot below (off-center) and it does not re-size with window change.
Here is the current FAB button component. It is a child component and I have shown the parent below as well.
I cannot get "justifyContent: "center"" to work as it normally does, as a note.
Any help on centering this and allowing it to scale with window size is welcome! thanks!
FAB button child component
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Fab from '#material-ui/core/Fab';
import NavigationIcon from '#material-ui/icons/Navigation';
import { navigate } from "#reach/router";
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
position: 'fixed',
bottom: "5vh",
right: "50vw",
backgroundColor: 'green',
width: "20vw"
},
},
fab:{
// fontSize: "35px"
},
extendedIcon: {
marginRight: theme.spacing(1),
// fontSize: "35px"
},
}));
export default function AddListingIcon() {
const classes = useStyles();
return (
<div className={classes.root}>
<Fab color="green" aria-label="add" size="large" variant="extended" className={classes.fab} >
<NavigationIcon onClick={() => {
navigate("/ChooseACategory")}} className={classes.extendedIcon}/>
Get Started!
</Fab>
</div>
)
}
Parent component which contains the FAB button child component
import React from "react";
import ReactNavbar from "../components/Navbar";
import Intro from "../components/Intro";
import GetStartedIcon from "../components/GetStartedIcon"
export default function GetStarted({ setSignedIn }) {
return (
<div>
<ReactNavbar setSignedIn={setSignedIn} />
<Intro />
<GetStartedIcon/>
</div>
);
}
Your code works as your wrote it (obviously). The right side of your button is centered as it should be.
You rather need to wrap the Button in a Flexbox. You can use the MUI Grid for that with a width:'100%', position:fixed and the prop justify="center".
Here is a jsfiddle with plain css
https://jsfiddle.net/rq6kvw12/
I have a login page where I set border colors on focus and I want to keep the focus even when I'm clicking my eye password toggleI have attached a gif that shows how I loose my focus state when toggling my eye
One way to do it is to store a ref to the password input field, and call focus() on it in the eye's onClick handler:
import React, { useRef } from "react";
const Eye = ({ onClick }) => <span onClick={onClick}>eye</span>;
export default function App() {
const inputRef = useRef();
const handleEyeClick = () => {
if (inputRef.current) {
inputRef.current.focus();
}
};
return (
<div>
<input ref={inputRef} type="text" />
<Eye onClick={handleEyeClick} />
</div>
);
}
I am using React cards to show dynamic cards. I wanted to show 4 cards for desktop view at one row and 1 card for the mobile view but it is always coming vertically no cards are shown horizontally
The Container Component Of The card
import React from 'react'
import SongCard from '../SongCard'
import {
CardDeck
} from 'reactstrap';
function Popular({ popular }) {
return (
<div>
{popular.map((post) =>
<div key={post.etag}>
{
<CardDeck style={{display: 'flex', flexDirection: 'row',justifyContent: 'right'}}>
<SongCard
Title={post.snippet.title}
VideoId={post.id.videoId}
Image={post.snippet.thumbnails.high.url}
ChannelTitle={post.snippet.channelTitle} />
</CardDeck>
}
</div>)
}
</div>
)
}
export default Popular
And the card component is
import React from 'react'
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle
} from 'reactstrap';
function SongCard({ Title, VideoId, Image, ChannelTitle }) {
return (
<div>
<Card style={{maxWidth:'30em',flex: '1'}}>
<CardImg top width="100%" src={Image} alt="image" />
<CardBody>
<CardTitle>{Title}</CardTitle>
<CardSubtitle>{ChannelTitle}</CardSubtitle>
<CardText></CardText>
</CardBody>
</Card>
</div>
)
}
export default SongCard
First, in SongCard you might not need to encapsulate your card component in a div, it make your style for Card kind of unavailable because the div is by default full Width.
Secondly, CardDeck should be outside of the map loop cause you create a new CardDeck each post and it might not be what you want. to put you "key={post.etag}" directly in SongCard instead.
I also don't recommend to add custom style in style in CardDeck because you will break the default layout for all devices.
import React from 'react'
import SongCard from '../SongCard'
import {
CardDeck
} from 'reactstrap';
function Popular({ popular }) {
return (
<CardDeck>
{popular.map((post) =>
<SongCard
key={post.etag}
Title={post.snippet.title}
VideoId={post.id.videoId}
Image={post.snippet.thumbnails.high.url}
ChannelTitle={post.snippet.channelTitle} />
</div>)
}
</CardDeck>
)
}
export default Popular
And
import React from 'react'
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle
} from 'reactstrap';
function SongCard({ Title, VideoId, Image, ChannelTitle }) {
return (
<Card>
<CardImg top src={Image} alt="image" />
<CardBody>
<CardTitle>{Title}</CardTitle>
<CardSubtitle>{ChannelTitle}</CardSubtitle>
<CardText></CardText>
</CardBody>
</Card>
)
}
export default SongCard