{"action":"opened","issue":{"url":"https://api.github.com/repos/olifolkerd/tabulator/issues/417","repository_url":"https://api.github.com/repos/olifolkerd/tabulator","labels_url":"https://api.github.com/repos/olifolkerd/tabulator/issues/417/labels{/name}","comments_url":"https://api.github.com/repos/olifolkerd/tabulator/issues/417/comments","events_url":"https://api.github.com/repos/olifolkerd/tabulator/issues/417/events","html_url":"https://github.com/olifolkerd/tabulator/issues/417","id":239811803,"number":417,"title":"Responsive Layout","user":{"login":"stgraveyard","id":4339294,"avatar_url":"https://avatars2.githubusercontent.com/u/4339294?v=3","gravatar_id":"","url":"https://api.github.com/users/stgraveyard","html_url":"https://github.com/stgraveyard","followers_url":"https://api.github.com/users/stgraveyard/followers","following_url":"https://api.github.com/users/stgraveyard/following{/other_user}","gists_url":"https://api.github.com/users/stgraveyard/gists{/gist_id}","starred_url":"https://api.github.com/users/stgraveyard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stgraveyard/subscriptions","organizations_url":"https://api.github.com/users/stgraveyard/orgs","repos_url":"https://api.github.com/users/stgraveyard/repos","events_url":"https://api.github.com/users/stgraveyard/events{/privacy}","received_events_url":"https://api.github.com/users/stgraveyard/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-06-30T15:23:22Z","updated_at":"2017-06-30T15:23:22Z","closed_at":null,"body":"Hello Oli,\r\n\r\nFirst of all, thank you so much for this amazing piece software. Just fantastic.\r\n\r\nI'm using this now in my webproject. I'm a bit of a NOOB, everything seems to be working perfectly for me except the responsive layout. The tables don't disappear when I make the window smaller. Is there something you need to do with the extensions? I have included this : \r\n                `<script type=\"text/javascript\" src=\"{$template_dir}includes/js/tabulator.min.js\"></script> <!-- tabulator script -->\r\n`\r\nThis is my code for the tab : \r\n\r\n```\r\n<script>\r\n                //define some sample data\r\n                var tabledata = {$data};\r\n                {literal}\r\n               \r\n                //create Tabulator on DOM element with id \"example-table\"\r\n                $(\"#games-table\").tabulator({\r\n                    height:\"600px\", // set height of table (optional)\r\n                    responsiveLayout:true, // this option takes a boolean value (default = false)\r\n                    pagination:\"local\",\r\n                    fitColumns:true, //fit columns to width of table (optional)\r\n                    columns:[ //Define Table Columns\r\n                        {title:\"Name\", field:\"game_name\", sorter:\"string\", align:\"left\", headerFilter:\"input\",responsive:0},\r\n                        {title:\"Publisher\", field:\"publisher_name\", sorter:\"string\", align:\"left\", headerFilter:\"input\"},\r\n                        {title:\"Developer\", field:\"developer_name\", sorter:\"string\", align:\"left\", headerFilter:\"input\"},\r\n                        {title:\"Year\", field:\"year\", sorter:\"string\", align:\"left\",headerFilter:\"input\"},\r\n                        {title:\"Boxscan\", field:\"boxscan\", sorter:\"string\", formatter:\"tickCross\",headerFilter:\"input\"},\r\n                        {title:\"Screenshot\", field:\"screenshot\", sorter:\"string\", formatter:\"tickCross\",headerFilter:\"input\"},\r\n                        {title:\"Download\", field:\"download\", sorter:\"string\", formatter:\"tickCross\",headerFilter:\"input\"},\r\n                    ],\r\n                    rowClick:function(e, id, data, row){ //trigger an alert message when the row is clicked\r\n                        alert(\"Row \" + id + \" Clicked!!!!\");\r\n                    },\r\n                });\r\n                $(\"#games-table\").tabulator(\"setPageSize\", 20); // show 20 rows per page\r\n\r\n                //trigger download of data.csv file\r\n                $(\"#download-csv\").click(function(){\r\n                    $(\"#games-table\").tabulator(\"download\", \"csv\", \"data.csv\");\r\n                });\r\n\r\n                //trigger download of data.json file\r\n                $(\"#download-json\").click(function(){\r\n                    $(\"#games-table\").tabulator(\"download\", \"json\", \"data.json\");\r\n                });\r\n\r\n                //trigger download of data.xlsx file\r\n                $(\"#download-xlsx\").click(function(){\r\n                    $(\"#games-table\").tabulator(\"download\", \"xlsx\", \"data.xlsx\");\r\n                });\r\n\r\n                //load sample data into the table\r\n                $(\"#games-table\").tabulator(\"setData\", tabledata);\r\n                {/literal}\r\n                </script>\t\r\n```\r\n\r\nI wonder what I'm doing wrong. \r\n\r\nAlso, I'm using pagination, but when I go to a width of 320px or 360px (for older phones, I think) and I have over 3 pages of data, the paging and the 'next', 'previous', 'last' ... buttons are not all on the screen anymore. I don't think this is solved by activating the reponsiveness?\r\n\r\nThank you in advance,\r\nMaarten"}}
{"actor":{"display_login":"stgraveyard"}}