limit facet box to N displayed items

Apr 30, 2012 at 9:27 PM

I've been trying LobsterPot HTML5 pivotviewer at http://data.oceandrilling.org/labs/html5pivot/

Is there some way to designate how may items show up in a facet box so that the div then presents a scrolling list?   Is this just setting a max height on a div in the CSS somewhere or is this in the js file?

Thanks much..  wonderful package!

Coordinator
May 10, 2012 at 1:27 PM

Hi fils, I just saw the pivot your working on - looks awesome!

I need to do some more work on the accordion control, there are a few bugs with it overflowing the control. It's the first time I've seen that particular issue so I'll create a new issue for it so I can get fixed.

I also noticed you've struck the Deep Zoom limit with the image resolution. Displaying higher resolution images is also on the to do list :)

 

Glad you've found it useful.

May 10, 2012 at 2:33 PM

Roger,

    Thanks..  I have 2 more data sets just waiting for something just like this too. :)   I'll keep an eye on the codeplex site here and be anxious to try out any changes etc.  Let me know if there is anything I can do/test.  Feel free to suck down the data sets from that site if they are of use in testing.

 

Take care and THANKS!

Doug

May 17, 2012 at 9:45 AM

Roger,

  Pulled down the new code base to and set it up at:  http://data.oceandrilling.org/labs/html5pivot/index.html

   I am trying to see where in the CSS I can set the max height of the ui-accordian ui-accordian-content.   It gets set to 447px in my example but if I use chrome dev tools I can inspect and set it to something like 200px.   

I thought editing the line:

.ui-accordion .ui-accordion-content{/*padding:1em 2.2em;*/height:200px;border-top:0;margin-top:-2px;position:relative;top:1px;margin-bottom:2px;overflow-y:auto!important;overflow-x:hidden!important;display:none;zoom:1}

in pivotviewer-min.css would work but it seems to get overridden somewhere.  Is this being calculated and set by the js somewhere?  

Do you have a suggestion on best ways to override and set this to a value?

Thanks..   this pivotviewer package is really impressive!  I've been showing it around to some people while at our data management meeting in Edinburgh.  

 

Take care

Doug

 

 

Coordinator
May 17, 2012 at 1:10 PM

Hi Doug,

The height is being set via JavaScript so that it is always the full height of the parent DIV - height is always tricky.

If you override the .pv-filterpanel-accordion class in pivotviewer.css you can set the height to any value you'd like. For example, to set it to 200px:

.pv-filterpanel-accordion { overflow-y:auto; overflow-x:hidden; margin-top:6px; height: 200px !important; }

The key part is adding !important after the style.

 

Let me know how you go

Roger

May 17, 2012 at 3:33 PM

Roger,
thanks...   I think I got more of the effect I was after with:

        .ui-accordion .ui-accordion-content{/*padding:1em 2.2em;*/height:200px !important;border-top:0;margin-top:-2px;position:relative;top:1px;margin-bottom:2px;overflow-y:auto!important;overflow-x:hidden!important;display:none;zoom:1}

thanks for the !important tip...   I did not know this.  

The results are up at: http://data.oceandrilling.org/labs/html5pivot/index.html

Next I need to see how to link out from here to the URL (the href attribute in the item node of the cxml) and I can really start to try this out with some "real" data someplace people can see it.  :)  

Thanks much

Doug