I'm having some problems on iphone while trying to show a "timeline" on iphone, the timeline is just a table with it's content.
The issue is that like if i have 30 rows on iphone there are shown just 28 while the other two are behind the footer and i'm able to show them only if i scroll not the div but entire page.
How can i set the height to the table in the way it's end on the footer start and not on the page end?
The page is build as the following (the table content is load dynamically)
<div class="container-fluid p-0">
<div class="card rounded-0" id="cardTav">
<div id="bodyTavoli" class="card-body text-center">
<div class="table-responsive tableFixHead">
<table class="table table-hover" id="tableLine" border="0" style="border: none; width: 100%; margin-bottom: 0px;">
<thead id="timehead">
<tr>
</tr>
</thead>
<tbody id="timeline">
</tbody>
</table>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
</div>
</footer>
Here is JSFiddle code (upper the container there is the nav) https://jsfiddle.net/3hvLwt6m/
Please modify your css code changes are given below
css
.tableFixHead {
overflow-y: auto;
max-height: 70vh;
}
table {
margin-bottom: 60px;
}
I think this will work try adding this in js fiddle you provided. I dont have a iphone so cant test.
you can modify css as followed..
.tableFixHead {
max-height: 70vh;
overflow-y: auto;
}
Related
I need to have a div (divParent) which needs to have 2 other divs (divContainer, divButtons) where the divButton will display at the very bottom of the DivParent and the divContainer will use the entire remaining space of the divParent up to the divButton, but it cannot overlap the divButtons and if the content of the divContainer is too big, I need the vertical scrollbar to be displayed.
I've got the following more or less working but the divContainer seems to be overlapping the divButtons and it does not display the vertical scrollbar if the content is too big, even when I specify overflow: auto or overflow-y: auto.
<div id="divParent" style="width: 100%; height: 100%; background-color: red; position: relative">
<div id="divContainer" style="overflow-y:auto;">
<table id="fields">
<large content goes here>
</table>
</div>
<div id="divButtons" style="width: 100%; background-color: blue; position: absolute; bottom: 0">
<div style="float:right;">
<table>
<tr>
<td style="padding: 2px">
<div id="submitbutton">test1</div>
</td>
<td style="padding: 2px">
<div id="cancelbutton">test2</div>
</td>
</tr>
</table>
</div>
</div>
</div>
If I specify "max-height:100px" on the divContainer to test, it does exactly what I need where the vertical scrollbar is displayed but it's clearly no longer stretched all the way to the divButton.
Note that the divParent is then used in a third-party popup window.
Any suggestions?
Thanks.
I eventually figured it out, but credit to #Brad for his answer in:
from How do I make a div stretch in a flexbox of dynamic height?
I had to rejig a few things but eventually got there and my divs are defined as follows now:
<div id='divParent' style='display: flex;
flex-direction: column; height: 100%; width: 100%;'>
<div id='divContainer' style='width: 100%; flex-grow:1;
overflow: auto'>
<div id='divButtons' style='width: 100%; height: 40px;
margin-top: 5px'>
That'it!
Install bootstrap and you will have great control of div placements. Bootstrap creates 12 columns for each row:
<div class="row">
<div class="col-md-7" align="right">
<div class="row">
</div>
<div class="row">
</div>
</div>
<div class="col-md-3" align="left">
</div>
<div class="col-md-2" style="padding-right:2%;">
</div>
</div>
I am trying to implement fix header for my table in my angular 10 application. I have applied CSS and I can see that fixed header is working but it seems to hide behind the navbar when i try to scroll down. Please see the screenshot for more details . I tried manipulating the top property but doesnt seem to make a difference.
After scrolling
html table
<div class="container">
<div class="row">
<div class="col-12">
<button class="btnAddCustomer" (click)="addCustomer()"> Add Customer (Template Driven) </button>
</div>
</div>
<div class="row">
<div class="col-12">
<div *ngIf="customerDetails">
<table id="customerdetails-table" class="table table-bordered table-striped">
<thead>
<th>Customer</th>
<th>Company Name</th>
<th>Contact Name</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
<th>Phone</th>
<th>View Order</th>
</thead>
<tbody>
<tr *ngFor="let custDetails of customerDetails">
<td>{{custDetails.customerId}}</td>
<td>{{custDetails.companyName}}</td>
<td>{{custDetails.contactName}}</td>
<td>{{custDetails.address}}</td>
<td>{{custDetails.city}}</td>
<td>{{custDetails.postalCode}}</td>
<td>{{custDetails.country}}</td>
<td>{{custDetails.phone}}</td>
<td>{{custDetails.customerId}}</td>
</tr>
</tbody>
</table>
<pagination [totalItems]="totalItems" [itemsPerPage] = "5" [maxSize]="maxSize" ></pagination>
</div>
</div>
</div>
</div>
CSS
table {
text-align: left;
position: relative;
}
th {
margin-top: 10px;
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
You want the navbar to be infront of all your other HTML elements, it does not make sense to have another element overlap the navbar.
It sounds like you just want the table to be scrollable, if that's the case, put the table in a of fixed size (equal to the scrollable area that you want)
Example:
<div style = "height: 100px; width: 100px">
...your table stuff
</div>
Then add the functionality to make it so you can scroll through the table vertically by using the overflow-y property.
<div style = "height: 100px; width: 100px; overflow-y:auto">
...your table stuff
</div>
Making a div vertically scrollable using CSS
Right, so I want to create a page that has two columns and one header at the top of each one. I am using Vue.js to create this webpage. Ideally what I would want is to have the two headers at the top of the page with a gap in between and then the text and stuff below. I've tried to add the column break to make the right hand column start with the header, but it always starts a few lines below that and will not align with the other header.
As said I am using Vue.js, but I don't think that has anything to do with what I'm trying to achieve here. Please be lenient I'm very new to all this. I also tried adding the column feature in the CSS but that didn't work either.
The styles will then be stored in a different file.
I would appreciate any help on this matter. Thank you.
.commsHeaderleft {
width: 40%;
text-align: center;
}
.commsColumns {
align: left;
width: 100%;
text-align: justify;
column-count: 2;
column-gap: 40px;
}
.commsHeaderright {
width: 100%;
text-align: center;
}
<template>
<div>
<div class="commsHeaderleft">
<h1>Join us on Teamspeak!</h1>
</div>
<div class="commsColumns">
<p>--snip--</p>
<p>--snip--</p>
<p>Once installed set up a Bookmark to Air Combat Group using the following connection details and join in.</p>
<table id="tsDetails">
<tr>
<td>Address:</td>
<td>snip</td>
</tr>
<tr>
<td>Password:</td>
<td>No Password Set</td>
</tr>
</table>
<p>snip</p>
<p>snip</p>
<div class="commsHeaderright">
<h1>Check us out on Discord!</h1>
</div>
<p>snip</p>
<p>Discord is a free installation available <u>here</u></p>
<p>snip</p>
<table id="dsDetails">
<tr>
<td>Invite link:</td>
<td>https://discord.gg/snip</td>
</tr>
</table>
<br>
<p>snip</p>
<iframe src="https://discordapp.com/widget?id=261587898996883458&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
</div>
</div>
</template>
You can use flexbox to do that : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<div class="page">
<div class="header">
<div class="header__item">header 1</div>
<div class="header__item">header 2</div>
</div>
<div class="content">
content
</div>
</div>
.header{
display: flex;
margin: 0 0 30px 0;
}
.header__item{
flex: 1
}
I am using bootstrap for responsive design.
I want contents to auto-fill depend on the screen size (Which bootstrap allows in-built). Although it is not working when I am connecting to the big monitor (22 inch)
See as below:
Picture 1 (on my Laptop); Covers the entire screen
Picture 2 on Big Monitor (Notice the empty area in the bottom)
(Between Header 6 and End of Browser window)
I expect Headers and contents will be displayed big to cover the entire screen
HTML as below:
<div class="container-fluid">
<div class="row" >
<table class="table">
<tr>
<td><img alt="Bootstrap Image Preview" src="Images/Logo.png"></td>
<td align="right"><img alt="Bootstrap Image Preview" src="Images/Header_RequestExpress.png"></td>
</tr>
</table>
</div>
<div class="row" style="border:1px solid; color:Red;">
<div class="col-md-4" style="border:1px solid; color:green;">
<h2>Categories</h2>
<!--Images Carousel Here-->
</div>
<div class="col-md-8">
<div class="row" style="border:1px solid; color:blue;">
<div class="col-md-12">
<h2>Locations</h2>
<!--Images Carousel Here-->
</div>
</div>
<div class="row" style="border:1px solid; color:Maroon;">
<div class="col-md-12">
<h2>Location Current Requests</h2>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
</div>
</div>
</div>
</div>
Apply height:100vh;to the container div.
In your example, on your laptop it was just lucky to appear that way, with the content you filled as you didn't put any rule for the page to be full-height.
You either have to proportion .table and .row vertically.
Example:
.table {
height: 30vh;
}
.row {
height: 70vw;
}
Or let's say the table height is 100px and you want the other part to be filled for the rest of the screen, you can apply:
.table {
height: 200px;
}
.row {
height: calc(100vh - 200px);
}
NOTE I'd suggest you add another class as well to the div .row as that class can be used other places as well, as the Bootstrap provides it.
As we can see from the image my content overlaps with the header image and this is the code I have:
<style type="text/css" media="print">
#page {
/*size:landscape;*/
#top-center {
content: element(header);
}
#bottom-left {
content: element(footer);
}
}
div.header {
padding: 10px;
position: running(header);
}
div.footer {
display: block;
padding: 5px;
position: running(footer);
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
</style>
</head>
<div class="header">
<img src="logo.png" title="logo" width="200px"/>
</div>
<div class="content">
</div>
P.S.: Please don't close this question as duplicate as I have already searched all the questions related to the same but mine looks different as PDF is involved.
Headers and footers are established within the page margins.
So the solution is to increase the page top margin, for example:
#page {
margin-top: 50mm;
}
Method to implement header footer properly in PDF
After finding a lot on internet on different solutions and workaround, I'm finally sharing a way that works for me.
Please add these style to report container (the div in which report is rendered).
<div #scrollingContainer class="col-xxs-9 content-container" style="overflow-x: hidden;width:100%;">
</div>
// Div properties may differ
Wrap the Doc component into the table structure with thead and tfoot according to the size of your header and footer(table is wrapped inside a div).
<div style="width: 100%;">
<table style="table-layout: fixed; width: 100%;"> // Add this css to make main table fixed, child tables will still scroll
<thead class="page-break-before">
<tr>
<td>
<div style="height: 80px;"></div> // space for the respective header
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div> Your Data Goes Here........</div>
</td>
</tr>
</tbody>
<tfoot class="show-in-print page-break-after">
<tr>
<td>
<div style="height: 130px;"></div> // space for the respective footer
</td>
</tr>
</tfoot>
</table>
</div>
Sample Header and footer
<div class="page-break-before">
<div>A long header content...</div>
</div>
<div class=" page-break-after">
<p> A long footer content...</p>
</div>