score:0
Accepted answer
by default, the div - parent of the checkboxes is a block level element. it should work, if you change it to be flex.
<div style={{display: "flex"}}>
<checkbox inputid="method1" name="method" value="connect" onchange={onmethodchange} checked={methods.indexof('connect') !== -1} />
<label htmlfor="method1">connect</label>
</div>
update.
add space between the checkbox and the label
- depending on how much space you need and the width of the div, you can use
<div style={{display: "flex", justifycontent: "space-between"}}>
- - -
set padding-right / margin-right on the outer most element in checkbox
set padding-left / margin-left on the label
score:1
you can convert checkboxes to inline elements:
<div>
<checkbox style={{display: "inline"}} inputid="method1" name="method" value="connect" onchange={onmethodchange} checked={methods.indexof('connect') !== -1} />
<label htmlfor="method1">connect</label>
</div>
or, use flex layout:
<div style={{display: "flex"}}>
<checkbox inputid="method1" name="method" value="connect" onchange={onmethodchange} checked={methods.indexof('connect') !== -1} />
<label htmlfor="method1">connect</label>
</div>
Source: stackoverflow.com
Related Query
- Checkbox and label in same line
- How can I get the checkbox and label to line up in a form with React?
- Using D3.js (v4) and React.js How do I label the axis on a simple line chart?
- Align two elements on the same line using flex: one left and one right
- Material ui / typography and button on the same line
- Display an image and text in a checkbox label using Material UI
- How to get row id and pass to checkbox in same row but different column in react js?
- ListGroupItem and Button from react-bootstrap in the same line
- Place label and input field on the same row, with padding
- uncheck (removing) last item in checkbox and check(adding) other at the same time , keeps the unchecked value and adds other checked value
- Need to put the image and text on same line
- In a react Multiselect dropdown I would like to display name and email along with the checkbox in the same level
- use the same opacity and color for circle and line but shows a weird result on canvas
- How to create a left-aligned button, center-aligned text, and right-aligned button all in the same line (ReactJS)
- How to vertically align button content and the icon in the same line and icon on the extreme right of button in tailwindcss?
- React - How to align text and img in same line
- Cannot vertical align center an image and text on the same line React Bootstrap
- textfields, icon and label in a single line
- Put input text and submit button same line
- How to get the label and values from multiple TextArea material ui with same onchange function for all?
- Unable to put two divs on same line and telling controls to take more width if available
- Chart.js Yaxis custom horizontal line and label
- label and input not on the same margin in react
- Arranging an Image and a Component on the same line
- How to display text and component text on same line
- Why is console.log() showing react_devtools_backend.js:4049 instead of the file and line number?
- Typescript types for React checkbox events and handlers?
- Add space between two elements on the same line
- How would I animate the width of a button based on percentage, and the same for it's backgroundColor?
- Warning: You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored
More Query from same tag
- how to not set off onclick in some parts of div?
- My component is mutating its props when it shouldn't be
- How to get the original original Default Arrangement from sorted array?
- useState set method not reflecting change immediately (solution suggested in Stackoverflow not working)
- How to implement a PureComponent in ES5
- Add a class to child component when parent component state changes
- CORS enabled on server still receiving header error
- How do I reuse prop-types when not using PropTypes.shape?
- Importing images in TypeScript React - "Cannot find module"
- Dealing with nested possibly null values in Typescript
- Render returned no data - trying to call component multiple times in forEach
- Invariant Violation: The root route must render a single element error in react-router 2 dynamic routing
- React+ sending entire state object to another component
- integrate a third party component
- React routing is not working
- How to reset a contenteditable element in React?
- Why can't I use this component with TypeScript?
- Render JSX-elements as multi-level pyramid
- How do I add style inline the color code which I m getting from an array of object
- Conditionally make a page read-only using react
- In React, how do I name a field of my form that is part of an array?
- How reset form values using react bootstrap
- How to use a variable as value for a prop in a component call for React?
- How to allow certain combinations of props in React Typescript?
- How to orderByValue onSnapshot using Firestore
- React PropTypes in Meteor doesn't work for me
- How to expand menu or close menu or array.map()
- React "this" is always null in functions
- Cannot find module @restart/context/forwardRef during npm build
- How do I extract the array in an array and structure it to be one whole array?