Разработка формы с несколькими строками и кнопкой в ​​css - PullRequest
Новая
       34

Разработка формы с несколькими строками и кнопкой в ​​css

0 голосов
/ 07 марта 2020

Я использую ReactJS и CSS и пытаюсь создать форму с несколькими строками и кнопкой.

Я не могу понять CSS, которая заставит его работать. Я пытался сделать это с помощью flexbox, но это было слишком для управления входами и кнопкой.

Я считаю, что сетка - это решение, но мне пока не удалось найти правильный макет ...

Кстати, форма на иврите, поэтому я также пытаюсь ввести go справа налево. Если иврит странный для вас, попробуйте посмотреть на него как на символы:)

Я добавляю изображения с деталями и соответствующими фрагментами кода.

Заранее спасибо! 

import React from "react";
import FormInput from "../FormInput/FormInput";
import {
  ButtonContainer,
  DetailsContainer,
  StaticDetailsContainer,
  FormContainer
} from "../Details/Details-styles";
import staticDetails from "../../assets/details-static.png";

class Details extends React.Component {
  state = {
    firstName: "",
    lastName: "",
    email: "",
    phone: ""
  };

  handleSubmit = event => {
    event.preventDefault();
    console.log("handling submit");
    const { email, phone, firstName, lastName } = this.state;
    //submit to server
  };

  handleChange = event => {
    const { value, name } = event.target;
    this.setState({ [name]: value });
  };

  render() {
    return (
      <DetailsContainer>
        <StaticDetailsContainer src={staticDetails} />
        <FormContainer>
          <form onSubmit={this.handleSubmit}>
            <FormInput
              name="lastName"
              type={"text"}
              placeholder="שם משפחה"
              value={this.state.lastName}
              handleChange={this.handleChange}
            />
            <FormInput
              name="firstName"
              type="text"
              placeholder={"שם פרטי"}
              value={this.state.firstName}
              handleChange={this.handleChange}
            />
            <FormInput
              name="phone"
              type="phone"
              placeholder={"טלפון"}
              value={this.state.phone}
              handleChange={this.handleChange}
            />
            <FormInput
              name="email"
              type="email"
              placeholder={'דוא"ל'}
              value={this.state.email}
              handleChange={this.handleChange}
            />
            <ButtonContainer type="submit">תאם לי שיעור</ButtonContainer>
          </form>
        </FormContainer>
      </DetailsContainer>
    );
  }
}

export default Details;


import styled from "styled-components";

export const DetailsContainer = styled.div`
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 50%;

  @media screen and (max-width: 800px) {
    width: 100%;
  }
`;

export const StaticDetailsContainer = styled.img`
  width: 100%;
`;

export const FormContainer = styled.div`
  display: flex;
`;

export const ButtonContainer = styled.button`
  width: 25%;
  height: 5vh;
  background-color: #2eaaa7;
  margin: auto;
  color: white;
  font-family: arial, sans-serif;
  font-size: 26px;
  border: none;

  @media screen and (max-width: 800px) {
    font-size: 15px;
    overflow: hidden;
  }
`;

Вот как это должно быть:

enter image description here

1 Ответ

2 голосов
/ 07 марта 2020

Попробуйте использовать это CSS Сетка Макет : 

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}
.span-row-2{grid-row: span 2 / auto;}
<div class="grid">
  <div class="span-row-2">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>

Существует классный веб-сайт под названием cssgr.id , на котором вы можете создавать CSS макеты сетки визуально.

Надеюсь, у вас это получится!

...