Style input to be beside the table and add label

Arctos6135 · Dec 28, 2019 · 1ff9c52 · 1ff9c52
1 parent bb72a20
commit 1ff9c52
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/client/src/Matches.js b/client/src/Matches.js
@@ -18,9 +18,15 @@ class Matches extends React.Component {
 
     render() {
         return(
-            <div>
+            <div className="matchesContainer">
                 <h2>Matches</h2>
                 {this.props.event_code ? [
+
+				<form className="searchTeam">
+					<label>Search Team: </label>
+					<input type="text" id="team_to_search" name="team_to_search" onChangeCapture={this.onTeamChange} />
+				</form>,
+
                 <table className='matches'>
                   <thead>
                     <tr><th className='matchNumber rightDivider'>Number</th>
@@ -46,10 +52,6 @@ class Matches extends React.Component {
                 </tbody>
 			</table>,
 
-			<form>
-				<input type="text" id="team_to_search" name="team_to_search" onChangeCapture={this.onTeamChange} />
-			</form>,
-
 					 ] :<span>Select an event</span>}
                 </div>
         );

diff --git a/client/src/Strategy.css b/client/src/Strategy.css
@@ -72,6 +72,15 @@ text-align: left;
 padding-right: 1em;
 }
 
+.matchesContainer {
+	display: inline-block;
+}
+
+.searchTeam {
+	float: right;
+	margin-left: 1vw;
+}
+
 th.rightDivider, td.rightDivider {
 	border-right: var(--divider);
 }