Html: нижний колонтитул страницы и полная форма перекрываются - PullRequest
Новая
       180

Html: нижний колонтитул страницы и полная форма перекрываются

1 голос
/ 30 мая 2020

Я использую готовый шаблон , так как мои навыки css / html очень скромные, и мне удобнее заниматься бэкэнд-разработкой.

Это предварительно определенный логин страница:
enter image description here

На странице регистрации (которая содержит гораздо больше полей), которую я создал на основе заранее заданной страницы входа: enter image description here Обратите внимание, как нижний колонтитул перепутался с формой.
Это код html: 

 <>
      <ExamplesNavbar />
      <div
        className="page-header"
        style={{
          backgroundImage: "url(" + require("assets/img/login-image.jpg") + ")",
        }}
      >
        <div className="filter" />
        <Container>
          <Row>
            <Col className="ml-auto mr-auto" lg="4">
              <Card className="card-register ml-auto mr-auto">
                <h3 className="title mx-auto">Welcome</h3>
                <div className="social-line text-center">
                  <Button
                    className="btn-neutral btn-just-icon mr-1"
                    color="facebook"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    <i className="fa fa-facebook-square" />
                  </Button>
                  <Button
                    className="btn-neutral btn-just-icon mr-1"
                    color="google"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    <i className="fa fa-google-plus" />
                  </Button>
                  <Button
                    className="btn-neutral btn-just-icon"
                    color="twitter"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    <i className="fa fa-twitter" />
                  </Button>
                </div>
                <Form className="register-form">
                  <label>First name</label>
                  <Input placeholder="First name" type="text" />
                  <label>Surname</label>
                  <Input placeholder="Surname" type="text" />
                  <label>Email</label>
                  <Input placeholder="Email" type="text" />
                  <label>Password</label>
                  <Input placeholder="Password" type="password" />
                  <label>Confirm password</label>
                  <Input placeholder="Password" type="password" />
                  <label>Birthday</label>
                  <Input placeholder="date placeholder" type="date" />
                  <label>Country</label>
                  <CountryDropdown
                    style={{ width: "100%" }}
                    value={"Tunisia"}
                    // onChange={(val) => this.selectCountry(val)}
                  />
                  <Button block className="btn-round" color="danger">
                    Login
                  </Button>
                </Form>
                <div className="forgot">
                  <Button
                    className="btn-link"
                    color="danger"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    Forgot password?
                  </Button>
                </div>
              </Card>
            </Col>
          </Row>
        </Container>
        <div className="footer register-footer text-center">
          <h6>
            © {new Date().getFullYear()}, made with{" "}
            <i className="fa fa-heart heart" /> by Creative Tim
          </h6>
        </div>
      </div>
    </>

Я немного удивлен, что это происходит, поскольку Я никогда не видел перекрытия html элементов. Но, как я уже сказал, мои навыки и знания в области интерфейса все еще накапливаются. Так что, если бы кто-нибудь мог предложить объяснение / решение для этого, я был бы более чем благодарен.

ПРИМЕЧАНИЕ: Это построено с использованием Reactstrap.

1 Ответ

0 голосов
/ 30 мая 2020

По какой-то причине, когда я изменил код реакции с функционального компонента на компонент с отслеживанием состояния, проблема исчезла:
enter image description here

function RegisterPage() {
  document.documentElement.classList.remove("nav-open");
  React.useEffect(() => {
    document.body.classList.add("register-page");
    return function cleanup() {
      document.body.classList.remove("register-page");
    };
  });
  return (
    <>
      <ExamplesNavbar />
      <div
        className="page-header"
        style={{
          backgroundImage: "url(" + require("assets/img/login-image.jpg") + ")",
        }}
      >
        <div className="filter" />
        <Container>
          <Row>
            <Col className="ml-auto mr-auto" lg="4">
              <Card className="card-register ml-auto mr-auto">
                <h3 className="title mx-auto">Welcome</h3>
                <div className="social-line text-center">
                  <Button
                    className="btn-neutral btn-just-icon mr-1"
                    color="facebook"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    <i className="fa fa-facebook-square" />
                  </Button>
                  <Button
                    className="btn-neutral btn-just-icon mr-1"
                    color="google"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    <i className="fa fa-google-plus" />
                  </Button>
                  <Button
                    className="btn-neutral btn-just-icon"
                    color="twitter"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    <i className="fa fa-twitter" />
                  </Button>
                </div>
                <Form className="register-form">
                  <label>First name</label>
                  <Input
                    placeholder="First name"
                    type="text"
                    onChange={(e) => {
                      console.log(e.target.value);
                    }}
                  />
                  <label>Surname</label>
                  <Input placeholder="Surname" type="text" />
                  <label>Email</label>
                  <Input placeholder="Email" type="text" />
                  <label>Password</label>
                  <Input placeholder="Password" type="password" />
                  <label>Confirm password</label>
                  <Input placeholder="Password" type="password" />
                  <label>Birthday</label>
                  <Input placeholder="date placeholder" type="date" />
                  <label>Country</label>
                  <CountryDropdown
                    style={{ width: "100%" }}
                    value={"Tunisia"}
                    // onChange={(val) => this.selectCountry(val)}
                  />
                  <Button block className="btn-round" color="danger">
                    Login
                  </Button>
                </Form>
                <div className="forgot">
                  <Button
                    className="btn-link"
                    color="danger"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    Forgot password?
                  </Button>
                </div>
              </Card>
            </Col>
          </Row>
        </Container>
        <div className="footer register-footer text-center">
          <h6>
            © {new Date().getFullYear()}, made with{" "}
            <i className="fa fa-heart heart" /> by Creative Tim
          </h6>
        </div>
      </div>
    </>
  );
}

На это: 

export class RegisterPage extends Component {
  constructor() {
    super();
    this.state = {
      email: "",
    };
  }

  render() {
    return (
      <>
        <ExamplesNavbar />
        <div
          className="page-header"
          style={{
            backgroundImage:
              "url(" + require("assets/img/login-image.jpg") + ")",
          }}
        >
          <div className="filter" />
          <Container>
            <Row>
              <Col className="ml-auto mr-auto" lg="4">
                <Card className="card-register ml-auto mr-auto">
                  <h3 className="title mx-auto">Welcome</h3>
                  <div className="social-line text-center">
                    <Button
                      className="btn-neutral btn-just-icon mr-1"
                      color="facebook"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      <i className="fa fa-facebook-square" />
                    </Button>
                    <Button
                      className="btn-neutral btn-just-icon mr-1"
                      color="google"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      <i className="fa fa-google-plus" />
                    </Button>
                    <Button
                      className="btn-neutral btn-just-icon"
                      color="twitter"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      <i className="fa fa-twitter" />
                    </Button>
                  </div>
                  <Form className="register-form">
                    <label>First name</label>
                    <Input
                      placeholder="First name"
                      type="text"
                      onChange={(e) => {
                        console.log(e.target.value);
                      }}
                    />
                    <label>Surname</label>
                    <Input placeholder="Surname" type="text" />
                    <label>Email</label>
                    <Input placeholder="Email" type="text" />
                    <label>Password</label>
                    <Input placeholder="Password" type="password" />
                    <label>Confirm password</label>
                    <Input placeholder="Password" type="password" />
                    <label>Birthday</label>
                    <Input placeholder="date placeholder" type="date" />
                    <label>Country</label>
                    <CountryDropdown
                      style={{ width: "100%" }}
                      value={"Tunisia"}
                      // onChange={(val) => this.selectCountry(val)}
                    />
                    <Button block className="btn-round" color="danger">
                      Login
                    </Button>
                  </Form>
                  <div className="forgot">
                    <Button
                      className="btn-link"
                      color="danger"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      Forgot password?
                    </Button>
                  </div>
                </Card>
              </Col>
            </Row>
          </Container>
          <div className="footer register-footer text-center">
            <h6>
              © {new Date().getFullYear()}, made with{" "}
              <i className="fa fa-heart heart" /> by Creative Tim
            </h6>
          </div>
        </div>
      </>
    );
  }
}
...