How not to overlap the header from another file? - html

I've made a header jsp file to use other pages.
In the header file, there is a nav bar that sticks to the top(using bootstrap)
When I include the header file at another page, navbar is all good
but contents are overlapped by the nav bar.
Below is the code from another page, and I also attached how it looks.
<html>
<%# include file="../include/header.jsp" %>
<head>
<title>Home</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</script>
<style>
table { table-layout: fixed; }
table th, table td { overflow: hidden; }
td {
white-space:pre
}
</style>
</head>
<body>
<div class="container">
<br>
<h2>English lines are under here</h2>
<h5>Just click each cell if you want to modify</h5>
<br>
<table id="btable" class="bg-light table table-hover table-condensed">
<thead>
<th class= "text-center" width="6%">No</th>
<th class= "text-center" width="12%">Word</th>
<th class= "text-center" width="44%">Dialogue</th>
<th class= "text-center" width="40%">Practice</th>
</thead>
The picture is being overlapped by navbar

Related

Why is my Bootstrap table overflowing the containing card?

Actually i'm trying to set a table inside a bootstrap card, the issue is that the table width goes out off that card and i would to prevent it.
The table is made for each tr of one th and 96 td.
I was trying to set the table width to 100% and set to each td 1% of width but i didn't worked
Here is the table code:
<div class="col-md-8">
<div class="card p-2">
<div class="card-body text-center" >
<div class="table-responsive">
<table class="table table-hover">
<tbody>
<asp:PlaceHolder ID="placeholder" runat="server"></asp:PlaceHolder>
</tbody>
</table>
</div>
</div>
</div>
</div>
The issue is the padding that Bootstrap applies. It results in each cell having a minimum width of 24px.
.table.no-cellpadding td
padding: 0;
}
Demo
Are you wrapping each set of td tags with a tr?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="col-md-8">
<div class="card p-2">
<div class="card-body text-center">
<div class="table-responsive">
<table class="table table-hover">
<tbody>
<tr class="class">
</tr>
<tr class="class">
</tr>
<tr class="class">
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = () => {
let allTrs = document.querySelectorAll('tr.class');
allTrs.forEach((tr) => {
for (let i = 0; i < 96; i++) {
const newTd = document.createElement('td');
newTd.style = "width: 1%";
newTd.appendChild(document.createTextNode('value'))
tr.appendChild(newTd)
}
})
}
</script>
</body>
</html>
Does this fit your needs?

Can not make vertical-align:middle work in a bootstrap table

Update
Based on jme11 answer the d-flex is preventing the alignment, however without d-flex the columns are totally messed up (using bootstrap 4)
To reporoduce: (first row should be aligned middle, but it is not)
http://jsbin.com/fafoweleka/1/edit?html,css,output
Context
I would like to align my text in a bootstrap 4 table. I am trying to use vertical-align:middle, but text is still aligned to top.
Question
What am I missing?
Markup:
<table class="table">
<tr class="d-flex">
<td class="col-1">1</td>
<td class="col-4" style="vertical-align:middle">Miami</td>
<td class="col-3">4.0</td>
<td class="col-3"></td>
</tr>
</table>
Result:
EDIT
If you want to use the d-flex class on the tr elements to allow for use of the col classes on the cells, you can align the text in a specific cell vertically by adding d-flex and align-items-center class to that cell.
.strecher {
height: 200px;
}
.my-table td {
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<h3>For a specific cell:</h3>
<table class="table" style="background-color: #eee;">
<tr class="d-flex">
<td class="col-1">1</td>
<td class="col-4 d-flex align-items-center">Miami</td>
<td class="col-3">4.0</td>
<td class="col-3"><div class=strecher></div></td>
</tr>
</table>
<h3>For all cells:</h3>
<table class="table my-table" style="background-color: #eee;">
<tr class="d-flex">
<td class="col-1">1</td>
<td class="col-4">Miami</td>
<td class="col-3">4.0</td>
<td class="col-3"><div class=strecher></div></td>
</tr>
</table>
</body>
</html>

css Autosize table header with glyphicon

Is it possible to autosize a column by its header size which includes a glyphicon right aligned?
E.g.:
<th class='autosize'>Col1 <span class='glyphicon glyphicon-sort pull-right' aria-hidden='true'></span></th>
And the style:
<style>
.autosize {
width: 1px;
white-space: nowrap;
}
</style>
Pushes the glyphicon to the second column.
Full code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.autosize {
width: 1px;
white-space: nowrap;
}
</style>
</head>
<body>
<table class="table table-bordered" style="width: 1px;">
<thead>
<tr>
<th class='autosize'>Col1 <span class='glyphicon glyphicon-sort pull-right' aria-hidden='true'></span></th>
</tr>
</thead>
</table>
</body>
</html>
Gee always the way you spend hours changing css to see what works and by posting here I had the light turned on, all I had to do is remove the pull-right class out of the glyphicon

Align text above material design icon (using materializecss)

I am currently using the materializecss framework and pulling in an icon and putting it beside a text. I need to align the text in the middle above the icon with css but what I currently have does not seem to be working.
<table class="centered">
<thead>
<th class="align-text"><i class="material-icons small">timer</i>Time</th>
<th>Another header</th>
<th>And another header</th>
</thead>
</table>
my css file at the moment:
.align-text {
display: inline-block;
text-align: center;
vertical-align: top;
}
However, the text still stays to the right of icon.
This is the result that I am ultimately trying to achieve.
Updated: Here's what you need ^_^ DEMO
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<style>
th {
display: inline-block;
}
.align-text {
display: inline-block;
text-align: center;
vertical-align: top;
}
span {
display: block;
}
</style>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<table class="centered">
<thead>
<th class="align-text"><span>Time</span><i class="material-icons small">timer</i>
</th>
<th class="align-text"><span>Time</span><i class="material-icons small">timer</i>
</th>
<th class="align-text"><span>Time</span><i class="material-icons small">timer</i>
</th>
</thead>
</table>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>

Unwanted space before page-header in Bootstrap

Just starting with Bootstrap and I am trying to make the page-header align to the top of page with no space between the start of header and web page (just like the black StackOverflow header on this page).
The code for the same is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="css/bootstrap.min.css" ></link>
</head>
<body>
<div class="page-header" style="color:#FFFFFF;background-color:#009688;margin-top:0px">
<h1 style="text-align:center" >Welcome to USICT ATTENDANCE RECORD</h1>
</div>
<div class="container-fluid">
<p style="padding:1em 2em 1sem 2em">The table lists the name of people
studying in USICT along with their attendance in each subject.
</p>
<br/>
<table class="table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Attendance(in %)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rahul</td>
<td>Tyagi</td>
<td>rahul.1992.tyagi#gmail.com</td>
<td>70</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
However I am getting a space between header and address bar of browser as shown in picture below:
I have tried setting
margin-top:0px;
and
position:absolute;
top:0px;
both don't work.
The h1 has a margin that exceeds the green bar.
Apply the following styles:
<div class="page-header" style="color:#FFFFFF;background-color:#009688;padding:9px 4px;margin-top:0;">
<h1 style="text-align:center;margin-top:10px;">Welcome to USICT ATTENDANCE RECORD</h1>
Working JSFiddle.
I Found out the culprit actually it was the h1 which was causing problems.
Since bootstrap applies default margins to h1,h2,h3 ...etc .
So I had to set both the margin of page-header as well as h1 to zero
which solved the problem.
Thank you for the slight hint about h1 from Xufox
Every heading tag such as h1, h2, h3 etc has its own margin thats why you get a white space.Before style your markup you should initializing some style example: tag , , so that you do get twitter bootstrap's own style.This is good practicing of style from markup.
Why don't you put a container-fluid and then a row and your page-header ?
Like this :
<div class="container-fluid">
<div class="row">
<div class="page-header">blabla</div>
</div>
</div>