I want to change the styling (the background-color to be specific) of a simple IonInput under Ionic5 used with React.
<IonContent className="ion-padding">
<IonInput className="username" placeholder="Username" />
<IonInput type="password" placeholder="Password" />
</IonContent>
I already tried adding styles directly to the element with
<IonInput
style={{
backgroundColor: "red"
}}
placeholder="Username"
/>
... and adding styles to the corresponding .css file
.IonInput {
background: red;
}
but none of those attempts seem to change anything.
Any ideas how I can modify styles in Ionic5-specific HTML-elements?
There are 2 ways to achieve your goal. ionic use css variables heavily. they expose --background for us to customize the background color
1st way: use --background in style directly
<IonInput placeholder="Username" style={{ '--background': '#fff'}} />
2nd way: use className
<IonInput placeholder="Username" className="username" />
ion-input.username {
--background: #F00;
}
P.S. although the above can fix the style of ion-input, there is a chance where chrome auto input will override the style.
Related
I'm trying to find which class i need to override to modify the bar color of the component:
Here's my code:
<Input
id="email"
type="email"
placeholder="Enter your email"
className='mr-10'
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
The result is this:
What i want to do is edit the color of the bottom bar.
Does anyone know which class should i add to my sx{{}} prop to edit the color on focus?
Thanks for the help.
You should use <TextField /> for this. The variant prop will give you the design that you want.
<TextField
variant="standard"
sx={{
"& .MuiInput-underline:after": {
borderBottomColor: "green",
},
}}
/>
Note that there are other ways too, with styled or with theme, this is the fastest way to do it but may be not so scalable, so refer to the docs for more styling solutions.
Ref:
https://mui.com/material-ui/react-text-field/
https://mui.com/material-ui/guides/interoperability/#global-css
https://mui.com/material-ui/customization/theme-components/#global-style-overrides
I'm trying to position an icon correctly in the middle of an input, where that input has size="xs". However, all my attempts have failed, and the icon keeps being positioned too low/down. I've also tried using IconButton instead of a regular icon but that didn't work either.
import { Input, InputGroup, InputLeftElement } from "#chakra-ui/react"
import { SearchIcon } from "#chakra-ui/icons"
// ...
<InputGroup>
<InputLeftElement
pointerEvents="none"
children={<SearchIcon color="gray.300"/>}
size="xs"
/>
<Input
variant="outline"
size="xs"
placeholder={``}
/>
</InputGroup>
What am I doing wrong?
Here's the codesandbox. Note that in this codesandbox, the icon is actually above the middle of Input (which is still wrong), instead of below as on my local machine.
https://codesandbox.io/s/optimistic-bartik-5ifsd?file=/src/App.tsx
You can solve the problem by adding className to chakra components and editing styles:
export default function App() {
return (
<InputGroup>
<InputLeftElement
className="InputLeft"
pointerEvents="none"
children={<SearchIcon className="SearchIcon" color="gray.300" />}
size="xs"
/>
<Input className="Input" variant="outline" size="xs" placeholder={``} />
</InputGroup>
);
}
And Here's the styles:
.InputLeft {
top: 3px !important;
left: 3px !important;
}
.Input {
padding-left: 24px !important;
}
If in your local, the icon is below the input. You can change the top to bottom in InputLeft class.
Here's the updated codesandbox :
This issue is solvable without CSS. You just have to add the size attribute to the InputGroup as well.
See the updated code sandbox.
<InputGroup size="xs">
<InputLeftElement
pointerEvents="none"
children={<SearchIcon color="gray.300" />}
size="xs"
/>
<Input variant="outline" size="xs" placeholder={``} />
</InputGroup>
(this seem to have been asked previously but I couldn't find any hint on if it was actually answered)
MUI has a good demo for creating upload buttons which boils down to:
<input accept="image/*" className={classes.input} id="icon-button-file" type="file" />
<label htmlFor="icon-button-file">
<IconButton color="primary" aria-label="upload picture" component="span">
<PhotoCamera />
</IconButton>
</label>
What I wonder is how to implement the same using the Speed Dial. Inherently the SpeedDialAction seems to materialize as a <button/>, but it's not possible to e.g. wrap the SpeedDialAction in a <label htmlFor /> as its parent will try to set some props on it and will fail.
So how do I initiate the file selection from within the Speed Dial or a FAB in general?
You can create a wrapper component that forwards props to SpeedDialAction.
function UploadSpeedDialAction(props) {
return (
<React.Fragment>
<input
accept="image/*"
style={{ display: "none" }}
id="icon-button-file"
type="file"
/>
<label htmlFor="icon-button-file">
<SpeedDialAction
icon={<CloudUploadIcon />}
tooltipTitle="upload"
component="span"
{...props}
></SpeedDialAction>
</label>
</React.Fragment>
);
}
https://codesandbox.io/s/material-demo-forked-h6s4l
(Note to future readers: For v5, time allowing, we hope to rationalise where props rather than context are used to control children, in order to solve exactly this kind of issue. So check whether this solution is still needed.)
It is - in my knowledge - not possible to add the htmlFor in any way. So what I would do is to add a hidden input type file and then add a ref to it. Then in the onclick of the SpeedDialAction button I would call a handler function that clicks on the input ref. Like this:
const inputRef = useRef();
const handleFileUploadClick = () => {
inputRef.current.click();
};
Then your SpeedDialAction:
<SpeedDialAction
onClick={handleFileUploadClick}
... the rest of your props
/>
And then finnaly your actual input:
<input
style={{ display: "none" }}
ref={inputRef}
accept="image/*"
id="contained-button-file"
multiple
type="file"
/>
Working demo: https://codesandbox.io/s/material-demo-forked-f9i6q?file=/demo.tsx:1691-1868
I want to align input, which has two labels with a button that doesn't have any labels so that they are both on the same level.
Here's desired effect:
Here's what I got so far:
I've managed to get this to look how I want by adding label with empty space before the button, which is not ideal.
Here's the code:
<Form>
<Form.Group widths='four'>
<Form.Field>
<Form.Input type='number' label='Input'/>
<label>We can't find any matches.</label>
</Form.Field>
<Form.Field>
<Button primary>Search</Button>
</Form.Field>
</Form.Group>
Thanks for your help
EDIT: Here's the link to CodeSandbox: https://codesandbox.io/s/v6kkmyzyr0
I think that this is a styles issue and it depends of the design framework that you are using ( if you are using one).
Answering your question you could use flex to align the items horizontally
Here is the code : https://codesandbox.io/s/1oro0o6943
import React from "react";
import { render } from "react-dom";
import { Button, Form } from "semantic-ui-react";
const App = () => (
<Form>
<Form.Group widths="four" style={{ display:"flex", flexDirection:"row", alignItems:"center", }}>
<Form.Field>
<Form.Input type="number" label="Input" />
<label>We can't find any matches.</label>
</Form.Field>
<Form.Field>
<Button primary>Search</Button>
</Form.Field>
</Form.Group>
</Form>
);
render(<App />, document.getElementById("root"));
I've made it with inline styles but you could manage this in several ways!
Try using flex
<Form.Group widths='four'>
<div style="display: flex; flex-direction:row; height
auto; align-items:
center">
<Form.Field>
<Form.Input type='number' label='Input'/>
<label>We can't find any matches.</label>
</Form.Field>
<Form.Field>
<Button primary>Search</Button>
</Form.Field>
</div>
</Form.Group>
Solution: Add "inline" to Form.Group. Codepen: https://codesandbox.io/s/88v6zl66q8
I'm setting up a selection form group in semantic UI in react. However the alignment is off horizontally, so the Radio selection items are floating above an input field (see attached picture).
How do I align them? I would prefer a Semantic-UI way of doing it, and not writing custom CSS (but I'm open to suggestions). Thanks!
https://i.imgur.com/IW1imch.png
When putting the elements in a Grid or Menu container, it doesn't solve the issue.
<Form.Group>
<Form.Field>
<Radio />
<Divider vertical hidden />
</Form.Field>
<Form.Field>
<Radio />
</Form.Field>
<Form.Field>
<Radio />
</Form.Field>
<Form.Field>
<Radio />
</Form.Field>
<Form.Field>
<Radio />
</Form.Field>
<Form.Field>
<Input/>
</Form.Field>
</Form.Group>
I think the easiest way would be to put them in a display: flex container, and set align-items: center on it, as explained here.
Not quite sure, whether I got what you mean. But to prevent the radio buttons floating above the input field, you could arrange them via Semantics grid system:
<Form>
<Grid>
<Grid.Column width={8} stretched verticalAlign="middle">
<Form.Group inline className="no-margin">
<Form.Field><Radio /></Form.Field>
<Form.Field><Radio /></Form.Field>
<Form.Field><Radio /></Form.Field>
<Form.Field><Radio /></Form.Field>
<Form.Field><Radio /></Form.Field>
</Form.Group>
</Grid.Column>
<Grid.Column width={8}>
<Form.Field>
<Input
label="Anden værdi"
name="n"
type='text'
labelPosition='right'
/>
</Form.Field>
</Grid.Column>
</Grid>
</Form>
So, you can achieve a vertical align with verticalAlign="middle".
The problem is, that per default Semantic` fields have a margin. We can overcome this only via adding a class and writing one argument additional css:
.no-margin {
margin: 0 !important;
}
(See codepen: https://codesandbox.io/s/m3y9zpw358)