Table set maximum height
528 views
Skip to first unread message
Suzanne Paley
Jan 10, 2017, 2:28:22 PM1/10/17
to Google Visualization API
I know the Table visualization takes parameters for height and width, but what I really want is a parameter for max-height. I've tried not supplying a height parameter and just constraining the height of the enclosing div, but then if the table exceeds the div dimensions in both directions, I need to scroll down to the bottom of the table in order to find the horizontal scrollbar (this is on Chrome on a Linux desktop, and I don't have a horizontal scroll gesture -- I need to user the scrollbar), and the table header won't be fixed. Example at https://jsfiddle.net/0mgg48bz/. I can get the scroll behavior I want by specifying my max-height as the height option when drawing the table, but then if the data would ordinarily take up much less vertical space than my max-height, it expands to fill it, which I don't want. Is there a way to get it to only take up as much space as needed, unless that space would exceed my max dimensions, and then have sensible scrollbars?
Daniel LaLiberte
Jan 10, 2017, 2:43:43 PM1/10/17
to Google Visualization API
There may be limitations regarding use of max-height. I don't have confidence regarding that question because I haven't tested it much. But there may be a way to work with what it can do. Here is a variation of your example that appears to work correctly, but I moved your container to a wrapper, and changed the max-height to just height. Then the table_div just has height:100%. https://jsfiddle.net/dlaliberte/Lw5h7c2y/
It even shrinks if you have fewer rows than needed to fill the height.
On Tue, Jan 10, 2017 at 2:28 PM, Suzanne Paley <suzann...@gmail.com> wrote:
I know the Table visualization takes parameters for height and width, but what I really want is a parameter for max-height. I've tried not supplying a height parameter and just constraining the height of the enclosing div, but then if the table exceeds the div dimensions in both directions, I need to scroll down to the bottom of the table in order to find the horizontal scrollbar (this is on Chrome on a Linux desktop, and I don't have a horizontal scroll gesture -- I need to user the scrollbar), and the table header won't be fixed. Example at https://jsfiddle.net/0mgg48bz/. I can get the scroll behavior I want by specifying my max-height as the height option when drawing the table, but then if the data would ordinarily take up much less vertical space than my max-height, it expands to fill it, which I don't want. Is there a way to get it to only take up as much space as needed, unless that space would exceed my max dimensions, and then have sensible scrollbars?
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/7a235027-ec05-468e-82e6-9bba9b44f8ea%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Suzanne Paley
Jan 10, 2017, 2:59:33 PM1/10/17
to Google Visualization API
Changing the max-height to height isn't useful to me, because I don't want the enclosing div to be any larger than it needs to be, either.
On Tuesday, January 10, 2017 at 11:43:43 AM UTC-8, Daniel LaLiberte wrote:
There may be limitations regarding use of max-height. I don't have confidence regarding that question because I haven't tested it much. But there may be a way to work with what it can do. Here is a variation of your example that appears to work correctly, but I moved your container to a wrapper, and changed the max-height to just height. Then the table_div just has height:100%. https://jsfiddle.net/dlaliberte/Lw5h7c2y/It even shrinks if you have fewer rows than needed to fill the height.
On Tue, Jan 10, 2017 at 2:28 PM, Suzanne Paley <suzann...@gmail.com> wrote:
I know the Table visualization takes parameters for height and width, but what I really want is a parameter for max-height. I've tried not supplying a height parameter and just constraining the height of the enclosing div, but then if the table exceeds the div dimensions in both directions, I need to scroll down to the bottom of the table in order to find the horizontal scrollbar (this is on Chrome on a Linux desktop, and I don't have a horizontal scroll gesture -- I need to user the scrollbar), and the table header won't be fixed. Example at https://jsfiddle.net/0mgg48bz/. I can get the scroll behavior I want by specifying my max-height as the height option when drawing the table, but then if the data would ordinarily take up much less vertical space than my max-height, it expands to fill it, which I don't want. Is there a way to get it to only take up as much space as needed, unless that space would exceed my max dimensions, and then have sensible scrollbars?
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/7a235027-ec05-468e-82e6-9bba9b44f8ea%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Daniel LaLiberte
Jan 10, 2017, 3:34:48 PM1/10/17
to Google Visualization API
Understandable that you want the max-height behavior. I'm not sure how difficult this might be if I take it on as a change to the Table chart, and I am inclined to not touch it for now.
You might need some dynamic behavior to make this work, such as catching the 'ready' and getting the size of the rendered table to then set the size of the wrapper.
To hopefully help you find a solution, here is a partial copy of a test utility I have used to generate the many variations in tables. Use initAndDraw as the onload callback.
var dataTable;
/**
* Set up data table for all table charts.
*/
function setDataTable1() {
dataTable = createSomeTable();
}
var idNum = 0;
/**
* Create a table chart with the parameters.
* @param {?(number|string)} wWidth wrapper width.
* @param {?(number|string)} wHeight wrapper height.
* @param {?(number|string)} width
* @param {?(number|string)} height
* @param {!Object} options
*/
function createTableChart(wWidth, wHeight, width, height, options) {
var id = 'table' + (idNum++);
var section = document.createElement('div');
section.innerHTML = '</br><hr><h3>' + id + '</h3>' +
'<p>container' +
' width: ' + width + ' height: ' + height + '</br>' +
' table options: ' + JSON.stringify(options) +
'</p>';
document.getElementById('tables').appendChild(section);
var wrapper = document.createElement('div');
wrapper.id = id;
wrapper.cssText = '';
if (wWidth != null) {
wrapper.style.width =
(typeof wWidth === 'number' ? wWidth + 'px' : wWidth);
}
if (wHeight != null) {
wrapper.style.height =
(typeof wHeight === 'number' ? wHeight + 'px' : wHeight);
}
try {
wrapper.style.outline = '10px solid rgba(200, 200, 200, 0.5)';
} catch (e) {}
section.appendChild(wrapper);
var container = document.createElement('div');
container.id = id;
container.cssText = '';
if (width != null) {
container.style.width =
(typeof width === 'number') ? width + 'px' : width;
}
if (height != null) {
container.style.height =
(typeof height === 'number') ? height + 'px' : height;
}
try {
container.style.outline = '5px solid rgba(128, 128, 128, 0.5)';
} catch (e) {}
// Test with table-cell container.
//container.style.display = 'table-cell';
// Test if drawn with invisible container.
//container.style.display = 'none';
wrapper.appendChild(container);
var chart = new google.visualization.Table(container);
chart.draw(dataTable, options);
//container.style.display = null;
}
/**
* Initialize everything and draw the charts.
*/
function initAndDraw() {
setDataTable1();
var wrapperWidth = '100%';
var wrapperHeight = '100%';
// not specified, too small, too large, 100%
/*
var containerWidths = [null, 200, 600, '100%'];
var containerHeights = [null, 150, 250];
var chartWidths = [null, 180, 400, '50%', '100%'];
var chartHeights = [null, 150, '50%', '100%'];
*/
var containerWidths = [null, 600, '100%'];
var containerHeights = [null, 250];
var chartWidths = [null, 180, '100%'];
var chartHeights = [null, 150, '100%'];
var pagingOptions = [0, 5];
// var frozenColumns = [-1, 2];
var frozenColumns = [-1];
for (var contWidth in containerWidths) {
var containerWidth = containerWidths[contWidth];
for (var contHeight in containerHeights) {
var containerHeight = containerHeights[contHeight];
for (var cWidth in chartWidths) {
var chartWidth = chartWidths[cWidth];
if (typeof chartWidth === 'number' &&
typeof containerWidth === 'number' &&
chartWidth > containerWidth) { continue; }
for (var cHeight in chartHeights) {
var chartHeight = chartHeights[cHeight];
if (typeof chartHeight === 'number' &&
typeof containerHeight === 'number' &&
chartHeight > containerHeight) { continue; }
for (var fc in frozenColumns) {
for (var po in pagingOptions) {
var pageSize = pagingOptions[po];
var page = pageSize > 0 ? 'enable' : 'disable';
createTableChart(
wrapperWidth, wrapperHeight,
containerWidth,
containerHeight, {
width: chartWidth,
height: chartHeight,
page: page,
pageSize: pageSize,
frozenColumns: frozenColumns[fc]
});
}
}
}
}
}
}
}
On Tue, Jan 10, 2017 at 2:59 PM, Suzanne Paley <suzann...@gmail.com> wrote:
Changing the max-height to height isn't useful to me, because I don't want the enclosing div to be any larger than it needs to be, either.
On Tuesday, January 10, 2017 at 11:43:43 AM UTC-8, Daniel LaLiberte wrote:
There may be limitations regarding use of max-height. I don't have confidence regarding that question because I haven't tested it much. But there may be a way to work with what it can do. Here is a variation of your example that appears to work correctly, but I moved your container to a wrapper, and changed the max-height to just height. Then the table_div just has height:100%. https://jsfiddle.net/dlaliberte/Lw5h7c2y/It even shrinks if you have fewer rows than needed to fill the height.
On Tue, Jan 10, 2017 at 2:28 PM, Suzanne Paley <suzann...@gmail.com> wrote:
I know the Table visualization takes parameters for height and width, but what I really want is a parameter for max-height. I've tried not supplying a height parameter and just constraining the height of the enclosing div, but then if the table exceeds the div dimensions in both directions, I need to scroll down to the bottom of the table in order to find the horizontal scrollbar (this is on Chrome on a Linux desktop, and I don't have a horizontal scroll gesture -- I need to user the scrollbar), and the table header won't be fixed. Example at https://jsfiddle.net/0mgg48bz/. I can get the scroll behavior I want by specifying my max-height as the height option when drawing the table, but then if the data would ordinarily take up much less vertical space than my max-height, it expands to fill it, which I don't want. Is there a way to get it to only take up as much space as needed, unless that space would exceed my max dimensions, and then have sensible scrollbars?
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/7a235027-ec05-468e-82e6-9bba9b44f8ea%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/b29612b6-91dc-470e-8de7-a7650ef2b008%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages