CODEWITHSUNDEEP
reactjssemantic-ui
Rokas.ma
Rokas.ma

Reputation: 211

React semantic ui multi column multi row form

I need to create multi column, multi row form. I am thinking about using grid or table approach. Which approach would be better? Why? Is there any other approach?

Thanks!

Example of form

Upvotes: 1

Views: 2007

Answers (1)

T.Ban
T.Ban

Reputation: 11

What i've done for the job is to use 3 columns for the first Codepen. The second Codepen is to use 2 column. You can see in the example. See what is better for you.

I prefer to use grid for the responsive design. The table is limited for this aspect.

The 3 columns 

<h2>Ban profile</h2>
    <div class="ui stackable grid">
      <div class="two wide column">
        <img class="ui small bordered image" src="https://s9.postimg.cc/xkxqxrl5r/IMG_20170921_175941.jpg">
      </div>
      <div class="six wide column">
        <form name="UserForm" class="ui form aligned">
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
      </div>
      <div class="one wide column"></div>
      <div class="six wide column">
        <div class="ui form aligned">
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
        </div>
      </div>
    </div>
    <button class="ui primary button">
     edit
    </button>
    </div>
    </div>
    </div>

    <div class="ui container">
      <div class="ui basic clearing segment">
        <p>You've done ? click to save</p>
        <button class="ui right floated primary button"> Save</button>
      </div>
    </div>

The 2 columns

Upvotes: 1

Related Questions