I'm new in reactJS, but I want to know how I can put icon inside input element?
I have a FormItem and inside of this an Input, and inside of this input i want to put an icon.
<Col xs={24} sm={24} md={24} lg={12}>
<FormItem
{...formItemLayout}
label={intl.formatMessage({ id: `maintenace.link.linkOrigin` })}
>
{getFieldDecorator(`officePhone`, {
initialValue: selectedData_.officePhone
? selectedData_.officePhone
: ""
})(
<Input
name="officePhone"
placeholder={intl.formatMessage({
id: `maintenance.officePhone`
})}
/>
)}
</FormItem>
</Col>
If anyone knows, please, I will be very grateful.
If you use some lib related to the Ant Design. You can add prefix prop
<Input prefix={<SmileOutlined />} />
You could use a background on the input, something like this :
input: {
background: url(icon.gif) no-repeat scroll 7px 7px;
padding-left: 20px;
}
Related
I would like to realize a dropdown, where the width of the dropdown button is not necessarily equal to the width of the dropdown list.
I know that we can use style={{ minWidth: '200px' }} to control the width of the dropdown button and dropdown list. Now, I would like to make the width of the dropdown list 500px.
I tried to set .fui-Listbox { width: 500px } in the stylesheet, but it did not work.
Does anyone know how to do that?
StackBlitz: https://stackblitz.com/edit/react-ts-cejuzs?file=App.tsx,style.css,index.html
import {
FluentProvider,
webLightTheme,
makeStyles,
shorthands,
} from '#fluentui/react-components';
import {
Dropdown,
Option,
DropdownProps,
} from '#fluentui/react-components/unstable';
import { TextField } from '#fluentui/react';
import * as React from 'react';
import './style.css';
export default class Grouped extends React.Component<{}, {}> {
land = ['Cat', 'Dog', 'Ferret', 'Hamster'];
render() {
return (
<FluentProvider
className="fluent-provider"
style={{ display: 'flex' }}
theme={webLightTheme}
>
<Dropdown
className="drop-down"
style={{ minWidth: '200px' }}
placeholder="Select an animal"
>
{this.land.map((option) => (
<Option key={option}>{option}</Option>
))}
</Dropdown>
</FluentProvider>
);
}
}
Edit 1: Following pier farrugia's answer, I tried to use .fui-Listbox { width: 500px !important; }. It did make the width of the dropdown list 500px, however it impacted all the dropdowns in the project, which is not what I want. I tried to add classes and wrote selectors such as .drop-down .fui-Listbox { width: '500px' !important; } and .drop-down-2 .fui-Listbox { width: '100%' !important; }, but it did not work. I guess it's because under the mode of dropdown, .fui-Listbox is not a child class of drop-down-2 or .fluent-provider-2. Does anyone know how to properly write the selectors to limit the impact only to the dropdown I target?
https://stackblitz.com/edit/react-ts-51hiro?file=App.tsx,style.css,index.html
in the code you have :
<Dropdown
className="drop-down"
style={{ width: '100px' }}
placeholder="Select an animal"
>
Your style 100px is generated dynamically.
Change in style even with !important is not working.
Modify the the line
style={{ width: '100px' }}
to
style={{ width: '500px' }}
To change only the width of the dropdown list, you have to use the style or the className tag for that specific dropdown slot (listbox):
<Dropdown
className="drop-down"
style={{ minWidth: '200px' }}
placeholder="Select an animal"
listbox={{style: {width: "500px"}}}
>
{this.land.map((option) => (
<Option key={option}>{option}</Option>
))}
</Dropdown>
or if you want to keep using your stylesheet
<Dropdown
className="drop-down"
style={{ minWidth: '200px' }}
placeholder="Select an animal"
listbox={{className: "custom-dropdown-width"}}
>
{this.land.map((option) => (
<Option key={option}>{option}</Option>
))}
</Dropdown>
and in your stylesheet
.custom-dropdown-width {
width: '500px' !important;
}
I'm using the components from semantic-ui-react to display a Field and Button like below:
<Segment clearing>
<Form>
<Form.Group style={{ display: "flex" }}>
<Form.Field style={{ flexGrow: "1" }}>
<Form.Input
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
focus
/>
</Form.Field>
<Form.Button
color="green"
floated="right"
content="Add new API key"
type='submit'
/>
</Form.Group>
</Form>
</Segment>
Nothing incredibly fancy, the result is as below:
I want to reposition the placeholder in the Form.Input to the right side like below:
How exactly can I achieve this?
I would use the CSS placeholder selector. You could, for example, give the Form.Input component an arbitrary class such as "input-aligned-end" and then style it in CSS:
.input-aligned-end::placeholder {
text-align: end;
}
Not sure but try this
labelPosition='right'
style
style={{
paddingLeft: "50%"
}}
I have the following Segment
<Segment className='AddAPIKey'>
<Form>
<Form.Group>
<Form.Field>
<Input placeholder='XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX' />
</Form.Field>
<Form.Button color='green' floated='right' content='Add new API key' />
</Form.Group>
</Form>
</Segment>
With the style:
.ui.AddAPIKey {
display: flex;
justify-content: right;
}
Resulting in:
Is there a way I can make the input field take the entire width like in the example below? I've tried with width: 100% and auto and no luck.
import React from "react";
import { Input, Form, Segment } from "semantic-ui-react";
import "./style.css";
const InputExampleFocus = () => (
<Segment>
<Form>
<Form.Group style={{ display: "flex" }}>
<Form.Field style={{ flexGrow: "1" }}>
<Input placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" />
</Form.Field>
<Form.Button color="green" floated="right" content="Add new API key" />
</Form.Group>
</Form>
</Segment>
);
export default InputExampleFocus;
Try this I have removed the .ui.AddAPIKey class and used Inline css to style Form.Group and Form.Field
It produces an Input field that covers all the spaces available.
I hope it solves the issue.
https://codesandbox.io/embed/semantic-ui-example-forked-x5d4qm?fontsize=14&hidenavigation=1&theme=dark
Open the codesandbox and go to example.js
<TextField
id="endTime"
label="End Time"
onChange={onEndTimeChange}
type="time"
defaultValue="16:00"
className={classes.textField}
/>
the attribute 'type="time"' is what renders an icon that looks like a clock. I would like to change the color of the clock icon. How can I do that?
You can use CSS to hide the clock icon and use your own icon:
Not tested on all browsers but is should work with browsers that support -webkit
input[type="time"]::-webkit-calendar-picker-indicator {
background: none;
}
input[type="time"]{
z-index: 0;
position: relative;
}
input[type="time"]:after{
content: "";
background-image: url(https://i.ibb.co/6g2dgm0/1535322171.png);
height: 20px;
width: 20px;
background-size: contain;
z-index: -1;
position: absolute;
right: 0;
}
<input type="time" />
You should have a look at the TimePicker in the lab package if you want to easily customize the component. The native time input is harder to style because of the lack of support. The following change the icon to green for example:
<TextField
sx={{
'& input[type="time"]::-webkit-calendar-picker-indicator': {
filter:
'invert(78%) sepia(66%) saturate(6558%) hue-rotate(84deg) brightness(127%) contrast(116%)',
},
}}
type="time"
{...}
/>
The filter value is generated from this codepen. If you decide to use the TimePicker, then the code would look like this:
<TimePicker
label="Basic example"
components={{
OpenPickerIcon: (props) => (
<AccessTimeIcon {...props} sx={{ color: 'red' }} />
),
}}
renderInput={(params) => <TextField {...params} />}
/>
My fullscreen modal is aligned to the left. Centered property does not solve it. I have a row of the grid that dynamically displays a series of Cards. Each Card has the modal associated, so when you click the Card the modal opens with information from the Card.
This is the grid where i render it
<Grid.Column key={this.props.sensorid} width={4}>
<Card
onClick={() => {
this.setState({ modalOpen: true });
}}
color={color}
header={String(porce) + " %"}
description={this.props.sensorname}
meta={nivelUno + " mm"}
/>
<ModalSensor
sensorWell={this.props.sensorWell}
sensorName={this.props.sensorConPrefijo}
sensorId = {this.props.sensorid}
modalOpen={this.state.modalOpen}
handleClose={() => {
this.setState({ modalOpen: false });
}}
/>
</Grid.Column>
This is the modal
export default class ModalSensor extends Component {
render() {
return (
<div>
<Modal
centered={true}
open={this.props.modalOpen}
onClose={this.props.handleClose}
closeOnEscape={true}
size={"Fullscreen"}
>
<Modal.Header>Nivel del sensor {this.props.sensorName}</Modal.Header>
<Modal.Content>
<Sensor sensorwell={this.props.sensorWell} sensorcodigo={this.props.sensorName}/>
</Modal.Content>
<Modal.Actions>
<Button
inverted
color="orange"
type="button"
icon="checkmark"
labelPosition="right"
onClick={this.props.handleClose}
content="Cerrar"
/>
</Modal.Actions>
</Modal>
</div>
);
}
}
that's a common problem when using more than one css library just inspect your element with your browser dev tool and try to figure it out or else past it here None can help you (probably) because it's a css problem and you haven't any css here.
Good luck man.
I've also encountered this type of layout bug, but I fixed it by adding a custom class to <div class="ui fullscreen modal transition visible active" />
.customClass {
left: 50%;
transform: translateX(-50%);
}