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 <[email protected]>
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 <[email protected]>
>> 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 [email protected].
>>> To post to this group, send email to [email protected].
>>> Visit this group at https://groups.google.com/grou
>>> p/google-visualization-api.
>>> To view this discussion on the web visit https://groups.google.com/d/ms
>>> gid/google-visualization-api/7a235027-ec05-468e-82e6-9bba9b
>>> 44f8ea%40googlegroups.com
>>> <https://groups.google.com/d/msgid/google-visualization-api/7a235027-ec05-468e-82e6-9bba9b44f8ea%40googlegroups.com?utm_medium=email&utm_source=footer>
>>> .
>>> For more options, visit https://groups.google.com/d/optout.
>>>
>>
>>
>>
>> --
>> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
>> [email protected] 5CC, Cambridge MA
>>
> --
> 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 [email protected].
> 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
> <https://groups.google.com/d/msgid/google-visualization-api/b29612b6-91dc-470e-8de7-a7650ef2b008%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>
> For more options, visit https://groups.google.com/d/optout.
>
--
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
[email protected] <[email protected]> 5CC, Cambridge MA
--
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 [email protected].
To post to this group, send email to [email protected].
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/CAOtcSJMXw%2BJsT6oxV%2BuazdD4WoBCHdg0_oeO3Z%3D3oJtbm-wUsg%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
