I'm creating a reusable component using Reactstrap. What I want to do is display an image in the input field as below
What happens is this
How to get the image to the front??
InputFieldWithImage.js
import {
Input,
InputGroup,
InputGroupAddon,
InputGroupText,
Button
} from 'reactstrap';
import { Form, FormGroup } from 'reactstrap';
import Amy from './../../assets/images/Amy.png';
import Image from 'react-bootstrap/Image';
function InputFieldWithImage(props) {
const [inputType] = useState(props.type);
const [inputValue, setInputValue] = useState('');
function handleChange(event) {
console.log('Input.js');
// console.log(inputValue);
setInputValue(event.target.value);
if (props.onChange) props.onChange(event);
}
return (
<>
<InputGroup>
<Input
type={inputType}
value={inputValue}
name="input-form"
onChange={handleChange}
class="inputclass"
/>
<InputGroupAddon addonType="append" >
<Image
style={{ width:50, height: 50, marginLeft: -70 }}
src={Amy}
roundedCircle
/>
</InputGroupAddon>
</InputGroup>
</>
);
}
export default InputFieldWithImage;
You could simply handle this issue using CSS by giving the picture "position: absolute"
and the Input container "position: "relative".
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;
My goal is to have my header and content to be 100% of the width of the page. I have no css files but instead am using mantine for styles.
I've tried editing widths to 100% on different components with no luck.
The end goal once I've got my page using 100% width is using display grid to organise my components in columns.
I would like my WeatherComponent to fill the full width so say gridColumnStart: 1 to 4
TodoList to start and end 1 to 2
and NewsComponent to start and end 2 to 4.
This is my dashboard where components are rendered:
import { Container } from '#mantine/core';
import { Group } from '#mantine/core';
import NewsComponent from '../components/NewsComponent';
import TodoList from '../components/TodoList';
import WeatherComponent from '../components/WeatherComponent';
const Dashboard = () => {
return (
<Container style={{ display: 'grid', gap: '20px' }}>
<Group style={{ gridColumn: '1 / span 3' }}>
<WeatherComponent />
</Group>
<Group style={{ gridColumnStart: 1, gridColumnEnd: 1.5 }}>
<TodoList />
</Group>
<Group style={{ gridColumnStart: 1.5, gridColumnEnd: 3 }}>
<NewsComponent />
</Group>
</Container>
);
};
export default Dashboard;
And this is my WeatherComponent which is basically serving as my Header:
import axios from 'axios';
import { Weather } from '../types';
import UserForm from './UserForm';
import { Title, Text, Container } from '#mantine/core';
import { useEffect, useState, createContext } from 'react';
export const WeatherContext = createContext<any>(null);
const WeatherComponent = () => {
const [weather, setWeather] = useState<Weather | null>();
const fetchWeatherData = async () => {
const response = await axios.get('http://mock-api-call/weather/get-weather');
setWeather(response.data.result.weather);
};
useEffect(() => {
fetchWeatherData();
}, []);
return (
<Container>
<WeatherContext.Provider value={weather?.forcast}>
<UserForm />
</WeatherContext.Provider>
<Title order={2}>Today's Weather</Title>
<Text size="lg">
{weather?.forcast} with a low of {weather?.min} and a high of {weather?.max}
</Text>
<Text size="md" data-testid="description">
{weather?.description}
</Text>
</Container>
);
};
export default WeatherComponent;
Ideally I'd like to use mantine stylings to reach 100% and not create a css file to style *.
To prevent mantine from enforcing max-width on the container element, use the fluid prop on the container.
return (
<Container fluid>
{content}
</Container
)
Solved!
I changed the width of the WeatherComponents Container to 100% and it fixed the issue.
in WeatherComponent
return (
<Container style={{ width: '100%' }}>
)
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 am using react-native-render-html to transfer a string into html elements while developing React Native Apps. I received the string by RESTful APIs from backend, and there has already had width and height set in <img> tag:
<img class="aligncenter" src="https://www.allfin.com/u/cms/www/201811/13142949sf02.jpg" width="600" height="408" />
But I want the image to be resized to the largest width of the window, so I use :
imagesMaxWidth={Dimensions.get('window').width}
The whole segment is below:
<ScrollView style={styles.content}>
<Text style={styles.title}>{this.props.title}</Text>
<Text>{this.props.date}</Text>
<HTML
html={this.props.content}
imagesMaxWidth={Dimensions.get('window').width - 40}
/>
</ScrollView>
But the image could not be resized to the max width of the window.
So how could I set this?
Thank you
Use ignoredStyles prop to ignore width and height of the original pictures. Use ignoredStyles={['height', 'width']} to fix the issue.
With the latest 5.0 pre-releases, there is a much cleaner solution. Use the brand new contentWidth prop with useWindowDimensions hook, and images will automatically scale to content width!
yarn add react-native-render-html#unstable
import * as React from 'react';
import {ScrollView, StyleSheet, useWindowDimensions} from 'react-native';
import HTML from 'react-native-render-html';
const html = `
<img class="aligncenter" src="https://www.allfin.com/u/cms/www/201811/13142949sf02.jpg" width="600" height="408" />
`;
export default function App() {
const {width} = useWindowDimensions();
return (
<ScrollView contentContainerStyle={styles.container}>
<HTML contentWidth={width} html={html} />
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
},
});
Result:
In addition, if you want this behavior and don't want images to be greater than, let's say, 300, you can use the new computeEmbeddedMaxWidth prop:
import * as React from 'react';
import {ScrollView, StyleSheet, useWindowDimensions} from 'react-native';
import HTML from 'react-native-render-html';
const html = `
<img class="aligncenter" src="https://www.allfin.com/u/cms/www/201811/13142949sf02.jpg" width="600" height="408" />
`;
function computeEmbeddedMaxWidth(contentWidth, tagName) {
if (tagName === 'img') {
return Math.min(contentWidth, 300);
}
return contentWidth;
}
export default function App() {
const {width} = useWindowDimensions();
return (
<ScrollView contentContainerStyle={styles.container}>
<HTML
contentWidth={width}
computeImagesMaxWidth={computeImagesMaxWidth}
html={html}
/>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
},
});
Result:
I'm using Material UI TextField and Material UI Tab. I have two tabs and each has a text field inside them. After I click on the TextField, the border should open for the label, but this doesn't happen if the current Tab is not the Tab1 !!
I managed to reproduce this problem in this CodeSandBox and the code is also included below.
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "#material-ui/core/styles";
import AppBar from "#material-ui/core/AppBar";
import Tabs from "#material-ui/core/Tabs";
import Tab from "#material-ui/core/Tab";
import Typography from "#material-ui/core/Typography";
import Box from "#material-ui/core/Box";
import TextField from "#material-ui/core/TextField";
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<Typography
component="div"
role="tabpanel"
hidden={value !== index}
id={`scrollable-force-tabpanel-${index}`}
aria-labelledby={`scrollable-force-tab-${index}`}
{...other}
>
<Box p={1}>{children}</Box>
</Typography>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired
};
function a11yProps(index) {
return {
id: `scrollable-force-tab-${index}`,
"aria-controls": `scrollable-force-tabpanel-${index}`
};
}
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.palette.background.paper,
padding: 0,
margin: 0
},
Tab: {
MuiTab: {
root: {
minWidth: "130px"
}
}
}
}));
export default function Demo(props) {
const classes = useStyles();
const [value, setValue] = React.useState(0);
function handleChange(event, newValue) {
setValue(newValue);
console.log(newValue);
}
return (
<div className={classes.root}>
<AppBar position="static" color="default">
<Tabs
key={"tabs"}
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="on"
indicatorColor="primary"
textColor="primary"
aria-label="scrollable force tabs example"
>
<Tab
key={"tab1"}
className={classes.Tab}
label={0}
{...a11yProps(0)}
/>
<Tab
key={"tab2"}
className={classes.Tab}
label={1}
{...a11yProps(1)}
/>
</Tabs>
</AppBar>
<TabPanel
key={"panel1"}
value={value}
index={0}
style={{ padding: 0, margin: 0 }}
>
<div key={"div1"}>
hi im tab1{" "}
<TextField
key={"textfield1"}
variant={"outlined"}
margin={"dense"}
label={"im tab 0 textfield"}
/>
</div>
</TabPanel>
<TabPanel
key={"panel2"}
value={value}
index={1}
style={{ padding: 0, margin: 0 }}
>
<div key={"div2"}>
hi im tab2
<TextField
key={"textfield2"}
variant={"outlined"}
margin={"dense"}
label={"im tab 1 textfield"}
/>
</div>
</TabPanel>
</div>
);
}
Edit1:
I managed to find a similar question...,
Material-UI TextField Outline Label is overlapping with border when conditionally rendered
It seems this is not related to tabs as it is related to conditional rendering, which for me happened when i was using tabs
Edit2:
I tried giving the Textfield a key, but the problem still remains and there is an overlap between Textfield border and label, i updated the sandbox so it can reflect this
The label width is calculated during the initial rendering of the TextField and is only recalculated if the label changes. During the initial rendering of the TextField on your second tab, the TextField is not visible and thus the label's width is 0. Switching the TabPanel to visible does not cause a re-calculation of the label width, so no space is allotted for it in the outline.
You can fix this by using the same approach within your TabPanel as is used in the demos which is to only render the children of the panel when it is visible. This allows the label width to be correctly calculated after the initial rendering.
So instead of
<Box p={1}>{children}</Box>
you should instead have
{value === index && <Box p={1}>{children}</Box>}
I had the overlap problem with the select. Slightly different scenario though. I went through numerous pages and just couldn't find a solution to these problems:
Label text overlapping with the border - when the focus is received
Placeholder text touching the left border
If not problem # 1 - then Placeholder text staying inside the borders even when the value is selected/entered
A simple solution to all this are the following checks that worked for me -
<FormControl variant="outlined">
Make sure variant is added.
<InputLabel id="input_designationselected" style={{backgroundColor:'white'}}>Designation*</InputLabel>
Make sure that background is set for the label. Or refer to this link here https://github.com/mui-org/material-ui/issues/14530
the attribute labelId for the input control/select control matches the ID of the InputLabel
Final output is as we need it.
It drove me crazy for days - and It thought I will share it for others also. Sorry if this is the wrong place to post it.