Dear Elders of The Internet - I have created a headache for myself, and I hope you can help :-)
This is a two-part questions. I have a page with three panels, and want a horisontal slide. For this I have created buttons, see live demo here.
1. Horizontal slide, responsive When clicking top right button "two right panes" I want the page to show just that: the two right panes only . This is not a problem on large screens, but I cannot get it to work on slightly smaller (media queries and further responsiveness, I think I will be able to figure out).
Similarly; when clicking "single left pane" I would like it to stretch the third (far right) panel, and hide the two others.
Clearly, I want it to respond to a 100% viewport.
2. Highchart I cannot get the Highchart chart to act accordingly depending on the top left buttons sliding. The highchart will adjust if I resize the whole window , but I cannot get it to adjust when sliding panels. For a demo of a chart that works, scroll down in third panel (this is "homemade" graphs).
I have attempted to illustrate the problem in the screenshots below.
(I have posted another question relating to the same page, if you should be so inclined to take a look).
I suspect it is pretty simple, but I cannot for the life of me see where I went wrong. Any hints would be much appreciated. All the best.
Highcharts仅在调整窗口大小时调整大小,如果要调整图表大小,请使用chart.setSize(w,h)
,参见参考 。
Well, good people, I kinda figured it out myself... for the possible benefit of others; my solution was to set the width of the two first columns fixed (or rather; max-width), and thereby using calc to calculate the size of the third columns with minus the two fixed width divs.
width: -webkit-calc(98% - 520px);
width: calc(98% - 520px);
For the Highchart part of the question, much thanks to @Pawel for prompt answer. I haven´t entirely worked it out, as we are currently discussing whether using Highcharts or not is the way to go. If so, I guess I might be back with more questions later.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.