Set a sidebar

Asked

Viewed 452 times

1

I have two components, a form and a sidebar, I want to let my sidebar stay fixed on the screen and when I add data in the form and saving as I insert the sidebar do not "move". At this link ( https://imgur.com/a/IRCLVE0 ) is as is the sidebar and the form, when I touch the sidebar css to change some configuration it will disfigure all the place form. Can someone help me??

Css of the form:

.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;
  }

Css of the sidebar:

.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>
  • So I don’t know how to write in an easy way. But for example, when I add some data in the form, it increases on the screen, when it passes from the site of the sidebar to sidebar is fixed and does not follow the increase of the part of the form. I wanted as the form was increasing when I input the data, the sidebar accompanies it as well. I think that’s as much as I can explain..

  • It would be necessary to put the structure of html, to see how the elements relate.

  • @dvd that is, it is fixed on one hand, but does not occupy the whole screen, look at this model as it is according to what I told you ( https://imgur.com/a/nNwNyiv )

  • @Magichat then, only it would be very extensive pq I’m doing by jsx/React, and its code is extensive and I use more than one file to stir..

  • @dvd has not changed anything..

  • @Magichat put up, and only a part of the form, because it itself is already extended the code.

  • @dvd then how do I not get like this, and stay "fixed" on the 100% screen, because whenever I change css it changes in the position of the form..

  • CSS is right, with Fixed and everything. When you scroll the screen the sidebar also goes up as if it was not fixed?

  • @dvd yes, exact

  • Have you tried changing this className='list-wrapper' by just class='list-wrapper'?

  • It seems that you are using a framework, I do not know if it will affect.

  • @dvd changed here and nothing has changed.. And I am not using framework....

  • I think you will have to analyze in the Inspect Element browser to see the behavior of the div.

  • @dvd the error was because the measurements were in cm..

  • ah tah rs.......

Show 10 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.