jQuery Sortable applied to table rows makes rows taller -
i'm preparing custom positioning table rows jquery ui sortable, i've run major problem. whenever grab row, gains 2px
height. however, margin, height, padding etc. remain same. i've created test page, without additional scripts or styles. here can prevent rows getting taller issue happening? thanks.
jquery: 1.4.4, jquery ui: 1.8.9
edit: happes in chrome , safari (haven't tested other browsers) on mac. example on jsfiddle works fine: http://jsfiddle.net/ya47c/, i'm not quite sure different there.
<!doctype html> <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> </head> <body> <table> <thead> <tr><th>header</th></tr> </thead> <tbody class="sortable"> <tr><td>row 1</td></tr> <tr><td>row 2</td></tr> <tr><td>row 3</td></tr> <tr><td>row 4</td></tr> <tr><td>row 5</td></tr> </tbody> </table> <script> $(function() { $(".sortable").sortable(); }); </script> </body> </html>
i don't know problem (since works me), if works in jsfiddle, it's 1 of css rules in normalize.css that's fixing you:
http://fiddle.jshell.net/css/normalize.css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0;}
if had guess, i'd it's "table" rule. "td" rule.
Comments
Post a Comment