Tips on incorporating form groups within a grid using semantic-ui-react

I am currently developing a project using semantic-ui-react that involves numerous input fields. To better organize the page, I have decided to split it into 3 columns. Below is the approach I have taken:

render() {
return (
    <Form>  
        <Grid columns={3} divided>  
            <Grid.Row>
                <Grid.Column stretched>
                    <Segment>
                        <Form.Group widths="equal">
                            <Field name="title" component={renderFieldInput} label="Enter Title"/>
                            <Field name="test" component={renderFieldInput} label="Enter Title"/>
                        </Form.Group>
                    </Segment>
                </Grid.Column>
                <Grid.Column stretched>
                    <Segment>
                        test2
                    </Segment>
                </Grid.Column>
                <Grid.Column stretched>
                    <Segment>
                        test3
                    </Segment>
                </Grid.Column>  
            </Grid.Row>
        </Grid>
    </Form>
);

}

As shown in the layout:

https://i.sstatic.net/tY2qt.png

The issue arises when trying to place the form group inside the segment. Any assistance on how to resolve this would be greatly appreciated. Thank you.

cssreactjsreduxredux-formsemantic-ui-react

Answer №1

Check out the style guide examples here:

I made some modifications to the example using the code snippet below:

import React from 'react'
import { Form, Input, Grid, Segment } from 'semantic-ui-react'

const FormExampleEvenlyDividedGroup = () => (
  <Form>
    <Grid columns={3} divided>
      <Grid.Row>
        <Grid.Column stretched>
          <Segment>
            <Form.Group widths='equal'>
              <Form.Field>
                <label>First name</label>
                <Input fluid placeholder='First name' />
              </Form.Field>
              <Form.Field>
                <label>Last name</label>
                <Input fluid placeholder='Last name' />
              </Form.Field>
            </Form.Group>
          </Segment>
        </Grid.Column>
        <Grid.Column stretched>
          <Segment />
        </Grid.Column>
        <Grid.Column stretched>
          <Segment />
        </Grid.Column>
      </Grid.Row>
    </Grid>
  </Form>
)

export default FormExampleEvenlyDividedGroup

It seems to be functioning properly now. However, make sure to include the renderFieldInput component as it may be necessary:

Remember, if you use the widths='equal' prop on a Form.Group, all child components such as Form.Dropdown, Form.Input, Form.Select must have the fluid prop to work correctly.

Answer №2

In my opinion, it is important for Grid.Column elements to be contained within Grid.Row and Grid components as shown below:

  <Grid columns={3} divided>
    <Grid.Row>
      <Grid.Column>
         <Segment>
           Test1
         </Segment>
      </Grid.Column>
      <Grid.Column>
         <Segment>
           Test2
         </Segment>
      </Grid.Column>
      <Grid.Column>
         <Segment>
           Test3
         </Segment>
      </Grid.Column>
    </Grid.Row>
 </Grid>

This structure is reminiscent of the Twitter bootstrap grid system.

You can view examples of this implementation here:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to make the first option blank?

Is there a way to have the select field start with an empty value instead of the default dollar sign? The demonstration can be found at https://codesandbox.io/s/material-demo-forked-xlcji. Your assistance in achieving this customization would be greatly a ...

reactjstypescriptmaterial-ui

Different ways to adjust the positioning of the HTML canvas created using p5.js

I am attempting to integrate the output canvas from p5.js into my webpage by following a tutorial heretutorial. I am hoping that the canvas will appear where I have positioned it within the HTML body. However, no matter what I try with CSS properties like ...

javascripthtmlcssp5.js

Issue: A problem has arisen with the element type, as it was supposed to be a string for built-in components but is currently undefined. This error is being encountered

Help needed: Error in my code! I am working with three files: HeaderOption.js, HeaderOptions.js, Search.js This is the content of HeaderOptions.js import HeaderOption from "./HeaderOption"; import DotsVerticalIcon from "@heroicons/react/o ...

javascriptreactjsnext.js

Is there a way to incorporate a loading spinner into a MaterialUI DataTable without having to specify a fixed height for the parent component?

Currently, I am using a MaterialUI DataTable with the following setup: <div style = {{height: 300}}> <DataGrid loading={true} getRowHeight={() => "auto"} getEstimatedRowHeight={() => 250} ...

javascriptreactjstypescriptmaterial-ui

Tips for sending parameter props to a Redux container

I am facing an issue with a selector that requires an ID from the user, which should ideally come from params. Example: localhost:3001/users/1 Selector: export const getPosts = () => // this gets all posts createSelector( postSelector, (sta ...

reactjsreact-redux

The GET request on the Express route is malfunctioning, causing the Postman request to time out after getting stuck for some

My Express app seems to be experiencing some issues with the GET route. When making a request using Postman, the response gets stuck for a while before fetching. The GET route is properly set up with all necessary request parsers and the app initialized an ...

javascriptnode.jsreactjsexpress

Having trouble locating a custom font while using React in conjunction with Material UI

My MUI theme is set up like this: export default createMuiTheme({ typography: { fontFamily: '"Nunito Sans", "Helvetica", "Arial", sans-serif', fontWeightLight: 300, fontWeightMedium: 600, fontWeightRegular: 400 } } }); I ...

reactjsfontsthemesmaterial-ui

Implementing fetch within a custom hook to display a loader within a return function

customFetch hook: import React, { useState, useEffect } from 'react'; const customFetch = (url, options) => { const [response, setResponse] = useState(null); const [error, setError] = useState(null); useEffect(() => { (async () ...

javascriptreactjs

What is the best way to pass data from a child component to its parent in React?

I have a dynamic table where users can select items from a dropdown menu and add them to the list. Currently, I store the item list in the component's state to render the table dynamically. I want users to be able to click on an item in the table and ...

javascriptreactjs

Is it possible to balance proper CSS and Javascript maintenance with the use of a Template Engine?

When using a template engine like Velocity or FreeMaker, you have the ability to break up your HTML into reusable components. For example, if you have an ad <div> that appears on multiple pages of your site, you can create a file containing that < ...

javascriptcssvelocitytemplate-engine

The alignment in Firefox and Google Chrome does not appear to be consistent

The appearance of the content is correct in Google Chrome but incorrect in Firefox. Does anyone have any suggestions on how to fix this for Firefox? ...

htmlcsspositionlesscss-position

results without a table

Currently, I am working on a search page in PHP and I want to display the results in a similar style to the image provided. Could you please advise on how I can achieve this type of design using CSS? I would like it to be a fluid design using percentages, ...

phpcss

Is there a way to deactivate keyboard input on an HTML number input field? How about in a React or Material-UI environment?

I am working with an <input> tag that has the attribute type="number", and I want to disable keyboard input so that users are required to adjust the value using the spinner (up and down arrows). This will allow me to consume the input value on each c ...

javascripthtmlreactjsmaterial-ui

When the application is converted into static files, the dynamic routes fail to function properly

I have a website that is statically exported but has dynamic routes. During development, the site works fine. However, when I build and export it, then serve the static files using serve, an issue arises. If you go to the site root and click on a link th ...

javascriptreactjsnext.js

Fixing the department display list in React Hook: A step-by-step guide

{ roomDept.map((item, index) => ( <div key={index} className="flex flex-col pb-2 items-center"> <div className="flex pb-2 w-full"> <SelectPick ...

javascriptreactjsreact-hooks

Design a webpage using material-ui components

I'm struggling to create a layout using material-ui for a child page. Can someone guide me on how to achieve this design? https://i.sstatic.net/TwYR5.png ...

javascriptreactjslayoutmaterial-uichildren

Spinning text within a responsive bootstrap card

I have a card containing text that is not wrapping properly within the card due to rotation using CSS. <div class="card border-info"> <div id="heading_card" class="card-header"> a very long string of text which is not g ...

htmlcssbootstrap-4

React: When an array state is controlling my components, why aren't they re-rendering?

I am facing an issue with my app where the className of buttons is not updating correctly when clicked. It seems that only active buttons trigger a re-render, while non-active ones do not. This behavior is confusing to me. Here's the code snippet for ...

javascriptreactjs

Loading a specific CSS file along with an HTML document

Creating a responsive website, I'm looking to incorporate a feature that allows for switching between a mobile version and a standard desktop version similar to what Wikipedia does. To achieve this, I would need to reload the current HTML file but en ...

phpjavascriptcssswitch-statement

The hyperlink appears to be malfunctioning with an additional border surrounding it within a pop-up window

I am facing an issue with a link <a> not functioning properly with a popup dialog on . Additionally, there seems to be a border that appears around the <a> when the popup initially displays. If you click on "Leer más" for any product, you can ...

javascriptjquerycsshyperlinkdialog