Material UI Autocomplete with Avatar in textfield - javascript

Can I achieve avatar in the textfield of autocomplete material-ui component as the getOptionLabel prop only accepts a string and render option the expected UI is shown .i.e profile picture and Name, can we get the same thing i.e profile picture and name in the renderInput textField

You can return your custom component in renderInput props, and that custom can be a combination of icon and TextField Like this...
renderInput={(params, data) => (
<div style={{ position: "relative" }}>
{params.inputProps.value && (
<span
style={{
position: "absolute",
transform: "translateY(50%)",
marginLeft: "5px"
}}
>
{/* Write logic to have Icon from params.inputProps.value */}
{countryToFlag("AD")}
</span>
)}
<TextField
{...params}
label="Choose a country"
variant="outlined"
inputProps={{
...params.inputProps,
autoComplete: "new-password",
style: { paddingLeft: "20px" } // disable autocomplete and autofill
}}
/>
</div>
)}
As you can see I have provided the Absolute position span which will render the icon based on the selected value(I am still not able to find a way to access the options object).
Here is the complete and running sandbox project

Related

ReactJS: How to change placeholder font size of Material Ui Autocomplete?

I want to change the placeholder fontsize of Material Ui Autocomplet. Is there any way?
<Autocomplete
multiple
id="tags-outlined"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
filterSelectedOptions
size="small"
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
placeholder="Enter Transshipment Ports"
/>
)}
/>
In your example, you can target the input element of the component you render in renderInput which is TextField using makeStyles
const useStyles = makeStyles({
customTextField: {
"& input::placeholder": {
fontSize: "20px"
}
}
})
<TextField
classes={{ root: classes.customTextField }}
{...params}
variant="outlined"
placeholder="Enter Transshipment Ports"
/>
Example below using forked MUI demo
You can just add the ::placeholder css to the class/id of the input field, and change the font-size
Example:
#tags-outlined::placeholder {
font-size: 14px;
}
The sx property allows users to override the styling applied to the MuiFormLabel-root object, including the font size. This is useful for creating custom labels that better suit the user's design needs.
<TextField
{...props}
sx={{
'& .MuiFormLabel-root': {
fontSize: '0.8rem',
},
}}
/>

Elements getting overlapped in select drop down material ui

I am new to react and am using the select button of material-ui. It adds a highlight text of whatever we give and it should go away once the element is selected.
However on the selection of an option the two texts get blurred like this:
Here is the code for the same:
<Grid item xs={6}>
<FormControl id="Process" style={{ width: "78%" }} size="small">
<InputLabel
htmlFor="Process"
id="Process"
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
>
Process
</InputLabel>
<Select
labelId="Process"
name="Process"
id="Process"
onChange={() => this.setState({ addModalShow: true })}
defaultValue={values.Process}
variant="outlined"
inputProps={{
id: "Process"
}}
>
<MenuItem value="1">Implemented</MenuItem>
<MenuItem value="2">Implementation in Progress</MenuItem>
<MenuItem value="3">Not Implemented</MenuItem>
</Select>
</FormControl>
<Button
variant="outlined"
color="primary"
onClick={() => this.setState({ addModalShow: true })}
size="small"
style={styles.button2}
>
+
</Button>
<label
id="process"
style={{ visibility: "hidden", color: "red" }}
>
Process cannot be blank
</label>
</Grid>
</Grid>
Could anyone please tell me why this is happening?
Ciao, your problem is connected to the style you applied on InputLabel. In standard version, InputLabel does not disappears when you select a value on Select component. Will be just moved on top of the Select element.
If you made a style customization on InputLabel, the label will be not moved on top and you will see the two texts blurred. So you have 2 choices:
Remove style customization, I mean remove this css:
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
put a condition to InputLabel content. Something like:
{values.Process === "" && "Process"}
In this way, Process label will be visible only if you haven't selected nothing on Select component.
Here a codesandbox example.

Material UI Textfield Label

I am trying to scale a text field in Material UI so that it is responsive to changes in window dimensions. I have been able to scale the actual textfield size, but when I do the label no longer sits correctly in the textfield like so:
This is the code I use to create the textfield
<Autocomplete
freeSolo
options={top100Films.map(option => option.title)}
renderInput={params => (
<TextField {...params} label="Search for places, events or lists" variant="outlined"
InputLabelProps={{
style: {
overflow: 'hidden',
fontSize: '1vw',
},
}}
InputProps={{ ...params.InputProps,
endAdornment:
<InputAdornment position="end"><SearchIcon style={{fontSize:'1.5vw'}}/></InputAdornment>,
style: {
padding: '0.5vw',
},
}}
inputProps={{ ...params.inputProps,
style: {
padding: '0.5vw',
height: '1vw',
}
}}
/>
)} {...props} />
Has anyone had issues with making a textfield dynamic and would know how to go about this issue?

React instantSearch | Algolia

I'm trying to use the searchBox of react instantSearch and use the Hits to show the data in a separated component but it is not working.
To simplify my idea I have a component called Searching navbar and another one called Items container.
I want to use the search box from the Searching navbar and show the data in the Items container
Is it possible to do it like this or do I have to stick with one component ?d
`
<InstantSearch indexName="wp_searchable_posts" searchClient={searchClient} searchState={this.state.searchTerm || {
query: 'admissions' }} onSearchStateChange={this.onSearchStateChange}>
<Grid container spacing={24}>
<Grid item s={12}>
<SearchBox autofocus={true} />
<Stats />
<InfiniteHits hitComponent={Hit} />
</Grid>
{/* TODO: Align these more precisely */}
{/* <Grid item s={3} style={{ alignSelf: 'center', marginTop: 4 }}>
<HierarchicalMenu attributes={[ 'post_type_label' , 'taxonomies_hierarchical.faculty-departments.lvl0' ]}
limit={50} rootPath={null} separator=" > " showMore={false} showMoreLimit={20} showParentLevel /> */}
{/* </Grid> */}
</Grid>
</InstantSearch>`
This is the code i'm using to show the search box with the results.

How can I center the title in Appbar.Header in react-native-paper?

As you can see in the docs, the default positioning for the title in react-native-paper is left-aligned. I've seen multiple questions and answers about how to implement a centered title both for Android Native as well as React Native's StackNavigator, but I am having no luck pulling off the same effect with react-native-paper.
So far I have tried using the style parameter in Appbar.Header to pass in { textAlign: 'center' } or { flexDirection: 'row', justifyContent: 'space-between' }, but nothing seems to work. I'm not very impressed with react-native-paper's lack of documentation on overrides, but I still hope there's a way to do what I'm looking for.
const styles = { header: { textAlign: 'center' }}
<Appbar.Header style={styles.header}>
<Appbar.Action icon="close" onPress={() => this.close()} />
<Appbar.Content title={title} />
<Button mode="text" onPress={() => this.submit()}>
DONE
</Button>
</Appbar.Header>
Considering title accept a node, it can be used to display a react component.
How can I force center the title on all devices?
react-navigation allows passing a component for title instead of a string, so we can do the same thing here:
I wrote an example that accepts a custom title component and can be used wherever we want:
import * as React from 'react';
import { Appbar, Button, Text } from 'react-native-paper';
const ContentTitle = ({ title, style }) => (
<Appbar.Content
title={<Text style={style}> {title} </Text>}
style={{ alignItems: 'center' }}
/>
);
const App = () => (
<Appbar.Header>
<Appbar.Action icon="close" onPress={() => this.close()} />
<ContentTitle title={'Title'} style={{color:'white'}} />
<Button mode="text" onPress={() => this.submit()}>
DONE
</Button>
</Appbar.Header>
);
export default App;
You can check: https://snack.expo.io/r1VyfH1WL
There is 2 approach for this.
First,
The Appbar.Content has marginLeft applied to it. So, you just need to set the marginLeft to 0.
<Appbar.Header>
<Appbar.BackAction />
<Appbar.Content title='Title' style={{ marginLeft: 0 }} titleStyle={{ marginLeft: 0 }} />
// Put empty action here or any action you would like to have
<Appbar.Action/>
</Appbar.Header>
Sadly, this approach only allowed one menu action on the right. (or have an equal amount of actions both left and right, but I think only one menu action will be on the left side, that is back button)
Second, make the Appbar.Content has an absolute position. And yes, keep the marginLeft to 0.
<Appbar.Content title='Title'
style={{ marginLeft: 0, position: 'absolute', left: 0, right: 0, zIndex: -1 }}
titleStyle={{ alignSelf: 'center' }} />
We need to set the zIndex to -1 (or lower) so the button/menu action is clickable. This way, you can have more than one menu actions.
The first way is simple but limited, while the second way is powerful but more code to write.
You have to use titleStyle instead of style to center the text. The below code is working for me.
<Appbar.Header>
<Appbar.Content titleStyle={{textAlign: 'center'}} title="Centered Title" />
</Appbar.Header>
There is also a similar subtitleStyle for styling the subtitle. Check the docs for more info.
For 'react-native-paper', this snippet worked for me:
<Button
style = {{justifyContent: 'center'}}
>
Press
</Button>
This should align both text/node title:
<Appbar.Content
title={<Text>title</Text>}
style={{ alignItems: 'center' }}
/>
See https://snack.expo.io/rJUBIR6lU
<Appbar>
<Appbar.Content titleStyle={{alignSelf: 'center'}} title='something' />
</Appbar>

Categories