Closed weumj closed 7 years ago
Calling flicking.resize() when device rotate event occurs, each panel's size should change appropriately.
flicking.resize()
But when preview padding was applied, calling 'resize()' did not change each panel's size.
Flicking
device rotate
I think that _checkPadding() caused this problem.
_checkPadding()
const flicking = new eg.Flicking("#flick", { duration: 200, hwAccelerable: true, threshold: 70, previewPadding: [0, 16], circular: false, adaptiveHeight: true }); $(window).on("rotate", () => flicking.resize());
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0,minimum-scale=1.0,user-scalable=yes"> </head> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/egjs/1.5.0/pkgd/eg.pkgd.min.js"></script> <body> <div id="flick"> <div>panel 1</div> <div>panel 2</div> <div>panel 3</div> <div>panel 4</div> <div>panel 5</div> </div> </body> </html>
body { margin: 0; padding:0; } #flick { height: 200px; } #flick div { border: 1px solid rgba(0,0,0,0.08); background-color: #bbbbbb; height: 100%; font-size: 15px; }
Confirmed the bug, I'll check for the fix.
Description
Calling
flicking.resize()
when device rotate event occurs, each panel's size should change appropriately.But when preview padding was applied, calling 'resize()' did not change each panel's size.
portrait
after device rotate to horizontal (current)
after device rotate to horizontal (expected)
Steps to check or reproduce
Flicking
object and listendevice rotate
eventdevice rotate
eventI think that
_checkPadding()
caused this problem.Javascript
HTML
CSS