5

Last week I asked the following question to which I got an answer:

jqPlot - Pie legend too tall when there are many legend items

I'm now looking for a way to add a vertical scrollbar to my legend box which in some cases could contain more than 20 legend items.

I can achieve the result I want in FireFox and Chrome if I add the following settings to my CSS file:

table.jqplot-table-legend {
    display: block;
    height: 350px;
    overflow-y: scroll;
}

however I need to achieve the same effect in IE9.

Does anybody know what CSS settings I need?

Community
  • 1
  • 1
jpen
  • 2,129
  • 5
  • 32
  • 56
  • Hi mate. So what exactly happens in IE? I am surprised that this doesn't work. Also could you share your code, jsfiddle preferably, not only for the sake of testing but also I would like to see this code personally as it might be of benefit for what I am doing currently (+1 given a while ago). – Boro May 08 '12 at 16:24
  • Hi Boro. Please see this demo in IE9 (http://jsfiddle.net/UNrr3/ ). I've modified one of your jsfiddles and added more segments to the pie chart (Tab 3). When you see the demo in FireFox or Chrome, you'll see the vertical scrollbar (although you can't move it up/down for some reason, it does work in my project if I use those browsers). With IE9, the legend box just overflows the canvas and this is what I'm seeing in my project. Let me know if you can't see the demo at your end. This is my first time to create a demo using jsfiddle. – jpen May 08 '12 at 19:08
  • I know that no event is fired on a legend when it is inside a chart's area, I guess, because the event canvas is covering it. I see the problem in IE it is not there. I will take a closer look and get back to you when I find something. This shows all is fine when legend is placed outside (IE excluded) http://jsfiddle.net/UNrr3/2/ – Boro May 09 '12 at 08:20
  • @Boro Yes, in my project I put my legend outside of the canvas (i.e., placement: 'outside'). That's why scrolling was working in FF and Chrome. – jpen May 09 '12 at 08:32

1 Answers1

0

I found some people on the web mentioned some issues with overflow on tables in IE, but I couldn't get a needed answer.

Therefore, my approach was to wrap the table into another element. I wrap it in a div and set appropriate values on it and it works cross browser :)

To see the legend wrapped in a div you must click Tab 3 then click Where is my plot? button, as the wrapping happens on click of the button.

If someone has a better solution please do let us know.

One of the sites I was referring to. Here you have a nice table and it works fine also in IE8, but not in IE7 and IE9?

Yet another reason why people should switch to other browsers.

The code is here.

Boro
  • 7,913
  • 4
  • 43
  • 85
  • I couldn't find a better solution. I added a link to a page showing that the problem is not `jqPlot` related, at least all my experiments indicate so. Therefore, I think jpen you should ask a question how to do scrolling on a table in IE9 (and IE7) but first have a look maybe I missed a question which already says it. If you find something please do let me know. – Boro May 09 '12 at 09:31
  • I agree this is not a jqPlot related problem. Grrr IE!! Thanks for your help anyway. – jpen May 09 '12 at 09:40