I'm using Dojo's (1.7.3) chart component (dojox.charting.chart) inside an HTML table (and I cannot change this because it's a kind of template provided by someone else where I have to put charts at unknown locations).
Actually (simplified) HTML code may look like this:
<table class="fit-parent">
<tbody>
<tr>
<td>
<div id="chart123" class="full-size-chart"></div>
</td>
</tr>
</tbody>
</table>
And its CSS is something like this (consider full-size-chart equivalent to fit-parent):
.fit-parent
{
width: 100%;
height: 100%;
}
Code to create the chart:
<script type="text/javascript">
require([
"dojox/charting/Chart",
"dojox/charting/themes/MiamiNice",
"dojox/charting/plot2d/Columns",
"dojo/domReady!"
],
function (Chart, theme, ChartType) {
var chart = new Chart("chart123");
chart.setTheme(theme);
chart.addPlot("default", {
type: ChartType
});
chart.addSeries("Series name", chartData);
chart.render();
}
);
</script>
Rendered table is inserted inside others Dojo containers (BorderContainer and ContentPane) with both a header and an edge panel. Site is made with ASP.NET MVC3 and above code is inside one view page, main layout is inside _Layout.cshtml page.
The problem is that the chart size is not correct, it's bigger than the size of the page and scrolls appear. Ideally the table should fit the content box and resize with the window size.
The green box is the table (2 rows in this example). The chart should fill the entire row (because of 100% width and height), table layout is right (it fills the "document area" and everything else is fine). Wrong with my code/layout? Please remember I can change HTML (and use CSS classes) but I can't ask them to use CSS float/positions directly or to "imagine" final layout with CSS (probably they use a simple HTML editor or notepad).
Chart doesn't support CSS-set sizes, nor sizes in percents. You should specify a chart size either directly on its node in pixels before creating, or during creating as 2nd and 3rd parameters. If you want to support a fluid layout, use a simple JavaScript tracking code for that and resize chart accordingly when needed.
Related
By default, Tabulator reduces the max width of the table and displays a horizontal scroll bar at the bottom of the table. Is it possible to remove this scroll bar and force tabulator to increase the width of the table (so that the horizonta scrollbar is displayed at the bottom of the browser window)?
Add this to your CSS file for the div containing the horizontal scrollbar.
overflow-x: hidden;
To make the table wider, you can enclose it within a <div> and add this to the CSS file for that particular div.
table-layout: fixed;
width: 100%;
Update
As of Tabulator v4.7 there is a built in layout mode for handling this. the fitDataTable layout mode will fit the width table to its contents:
var table = new Tabulator("#example-table", {
layout:"fitDataTable",
});
See the Layout Documentation for full details and a working example
Original Answer
There is no built in feature for allowing external scrolling of the table. The table is based in a div and so will take up 100% the width of its parent element.
It will then either handle scrolling inside the table or resize the columns to fit depending on how your table is configured.
You could make some CSS tweaks to allow this form of display but it may cause the table to malfunction under certain circumstance, depending on your configuration.
You would need to include the following CSS after the tabulator style sheet has been included:
.tabulator, .tabulator-header, .tabulator-tableHolder{
overflow:visible !important;
}
But essentially at that point you may be better off just using a standard HTML table as you seem to be disabling a lot of the features that you would use Tabulator for.
I'm using bootstrap as a main front-end framework for my web site project and sigma.js as it's graph visualization library.
...
<div id="graph-container" style="width: 540px; height: 300px;">
</div>
<script>
...
$(document).ready(function() {
s = new sigma({ graph: graph, container: 'graph-container' })
});
</script>
What I'm struggling on is to remove those hard-coded graph-container sizes and delegate it's layout to bootstrap's grid system.
However, it just shrinks to nothing when I just simply remove the style attribute.
Is there any way to embed sigma.js seamlessly within bootstrap's grid system?
It's easy to delegate the width of sigma to bootstrap with a width:100%.
But for height it's harder if you don't want a value in pixel (for %, all parent element must have a relative height).
If you don't want inline code, you can put your style into your css file.
I'm struggling to print a dynamic HTML table by using Chrome and Firefox. I'm working on a project using Yii framework and in one of my view I create a HTML table that only fits on multiple pages and should be printed. Height of table rows may vary depending on content.
I'm using THEAD and TBODY elements in my table and I made relevant grouping in my print media CSS. To initiate print dialogue I'm using window.print() JavaScript command .
I read somewhere that Chrome can't divide multiple page long tables properly even if you set page-break-after and page-break-before parameters in your CSS which seems to be true. Firefox can handle theses commands however table header and table content overlap starting from the second page.
Do I need to change my code and draw DIVs instead of table or maybe I should write a JavaScript to split content based on table height?
Please find herewith my CSS for media print:
#page {
margin-top: 1cm;
margin-right: 1cm;
margin-bottom:2cm;
margin-left: 2cm;
size: landscape;
}
.form, h1, .summary, .navbar-inner {display: none;}
table { page-break-after:auto;}
tr { page-break-inside:avoid;}
td { page-break-inside:auto;}
thead { display:table-header-group; }
tbody { display:table-row-group;}
Based on my findings it seems webkit based browsers (e.g.: Chrome) can't handle pagination of long tables even if you set your media print css properly. Furthermore I would say that almost all browsers handles print media style sheet on a different way.
It would be good to see a general solution for this, a standard I mean. I know this is what CSS is for but it doesn't seem to work in this case, or each browser development team interprets it on a different way.
In my case I solved the problem with a JQuery. Someone referred to this JQuery in a different post, but in my case height of some cells are changing dynamically, thus I couldn't use this query, however it led me to a solution.
Just in a nutshell:
I divide my table to a header and data blocks by creating separate tables for those. So, I have a header (a table) and several data blocks (other tables). I print them to the screen one under the other, thus on the screen it seems as a long table.
Then I create an empty table on the page. This is required for the JQuery.
Once everything printed to the screen I run a JQuery which splits my table to pages by looping through all blocks and move each blocks from the original table to my empty table. If the height of X number of blocks reaches the height of the page then it adds a pageberak and a header again and continues looping through on the remaining blocks. At the end my original table becomes empty and my empty table filled up with headers, data blocks and pagebreaks.
My generated HTML page contains the following tables:
<table class='mainheader'>
.
HEADER
.
</table>
<table class='body_block'>
.
DATA
.
</table>
<table class='body_block'>
.
DATA
.
</table>
<table class='body_block'>
.
DATA
.
</table>
.
.
.
<table class='tmp_table'>
</table>
My JQuery:
<script type="text/javascript">
var tableHeight = 0;
var pagebreaker = $('<div style="display: block; page-break-before: always;"></div>');
var header = $('.mainheader');
$('.body_block').each(function()
{
if ((tableHeight + $(this).height()) >= 600){ // I use a 600px height page
$('.tmp_table').append(pagebreaker.clone());
$('.tmp_table').append(header.clone());
tableHeight = 0;
}
tableHeight += $(this).height();
$(this).appendTo('.tmp_table');
});
</script>
I've posted a solution that addresses the problems described in this post, and does not involve trying to predict how many rows will fit on a page (which is impossible since there is no way to know what paper size the user is using). That solution is compatible with all modern browsers, including the webkit-based ones (Chrome, Safari, Opera). For the non-webkit-based browsers (Firefox and Internet Explorer), there's actually a simpler solution: just set page-break-inside: avoid; on the <tr> elements.
On the site there are several pie charts. All diagrams are created immediately after the page loads. At the moment of creation, part of the diagrams is hidden (the parent layer display: none)
Visible charts are set correctly, hidden charts have parameter is incorrect width.
The layer of the diagram
<div id="DGramm" style="width: 100%;"> </ div>
The result - the diagram created on the entire width of the page, but no of the width of the parent layer. How to do the right, to take the width of the hidden layer?
At this point, all that came up - to create a chart after the first showing of the hidden layer.
You could trigger the window.resize event to update the Chart size. Add this script to your page.
$(document).ready(function () {
$(window).trigger('resize');
});
See the answer here. Thanks, david.
I have a custom routing application that takes information for a route from google maps. It then creates a Google Visualizations DataTable to hold all the steps in the route.
My current problem is that in order to reduce overflow for very large routes, I have enabled paging in the options of the DataTable. This leads to a not so printer friendly version because only the portion of the data that is shown in the table will be printed. The other portions of the table are loaded dynamically by the API when you click prev and next.
Is there a not so hard way to get the DataTable to be printer friendly when it comes time without sacrificing the ability to have paging enabled?
This is the way that I ended up solving this problem. I will not accept my own answer just in case someone has something much more elegant.
Originally I had:
var visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
sort: "disable",
allowHtml: true,
showRowNumber: true,
page: "enable",
pageSize: 9
});
I added another one that went to a div that I would hide with css.
//Create a second Visualization that Will be hidden.
var visualization = new google.visualization.Table(document.getElementById('printerFriendly'));
visualization.draw(data, {
sort: "disable",
allowHtml: true,
showRowNumber: true,
page: "disable"
});
Then I added the following rules to one of my css files.
#media print
{
#table{ display:none; }
}
#media screen
{
#printerFriendly{ display:none;}
}
This hides one table during normal use and hides the other during printing. I was hoping for something a little cleaner than this but this solution was very easy to implement.
There's a few ways you could do it.
If the changes you need in order to make the page "printer friendly" can be done purely by changing the CSS styling, then all you need to do is add another style sheet for print media:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
That is a pretty easy and transparent way to do it: the print media style sheet that will be used for printing, while your original style sheet will be used for web viewing.
So you could change the way things are displayed, or even toggle visibility whether it's being viewed on the web or printed...that should get you where you need to be.
To be honest I'm not too familiar with what you're doing, but it sounds like the user has to make a new request for each page...in that case just CSS styling will not help you.
You'll have to either make the information available all on one page ( just parts invisible), or set up a function in the app, or an option, et cetera that spits out a printer-friendly version.
#media print
{
#table > div > div { overflow: visible !important; }
}
This will solve your problem.
Explain:
2'nd div below #id used to create table have overflow: auto. This lead to fit info in this block. Changing it to overflow: visible will lead to show it content.
Check how it works on developer.mozilla.org/en-US/docs/Web/CSS/overflow