Pin a sidebar

1

I have two components, a form and a sidebar, I want to let my sidebar stay on the screen and when I add data to the form and save as I insert the sidebar do not "move". In that link ( link ) is how is the sidebar and the form, when I move in the css of the sidebar to change some configuration unconfigures everything place form. Can someone help me??

Form Css:

.list-wrapper {

    width: 112%;
    height: 100%;
    background: url('./images/background.jpg');
    padding: 100px;
    margin-top: -18.4cm;
    margin-left: -3.5cm;
  }

  .card {

    margin-top: 15px;
    background: #fff;
    box-shadow: 0 5px 5px #ccc;
    width: 100%;
    height: 125px;
    padding: 10px;
  }


  .card-title {

    font-size: 2em;
    font-weight: 100;
    line-height: 1.5em;
  }

  .card-subtitle {

    font-size: 1.3em;
    font-weight: 500;
    color: #999;
  }

Sidebar css:

.sibebar-navegacao {

    position: fixed;
    width: 250px;
    height: 100%;
    left: 0;

}

.menu-item {

    display: block;
    width: 9%;
    height: 35vh;
    padding: 13px;
    background-color: #4682B4;
    color: #54FF9F;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.4em;
    text-decoration: none;
}

Sidebar:

import React, { Component } from 'react'

import { NavLink } from 'react-router-dom'


import { auth } from './base'


import './sidebar.css'


class Sidebar extends Component {


    render(props){

        return(
            <nav className='sidebar-navegacao'>
                <NavLink className='menu-item' to={'/admin/professor'}>PROFESSOR</NavLink>
                <NavLink className='menu-item' to={'/admin/turma'}>TURMA</NavLink>
                <NavLink className='menu-item' to={'/admin/disciplina'}>DISCIPLINA</NavLink>
            </nav>


        )
    } 

}

export default Sidebar

Form:

<div className='list-wrapper'>
        <form onSubmit={this.handleSave}>

          <InputField
            refValue={ref => this.docente = ref}
            idValue='docente'
            typeValue='text'
            requiredValue={true}
            label='Docente'
            spanWidth="120px"
          />

          <InputField
            refValue={ref => this.disciplina = ref}
            idValue='disciplina'
            typeValue='text'
            requiredValue={true}
            label='Disciplina'
            spanWidth="80px"
          />


          <button type='submit'>Salvar Dados </button>
        </form>
    
asked by anonymous 01.07.2018 / 20:44

0 answers