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)
Related
I am using react material ui library
https://material-ui.com/components/checkboxes/
I need to have form group with checkbox and input type search inside. So i use the two components
from this library
<FormControl id="inline-form-group">
<FormLabel component="legend">Choose Columns:</FormLabel>
<FormGroup>
<FormControlLabel
control={<Checkbox checked={gilad} onChange={handleCheckboxesChange} name="gilad" />}
label="Gilad Gray"
/>
</FormGroup>
<FormGroup>
<TextField id="standard-search" label="Column value" type="search" />
</FormGroup>
</FormControl>
but now textfield is under the checkbox
I want to have them inline.
I can't find in their documentation option like this
In the label position of your FormControlLabel you could put in your TextField.
This would work if you don't need to have the Gilad Gray as your curretn label.
<FormControlLabel
control={<Checkbox checked={true} onChange={handleChange} name="jason" />}
label={<TextField />}
/>
```
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.
I am creating a modal to filter for profiles, on react-bootstrap and redux.
I need to filter to remember it's previous selection every time the user reopen it, even if he returns from another page. It works fine with value based components, such as "range slider" or "text search" because I can grab the previous saved redux store and plug into the component's attribute, such as:
value={rangeValue}
But for radio buttons, I am not sure since the attribute itself, "checked", is its own value.
<Form.Check
inline
label="male"
name="male"
checked <-----------
onChange={(e) => onRadioChange(e)}
/>
I want it to show "checked" only if the user has previously done so. I already have the user choice (whether checked or not) saved in my store, but don't know how to plug it in conditionally.
The returned JSX below
import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
...
<Form>
<div className="form_content_wrap">
<Form.Group>
<Form.Label htmlFor="formControlRange">Age: {rangeValue}</Form.Label>
<Form.Control
type="range"
className="form-control-range"
id="formControlRange"
min="0"
max="100"
value={rangeValue}
onChange={(e) => setRangeValue(e.currentTarget.value)}
/>
</Form.Group>
<Form.Group>
<Form.Label htmlFor="formControlRange">Gender: </Form.Label>
<Form.Check
inline
label="female"
name="female"
onChange={(e) => onRadioChange(e)}
/>
<Form.Check
inline
label="male"
name="male"
checked <<<------- THIS IS WHERE I WANT TO CHANGE
onChange={(e) => onRadioChange(e)}
/>
</Form.Group>
<Form.Group>
<Form.Label>Keyword</Form.Label>
<Form.Control
type="text"
placeholder="search description"
value={descValue}
onChange={(e) => setDescValue(e.currentTarget.value)}
/>
</Form.Group>
<Button
variant="primary"
type="submit"
onClick={onFormSubmit}
style={{ marginRight: "10px" }}
>
Submit
</Button>
<Button variant="primary" type="submit" onClick={onFormClear}>
Clear
</Button>[enter image description here][1]
</div>
</Form>
Thanks
React appears to be smart enough automatically remove the attribute if you set it equal to a Javascript expression that is not truthy. You should be able to just pull this state from your store. See this question for more details.
<Form.Check checked={true} />
<Form.Check checked={false} />
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>
I am implementing an input form and I am hoping that it could have a fix line limit. For example, for one box, it would be a 3-line input box. If more than 3 lines, there will be ideally a scroll bar on y-axis (i.e., no overflow in x axis). My current code is
<Form>
<FormGroup>
<ControlLabel>
Label
</ControlLabel>
<InputGroup>
<FormControl value='default' onChange={<some function>} />
</InputGroup>
</FormGroup>
</Form>
but it only rendered one line's input.
Edited: using textarea, the font seems to be very tiny.
The following snippet fixes the described issue:
<Form.Group controlId="exampleForm.ControlTextarea1">
<Form.Label>Example textarea</Form.Label>
<Form.Control as="textarea" rows="3" />
</Form.Group>
The componentClass prop of a FormControl is "input" by default, which renders a text input.
A text input is single line.
So try setting the componentClass prop of FormControl to "textarea":
<Form>
<FormGroup>
<ControlLabel>
Label
</ControlLabel>
<InputGroup>
<FormControl componentClass="textarea" value='default' onChange={<some function>} />
</InputGroup>
</FormGroup>
</Form>