I have the index list working as intended but I still have problems with the table and footer.
Known problems:
- table header doesn't stay fixed when I scroll
- table height is not responsive and overflows into the footer
- table x scroll bar is at the bottom of the page and is not at the bottom of the table view. Intended functionality is the same as the code snippets on this site.
- footer margin is not enforced on mobile.
- footer height causing large white space at the bottom of the div. Most likely due to height property resizing the div.
Below is the intended design.
html {
font-family: Arial, Helvetica, sans-serif;
}
body {
/* padding-bottom: 80px; */
/* height: 100% */
}
main {
/* display: flex; */
/* flex-direction: column; */
/* flex-grow: 1; */
margin-bottom: 80px;
/* overflow: hidden; */
}
footer {
margin-top: 80px;
height: 10vh;
}
.indices-container {
margin: auto;
}
.sp500-table-container {
height: 70vh;
width: 100vw;
overflow: auto;
/* overflow-x: scroll; */
/* overflow-y: scroll; */
position: relative;
/* padding-bottom: 80px; */
/* flex: 1; */
/* margin-bottom: 16px; */
}<!doctype html>
<html style="font-family: Arial" lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="/static/style.css">
<title></title>
</head>
<body class="bg-dark text-white container-fluid">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://kit.fontawesome.com/f149088b14.js" crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> -->
<!-- <script src="path/to/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.min.js"></script> -->
<header class="navbar navbar-expand-sm navbar-dark sticky-top bg-dark">
<a class="navbar-brand" href="/">Paper Money</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<div class="navbar-nav ml-auto">
<a class="nav-link text-nowrap" href="/auth/register">Register</a>
<a class="nav-link text-nowrap" href="/auth/login">Log In</a>
</div>
</div>
<form id= "searchInput"class="form-inline w-100" action="/company_overview" method="get">
<input class="form-control form-control-dark w-100" name="q" type="search" placeholder="Search by ticker symbol..." aria-label="Search">
</form>
</header>
<main role="main" class="container-fluid">
<div class="indices-container">
<div class="row text-center mx-1">
<div class="col-4 px-1">
<div class="row mx-0">
<div class="col-12 col-md-6 px-0">
VOO<br>
<span class="d-none d-lg-block">$431.05</span>
<span class="d-none d-lg-block">-0.19% 1-Day</span>
26.69% YTD
</div>
<div class="col-12 col-md-6 px-0">
BND<br>
<span class="d-none d-lg-block">$85.23</span>
<span class="d-none d-lg-block">0.21% 1-Day</span>
-1.93% YTD
</div>
</div>
</div>
<div class="col-4 px-1">
<div class="row mx-0">
<div class="col-12 col-md-6 px-0">
VXUS<br>
<span class="d-none d-lg-block">$65.61</span>
<span class="d-none d-lg-block">-0.23% 1-Day</span>
10.80% YTD
</div>
<div class="col-12 col-md-6 px-0">
VEA<br>
<span class="d-none d-lg-block">$51.99</span>
<span class="d-none d-lg-block">-0.76% 1-Day</span>
11.96% YTD
</div>
</div>
</div>
<div class="col-4 px-1">
<div class="row mx-0">
<div class="col-12 col-md-6 px-0">
VWO<br>
<span class="d-none d-lg-block">$51.06</span>
<span class="d-none d-lg-block">-0.18% 1-Day</span>
3.54% YTD
</div>
<div class="col-12 col-md-6 px-0">
BNDX<br>
<span class="d-none d-lg-block">$56.95</span>
<span class="d-none d-lg-block">0.16% 1-Day</span>
-2.10% YTD
</div>
</div>
</div>
</div>
</div>
<div class="sp500-table-container">
<div class="table-responsive" id="sp500Table">
<table class="table table-light table-striped table-sm header-fixed" id="sp500Table">
<thead class="thead-light">
<tr>
<th>#</th>
<th>Symbol</th>
<th>Security</th>
<th>SEC Filings</th>
<th>Sector</th>
<th>Sub Sector</th>
<th>Headquarters</th>
<th>Date First Added</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>MMM</td>
<td>3M</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=MMM&action=getcompany" target="_blank">link</a></td>
<td>Industrials</td>
<td>Industrial Conglomerates</td>
<td>Saint Paul, Minnesota</td>
<td>1976-08-09</td>
</tr>
<tr>
<td>2</td>
<td>ABT</td>
<td>Abbott Laboratories</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ABT&action=getcompany" target="_blank">link</a></td>
<td>Health Care</td>
<td>Health Care Equipment</td>
<td>North Chicago, Illinois</td>
<td>1964-03-31</td>
</tr>
<tr>
<td>3</td>
<td>ABBV</td>
<td>AbbVie</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ABBV&action=getcompany" target="_blank">link</a></td>
<td>Health Care</td>
<td>Pharmaceuticals</td>
<td>North Chicago, Illinois</td>
<td>2012-12-31</td>
</tr>
<tr>
<td>4</td>
<td>ABMD</td>
<td>Abiomed</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ABMD&action=getcompany" target="_blank">link</a></td>
<td>Health Care</td>
<td>Health Care Equipment</td>
<td>Danvers, Massachusetts</td>
<td>2018-05-31</td>
</tr>
<tr>
<td>5</td>
<td>ACN</td>
<td>Accenture</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ACN&action=getcompany" target="_blank">link</a></td>
<td>Information Technology</td>
<td>IT Consulting & Other Services</td>
<td>Dublin, Ireland</td>
<td>2011-07-06</td>
</tr>
<tr>
<td>6</td>
<td>ATVI</td>
<td>Activision Blizzard</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ATVI&action=getcompany" target="_blank">link</a></td>
<td>Communication Services</td>
<td>Interactive Home Entertainment</td>
<td>Santa Monica, California</td>
<td>2015-08-31</td>
</tr>
<tr>
<td>7</td>
<td>ADBE</td>
<td>Adobe</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ADBE&action=getcompany" target="_blank">link</a></td>
<td>Information Technology</td>
<td>Application Software</td>
<td>San Jose, California</td>
<td>1997-05-05</td>
</tr>
<tr>
<td>8</td>
<td>AMD</td>
<td>Advanced Micro Devices</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AMD&action=getcompany" target="_blank">link</a></td>
<td>Information Technology</td>
<td>Semiconductors</td>
<td>Santa Clara, California</td>
<td>None</td>
</tr>
<tr>
<td>9</td>
<td>AAP</td>
<td>Advance Auto Parts</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AAP&action=getcompany" target="_blank">link</a></td>
<td>Consumer Discretionary</td>
<td>Automotive Retail</td>
<td>Raleigh, North Carolina</td>
<td>2015-07-09</td>
</tr>
<tr>
<td>10</td>
<td>AES</td>
<td>AES Corp</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AES&action=getcompany" target="_blank">link</a></td>
<td>Utilities</td>
<td>Independent Power Producers & Energy Traders</td>
<td>Arlington, Virginia</td>
<td>1998-10-02</td>
</tr>
<tr>
<td>11</td>
<td>AFL</td>
<td>Aflac</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AFL&action=getcompany" target="_blank">link</a></td>
<td>Financials</td>
<td>Life & Health Insurance</td>
<td>Columbus, Georgia</td>
<td>1999-05-28</td>
</tr>
<tr>
<td>12</td>
<td>A</td>
<td>Agilent Technologies</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=A&action=getcompany" target="_blank">link</a></td>
<td>Health Care</td>
<td>Health Care Equipment</td>
<td>Santa Clara, California</td>
<td>2000-06-05</td>
</tr>
<tr>
<td>13</td>
<td>APD</td>
<td>Air Products & Chemicals</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=APD&action=getcompany" target="_blank">link</a></td>
<td>Materials</td>
<td>Industrial Gases</td>
<td>Allentown, Pennsylvania</td>
<td>1985-04-30</td>
</tr>
<tr>
<td>14</td>
<td>AKAM</td>
<td>Akamai Technologies</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AKAM&action=getcompany" target="_blank">link</a></td>
<td>Information Technology</td>
<td>Internet Services & Infrastructure</td>
<td>Cambridge, Massachusetts</td>
<td>2007-07-12</td>
</tr>
<tr>
<td>15</td>
<td>ALK</td>
<td>Alaska Air Group</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ALK&action=getcompany" target="_blank">link</a></td>
<td>Industrials</td>
<td>Airlines</td>
<td>Seattle, Washington</td>
<td>2016-05-13</td>
</tr>
<tr>
<td>16</td>
<td>ALB</td>
<td>Albemarle Corporation</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ALB&action=getcompany" target="_blank">link</a></td>
<td>Materials</td>
<td>Specialty Chemicals</td>
<td>Charlotte, North Carolina</td>
<td>2016-07-01</td>
</tr>
<tr>
<td>17</td>
<td>ARE</td>
<td>Alexandria Real Estate Equities</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ARE&action=getcompany" target="_blank">link</a></td>
<td>Real Estate</td>
<td>Office REITs</td>
<td>Pasadena, California</td>
<td>2017-03-20</td>
</tr>
<tr>
<td>18</td>
<td>ALGN</td>
<td>Align Technology</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ALGN&action=getcompany" target="_blank">link</a></td>
<td>Health Care</td>
<td>Health Care Supplies</td>
<td>San Jose, California</td>
<td>2017-06-19</td>
</tr>
<tr>
<td>19</td>
<td>ALLE</td>
<td>Allegion</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ALLE&action=getcompany" target="_blank">link</a></td>
<td>Industrials</td>
<td>Building Products</td>
<td>New York City, New York</td>
<td>2013-12-02</td>
</tr>
<tr>
<td>20</td>
<td>LNT</td>
<td>Alliant Energy</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=LNT&action=getcompany" target="_blank">link</a></td>
<td>Utilities</td>
<td>Electric Utilities</td>
<td>Madison, Wisconsin</td>
<td>2016-07-01</td>
</tr>
<tr>
<td>21</td>
<td>ALL</td>
<td>Allstate Corp</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ALL&action=getcompany" target="_blank">link</a></td>
<td>Financials</td>
<td>Property & Casualty Insurance</td>
<td>Northfield Township, Illinois</td>
<td>1995-07-13</td>
</tr>
<tr>
<td>22</td>
<td>GOOGL</td>
<td>Alphabet</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=GOOGL&action=getcompany" target="_blank">link</a></td>
<td>Communication Services</td>
<td>Interactive Media & Services</td>
<td>Mountain View, California</td>
<td>2014-04-03</td>
</tr>
<tr>
<td>23</td>
<td>GOOG</td>
<td>Alphabet</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=GOOG&action=getcompany" target="_blank">link</a></td>
<td>Communication Services</td>
<td>Interactive Media & Services</td>
<td>Mountain View, California</td>
<td>2006-04-03</td>
</tr>
<tr>
<td>24</td>
<td>MO</td>
<td>Altria Group</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=MO&action=getcompany" target="_blank">link</a></td>
<td>Consumer Staples</td>
<td>Tobacco</td>
<td>Richmond, Virginia</td>
<td>1957-03-04</td>
</tr>
<tr>
<td>25</td>
<td>AMZN</td>
<td>Amazon</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AMZN&action=getcompany" target="_blank">link</a></td>
<td>Consumer Discretionary</td>
<td>Internet & Direct Marketing Retail</td>
<td>Seattle, Washington</td>
<td>2005-11-18</td>
</tr>
<tr>
<td>26</td>
<td>AMCR</td>
<td>Amcor</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AMCR&action=getcompany" target="_blank">link</a></td>
<td>Materials</td>
<td>Paper Packaging</td>
<td>Zurich, Switzerland</td>
<td>2019-06-07</td>
</tr>
<tr>
<td>27</td>
<td>AEE</td>
<td>Ameren Corp</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AEE&action=getcompany" target="_blank">link</a></td>
<td>Utilities</td>
<td>Multi-Utilities</td>
<td>St. Louis, Missouri</td>
<td>1991-09-19</td>
</tr>
<tr>
<td>28</td>
<td>AAL</td>
<td>American Airlines Group</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AAL&action=getcompany" target="_blank">link</a></td>
<td>Industrials</td>
<td>Airlines</td>
<td>Fort Worth, Texas</td>
<td>2015-03-23</td>
</tr>
<tr>
<td>29</td>
<td>AEP</td>
<td>American Electric Power</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AEP&action=getcompany" target="_blank">link</a></td>
<td>Utilities</td>
<td>Electric Utilities</td>
<td>Columbus, Ohio</td>
<td>1957-03-04</td>
</tr>
<tr>
<td>30</td>
<td>AXP</td>
<td>American Express</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AXP&action=getcompany" target="_blank">link</a></td>
<td>Financials</td>
<td>Consumer Finance</td>
<td>New York City, New York</td>
<td>1976-06-30</td>
</tr>
<tr>
<td>31</td>
<td>AIG</td>
<td>American International Group</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AIG&action=getcompany" target="_blank">link</a></td>
<td>Financials</td>
<td>Property & Casualty Insurance</td>
<td>New York City, New York</td>
<td>1980-03-31</td>
</tr>
<tr>
<td>32</td>
<td>AMT</td>
<td>American Tower</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AMT&action=getcompany" target="_blank">link</a></td>
<td>Real Estate</td>
<td>Specialized REITs</td>
<td>Boston, Massachusetts</td>
<td>2007-11-19</td>
</tr>
<tr>
<td>33</td>
<td>AWK</td>
<td>American Water Works</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AWK&action=getcompany" target="_blank">link</a></td>
<td>Utilities</td>
<td>Water Utilities</td>
<td>Camden, New Jersey</td>
<td>2016-03-04</td>
</tr>
<tr>
<td>34</td>
<td>AMP</td>
<td>Ameriprise Financial</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AMP&action=getcompany" target="_blank">link</a></td>
<td>Financials</td>
<td>Asset Management & Custody Banks</td>
<td>Minneapolis, Minnesota</td>
<td>2005-10-03</td>
</tr>
<tr>
<td>35</td>
<td>ABC</td>
<td>AmerisourceBergen</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ABC&action=getcompany" target="_blank">link</a></td>
<td>Health Care</td>
<td>Health Care Distributors</td>
<td>Chesterbrook, Pennsylvania</td>
<td>2001-08-30</td>
</tr>
<tr>
<td>36</td>
<td>AME</td>
<td>Ametek</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AME&action=getcompany" target="_blank">link</a></td>
<td>Industrials</td>
<td>Electrical Components & Equipment</td>
<td>Berwyn, Pennsylvania</td>
<td>2013-09-23</td>
</tr>
<tr>
<td>37</td>
<td>AMGN</td>
<td>Amgen</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AMGN&action=getcompany" target="_blank">link</a></td>
<td>Health Care</td>
<td>Biotechnology</td>
<td>Thousand Oaks, California</td>
<td>1992-01-02</td>
</tr>
<tr>
<td>38</td>
<td>APH</td>
<td>Amphenol</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=APH&action=getcompany" target="_blank">link</a></td>
<td>Information Technology</td>
<td>Electronic Components</td>
<td>Wallingford, Connecticut</td>
<td>2008-09-30</td>
</tr>
<tr>
<td>39</td>
<td>ADI</td>
<td>Analog Devices</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ADI&action=getcompany" target="_blank">link</a></td>
<td>Information Technology</td>
<td>Semiconductors</td>
<td>Wilmington, Massachusetts</td>
<td>1999-10-12</td>
</tr>
<tr>
<td>40</td>
<td>ANSS</td>
<td>Ansys</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ANSS&action=getcompany" target="_blank">link</a></td>
<td>Information Technology</td>
<td>Application Software</td>
<td>Canonsburg, Pennsylvania</td>
<td>2017-06-19</td>
</tr>
<tr>
<td>41</td>
<td>ANTM</td>
<td>Anthem</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=ANTM&action=getcompany" target="_blank">link</a></td>
<td>Health Care</td>
<td>Managed Health Care</td>
<td>Indianapolis, Indiana</td>
<td>2002-07-25</td>
</tr>
<tr>
<td>42</td>
<td>AON</td>
<td>Aon</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AON&action=getcompany" target="_blank">link</a></td>
<td>Financials</td>
<td>Insurance Brokers</td>
<td>London, UK</td>
<td>1996-04-23</td>
</tr>
<tr>
<td>43</td>
<td>AOS</td>
<td>A. O. Smith</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AOS&action=getcompany" target="_blank">link</a></td>
<td>Industrials</td>
<td>Building Products</td>
<td>Milwaukee, Wisconsin</td>
<td>2017-07-26</td>
</tr>
<tr>
<td>44</td>
<td>APA</td>
<td>APA Corporation</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=APA&action=getcompany" target="_blank">link</a></td>
<td>Energy</td>
<td>Oil & Gas Exploration & Production</td>
<td>Houston, Texas</td>
<td>1997-07-28</td>
</tr>
<tr>
<td>45</td>
<td>AAPL</td>
<td>Apple</td>
<td><a href="https://www.sec.gov/cgi-bin/browse-edgar?CIK=AAPL&action=getcompany" target="_blank">link</a></td>
<td>Information Technology</td>
<td>Technology Hardware, Storage & Peripherals</td>
<td>Cupertino, California</td>
<td>1982-11-30</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<footer class="page-footer font-small fixed-bottom">
<div class="container-fluid text-center">
<ul class="list-unstyled list-inline text-center">
<li class="list-inline-item">
<a href="#">GitLab</a>
</li>
<li class="list-inline-item">
<a href="#" target="_blank">About the Author</a>
</li>
<li class="list-inline-item">
<a href="#" target="_blank">About the App</a>
</li>
<li class="list-inline-item">
<a href="#" target="_blank">Code License</a>
</li>
<li class="list-inline-item">
<a href="#" target="_blank">Contact Me</a>
</li>
</ul>
</div>
</footer>
</body>
</html>CodePudding user response：
Have managed to solve all bugs by changing the CSS file except for the table header being sticky.
Here's the code for it
html {
font-family: Arial, Helvetica, sans-serif;
}
body {
/* padding-bottom: 80px; */
/* height: 100% */
}
main {
/* display: flex; */
/* flex-direction: column; */
/* flex-grow: 1; */
margin-bottom: 80px;
/* overflow: hidden; */
}
footer {
margin-top: 80px;
height: 10vh;
width:100%;
padding:0.4rem 0;
background:#343A40;
}
@media all and (max-width:700px){
footer{
font-size:1rem;
margin:0 1rem;
}
}
.indices-container {
margin: auto;
}
.sp500-table-container {
height: 70vh !important;
width: 100vw;
position: relative;
/* padding-bottom: 80px; */
/* flex: 1; */
/* margin-bottom: 16px; */
}
main{
overflow-x:scroll;
}