jquery - Adding responsiveness to pivottable -
i have been using (http://nicolas.kruchten.com/pivottable) pivottable.js in 1 of application. table has been rendered fine facing issues while adding responsiveness ui. table don't shrink div sizes defined small view port using media queries. regardless of view-port table plots same size. width of columns of table seems non-changeable. have tried change defined classes col in pivot.css doesn't seem trick.
table.pvttable .pvtcollabel {text-align: center; width:50px;} table.pvttable .pvttotallabel {text-align: right; width: 50px;}
also below how have used media queries on div on "graph" class table plotted:
@media (min-width: 320px) , (max-width: 640px) { /*making gray box span across screen*/ body { padding-left: 0px; /*changed avoid hz scroll on mobile device*/ padding-right: 0px; /*changed avoid hz scroll on mobile device*/ padding-top: 0px; } #console { /* negative indent footer it's height */ margin: 0px auto -40px; } .graph { width:250px; height:270px; } .wrapper-gray{ background-color: #ebebeb; padding: 5px; } .section-box{ background-color: #fff; padding: 5px; } }
please guide me if going wrong somewhere.
the dimensions of chart fixed @ creation time , controlled via renderoptions
parameter of pivotui. example:
rendereroptions: { c3: { size: { height:200, width:200} } }
source: issue 487
Comments
Post a Comment