0

I have a form in CSS, but it is cutting at the top of the form. When I attempt to scroll up, the browser won't let me.picture

Here you can see the scroll bar and part of an input cutting off. I have assigned no margin, or any bootstrap css properties of mt. I also have assigned no margin-top or margin-bottom in my CSS file to this form. Here is part of the CSS. The form is based in React.


@import url('https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css');


body{
  background-color: #282c34 !important;
}



.headerlog{
  color:azure;
}

.App {
  height:100vh;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.icons i{
  cursor:pointer; 
}

.icons{
  
  margin-bottom: 2px;
  background-color: #282c34;
  height:50px;
  width:600px;
  display:flex;
  justify-content: end;
  align-items:center;
}

.otp input{
  background-color: #282c34;
  border-color:white;
  color:white;
  border-radius: 5px !important;
  width: 2rem !important;
  margin: 5px !important;
}

.PhoneInputInput {
  border-radius:5px !important;
  background-color: #282c34; 
  border-color:white;
  color:azure;

}


.PhoneInputInput:hover{
  text-decoration: underline;
}

.PhoneInputInput:focus{
  outline:none;
  text-decoration: none;
}

.login_card{
  height:300px;
  width:600px;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.openbtn{
  border-radius: 5px;
}

.hospitalname{
  
  color:white;
}

.transferquest{
  color:white;
  display:flex;
  justify-content: center;
  align-items: center;
}



/*Home*/
.logout{
  cursor:pointer;
}

Here is the Form

import React from 'react'
import InputGroup from 'react-bootstrap/InputGroup';
import Form from 'react-bootstrap/Form';
function App() {

    const vitals="Temp: \r\nHeart Rate: \r\nBlood Pressure: \r\nPulse Ox: "
  return (
    <div className="App">
    <div className="header">
        <h1 className="text-white">Create A Transfer Request</h1>
    </div>
   
    <div className="info w-50">
        <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
          First Name
        </InputGroup.Text>
        <Form.Control
          aria-label="Default"
          aria-describedby="inputGroup-sizing-default"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
          Last Name
        </InputGroup.Text>
        <Form.Control
          aria-label="Default"
          aria-describedby="inputGroup-sizing-default"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
          DOB 
        </InputGroup.Text>
        <Form.Control
          aria-label="Default"
          aria-describedby="inputGroup-sizing-default"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
          Date of Admission
        </InputGroup.Text>
        <Form.Control
          aria-label="Default"
          aria-describedby="inputGroup-sizing-default"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
          Patient's Current Bed Status
        </InputGroup.Text>
        <Form.Control
        as="textarea"
          aria-label="Bed Status"
          
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
          Vital Signs
        </InputGroup.Text>
        <Form.Control
        as="textarea"
          aria-label="Vitals"
            defaultValue={vitals}
          rows="4"
        />
      </InputGroup>

      

      <InputGroup className="mb-3">
        <p className="text-white me-3"> Is the Patient on a ventilator?</p>
        <div className="yesorno text-white">
        <span><input type="radio"  className="radio"/> Yes</span>
        
        <span><input type="radio"  className="radio"/> No</span>
        </div>
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
          Drips
        </InputGroup.Text>
        <Form.Control
          aria-label="Default"
          aria-describedby="inputGroup-sizing-default"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
          Reasons for Transfer
        </InputGroup.Text>
        <Form.Control
        as="textarea"
          aria-label="Reason for Transfer"
           
        
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
          Consults/Services Needed
        </InputGroup.Text>
        <Form.Control
        as="textarea"
          aria-label="Reason for Transfer"
           
        
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
          Patient's Nurse Name
        </InputGroup.Text>
        <Form.Control
          aria-label="Default"
          aria-describedby="inputGroup-sizing-default"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
          Nurse Phone Number
        </InputGroup.Text>
        <Form.Control
          aria-label="Default"
          aria-describedby="inputGroup-sizing-default"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
        Patient's Physican's Name
        </InputGroup.Text>
        <Form.Control
          aria-label="Default"
          aria-describedby="inputGroup-sizing-default"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
        Physician's Contact Number
        </InputGroup.Text>
        <Form.Control
          aria-label="Default"
          aria-describedby="inputGroup-sizing-default"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
       Hospital Name
        </InputGroup.Text>
        <Form.Control
          aria-label="Default"
          aria-describedby="inputGroup-sizing-default"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
        Hospital Address
        </InputGroup.Text>
        <Form.Control
          aria-label="Default"
          aria-describedby="inputGroup-sizing-default"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
       Hospital Phone Number
        </InputGroup.Text>
        <Form.Control
          aria-label="Default"
          aria-describedby="inputGroup-sizing-default"
        />
      </InputGroup>

      
    
      </div>
    </div>
  )
}

export default App
Fortuner
  • 89
  • 1
  • 6

0 Answers0