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