limit facet box to N displayed items

Apr 30, 2012 at 8: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 12: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 1: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 8: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 12: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 2: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