From f088e1beab9396a3a721eefade740265d40f2dfd Mon Sep 17 00:00:00 2001
From: naina010 <naina24gupta@gmail.com>
Date: Fri, 2 Oct 2020 11:26:22 +0530
Subject: [PATCH] fixed container overflow

---
 src/App.css      |   4 +-
 src/myFaculty.js | 134 +++++++++++++++++++++++++----------------------
 2 files changed, 74 insertions(+), 64 deletions(-)

diff --git a/src/App.css b/src/App.css
index cccf63a..be08644 100644
--- a/src/App.css
+++ b/src/App.css
@@ -72,7 +72,7 @@ li {
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 5px;
     box-shadow: inset 1px 1px 0 white;
-    max-height: 450px;
+    max-height: 500px;
 }
 
 #facultyInfo {
@@ -84,7 +84,7 @@ ul {
     margin: 0 auto;
     padding: 0;
     max-height: 390px;
-    overflow-y: auto;
+    overflow-y: scroll;
     border: 1px solid rgba(0, 0, 0, 0.1);
     padding: 5px 5px 0 5px;
     border-left: none;
diff --git a/src/myFaculty.js b/src/myFaculty.js
index 4e11a30..813264c 100644
--- a/src/myFaculty.js
+++ b/src/myFaculty.js
@@ -3,71 +3,81 @@ import './App.css';
 import facultiesInfo from './data/faculties';
 import Profile from './Profile';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
 
-export default class AutoCompletedText extends React.Component{
+export default class AutoCompletedText extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			suggestions: [],
+			text: '',
+			showProfile: false,
+			selectedFaculty: {},
+		};
+	}
 
-    constructor(props){
-        super(props)
-        this.state = {
-            suggestions: [],
-            text: '',
-            showProfile: false,
-            selectedFaculty: {}
-        }
-    }
+	onTextChange = (e) => {
+		const value = e.target.value;
+		let suggestions = [];
+		if (value.length > 0) {
+			const regex = new RegExp(`^${value}`, 'i');
+			suggestions = facultiesInfo.sort().filter((v) => regex.test(v.FACULTY));
+			// suggestions = suggestions.map((value) => value.FACULTY);
+		}
 
-    onTextChange = (e) => {
-        const value = e.target.value;
-        let suggestions = [];
-        if(value.length > 0){
-            const regex = new RegExp(`^${value}`, 'i');
-            suggestions = facultiesInfo.sort().filter(v => regex.test(v.FACULTY));
-            // suggestions = suggestions.map((value) => value.FACULTY);
-        }
+		this.setState(() => ({
+			suggestions,
+			text: value,
+			showProfile: false,
+		}));
+	};
 
-        this.setState(() => ({
-            suggestions,
-            text: value,
-            showProfile: false
-        }))
-    }
+	selectedText(value) {
+		this.setState(() => ({
+			text: value.FACULTY,
+			suggestions: [],
+			showProfile: true,
+			selectedFaculty: value,
+		}));
+	}
 
-    selectedText(value) {
-        this.setState(() => ({
-            text: value.FACULTY,
-            suggestions: [],
-            showProfile: true,
-            selectedFaculty: value
-        }));
+	renderSuggestions = () => {
+		let { suggestions } = this.state;
+		if (suggestions.length === 0) {
+			return null;
+		}
+		return (
+			<ul>
+				{suggestions.map((item, index) => (
+					<li key={index} onClick={() => this.selectedText(item)}>
+						{item.FACULTY}
+					</li>
+				))}
+			</ul>
+		);
+	};
 
-    }
-
-    renderSuggestions = () => {
-        let { suggestions } = this.state;
-        if(suggestions.length === 0){
-            return null;
-        }
-        return (
-            <ul >
-                {
-                    suggestions.map((item, index) => (<li key={index} onClick={() => this.selectedText(item)}>{item.FACULTY}</li>))
-                }
-            </ul>
-        );
-    }
-    
-    render() {
-        const { text, suggestions } = this.state;
-        return(
-            <div id="notebooks">
-                <h2><FontAwesomeIcon icon={faSearch} /> Search Your Faculty</h2>
-                <input id="query" type="text" onChange={this.onTextChange} value={text}/>
-                {this.renderSuggestions()}
-                {this.state.showProfile ? <Profile {...this.state.selectedFaculty}/> : <div />}
-                <span>Suggestions: {suggestions.length}</span>
-            </div>
-        );
-    }
-
-}
\ No newline at end of file
+	render() {
+		const { text, suggestions } = this.state;
+		return (
+			<div id='notebooks'>
+				<h2>
+					<FontAwesomeIcon icon={faSearch} /> Search Your Faculty
+				</h2>
+				<input
+					id='query'
+					type='text'
+					onChange={this.onTextChange}
+					value={text}
+				/>
+				<div>{this.renderSuggestions()}</div>
+				{this.state.showProfile ? (
+					<Profile {...this.state.selectedFaculty} />
+				) : (
+					<div />
+				)}
+				<span>Suggestions: {suggestions.length}</span>
+			</div>
+		);
+	}
+}