Fixed width and flexible count of columns with HighCharts / HighStock - javascript

I'm using HighStocks and here is little example to show what i mean:
http://goo.gl/m90FGh
I wanna use those columns also for navigation(to click) so i want to have fixed width for them and with disabled grouping. The issue is when i'm trying to resize the chart (e.g. browser window is smaller). If i disable grouping and set fixed width it will create the same count of cols on the screen but those are overlapping each other. I would like to resize chart, keep columns without overlap and set another "zoom/range" in navigation/minichart to display smaller number of columns with the same width. It's about constant width & space between the columns. Is it somehow possible?
UPDATE:
I tried this solution: http://goo.gl/ojmsFN
It works but only if i shrink the screen/browser, not if i try to expand it again. The range stays still the same in this case, i don't know why.
Thanks for any advices!

Related

Looking to dynamically set a min width on a html table if the column headers collide

I am trying to make this table that I am working on more responsive and visually appealing. I am using react.js. My table component has varying number of columns based on the data, so some tables I am finding it difficult to fit the information on the page without having resorting to horizontal scroll, or possibly things like the headers and the icons in the th's collide with one another. Initially I set a min width for the table so that the headers don't collide but that automatically made the table wider than it had to be causing immediate horizontal scroll.
Got this image from https://css-tricks.com/accessible-simple-responsive-tables/, looking to have the table initially with the squish method (no minimum width, just 100% width), but try to determine what min-width would be needed for the table not to collide on itself with a horizontal scroll. So maybe dynamically set a media query (if that's possible?) or open to other suggestions.
Here I set a minwidth for the table but even at full screen it goes straight to a horizontal scroll.
Here I removed the min width made the table 100% width and this would be ideal at full screen but when there are more columns or at smaller viewpoints it causes it to squish up to a point where it's unreadable.
Here I have a table with even more columns but even at 1461px screen width it starts overflowing. I also need to avoid having to break words in the headers.
Was hoping to learn to see if
There was a way to know at what screen size the column headers will overflow
If there is a way to dynamically set a media query to allow a min width at that point for horizontal scroll?
Or if I am just going about this the wrong way if there is a better way to address this? I would like to avoid collapsing columns if possible.

tabulator scrollbars missing when you set height

not sure if this is a bug or as designed. I successfully tried to set the height of my table programatically using table.setHeight() but i was not given any scroll bars.
If I set the height on the table constructor height:300 then I have scroll bars even if i resize programatically later.
Is that the intended behavior? seems like a wasted step.
In certain scenarios, you may need to call the redraw function on the table after setting its height
table.redraw(true);

Autosize Window with multiple GridPanels

I have a modal Window, with a minimum height of 250px and maximum of 600px. Programatically I put 1 or 2 or 3 or infinite GridPanel in it. My problem is that I can't get it working.
If the window has a fit layout, then still it will be 250px high, and the first Grid will fit in completely, if there is another one then it is under it invisible.
If the windows layout is vbox, then it's also 250px high, but at least all the GridPanels are in it visible. The problem with this, that if any of the grids has too many rows, then it will simply put a scrollbar in the grid, but instead of this i would like to expand the grids height to make every row visible, and expand the windows height also.
Any thoughts?
Thanks in advance!
Because there were no ansers I do it myself.
Maybe there is a more automatic way but this is the best I was able to make.
Every time I add a grid to the window I loop through the grids, get their heights, sum them and with the setHeight method I set the window height.

Display DataTables columns at natural width

I'm working with the DataTables library, and I'm using the autoWidth option to have DataTables set column widths automatically, as well as the Scroller plugin to fix headers and page data from the server.
This combination looks beautiful when my table has a large number of columns, but when it has just a few columns, the autoWidth setting makes them cartoonishly large.
Here's an example:
http://live.datatables.net/rizuvaza/2/edit
What I'd like is for the table to be only as wide as necessary for its content, and no wider. Sometimes this will mean that the content is too wide for the viewport and must be horizontally scrolled, and sometimes this will mean that the content is narrower than the viewport, in which case I don't want it to consume the whole horizontal space.
I've found a couple of approaches that work if I'm willing to hard-code a maximum width for the table, but doing so relies on me writing code to estimate the width of the columns myself. Obviously this is dependent on a wide variety of difficult measurements (font size, content width, etc) that I'd really rather leave up to DataTables.
Is there some way to configure DataTables, or use wrapping DOM elements and styles, such that it will always draw a table using only the width necessary?
Well - dont know if that it was you are looking for - but if you set
#example {
display: block;
}
and run a columns().adjust() right after initialisation
var table = $('#example')
.DataTable()
.columns()
.adjust()
.draw();
then the columns will be shrinked to the absolute minimum size.
demo -> http://jsfiddle.net/j5h9ob12/1/
Update, edited titles in the fiddle to emphasize the point.

How to change the height of individual row in a HTML table using row border?

I am looking for a way to be able to change the height of a row in a table, not to a preset size if possible, by selecting the row border and dragging it.
The scenario is as follows:
I have certain data being represented in the rows of the tables. Depending on the height of the row, the representation of the data may vary i.e. it might be a summary of the data if the row height is small, but may be the detailed description if the height is beyond a certain size. I want to be able to select the row in question and drag it to change its height.
If free flow change is not possible for some reason, I can make do with 3 levels of height. Scenario being, if i drag the row height beyond set limit x, it snaps to the next higher limit x'.
I understand you can change the size of the table elements/rows using css/js to fit predefined conditions, but I was unable to find anything to suit my needs.
In normal case( without use of plugins) , it is not possible to make a row of table re sizable with mouse. So, alternatively you can implement the rows using CSS. You can check the jsfiddle that i have create dfo you here. http://jsfiddle.net/sakirullahi/Npuyc/5/
In this i have used resizable event in jquery.

Categories