{"action":"created","issue":{"url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/674","labels_url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/674/labels{/name}","comments_url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/674/comments","events_url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/674/events","html_url":"https://github.com/almasaeed2010/AdminLTE/issues/674","id":104931982,"number":674,"title":"Creating multiple timelines on same page dynamically","user":{"login":"mukulgupta2507","id":4299536,"avatar_url":"https://avatars.githubusercontent.com/u/4299536?v=3","gravatar_id":"","url":"https://api.github.com/users/mukulgupta2507","html_url":"https://github.com/mukulgupta2507","followers_url":"https://api.github.com/users/mukulgupta2507/followers","following_url":"https://api.github.com/users/mukulgupta2507/following{/other_user}","gists_url":"https://api.github.com/users/mukulgupta2507/gists{/gist_id}","starred_url":"https://api.github.com/users/mukulgupta2507/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mukulgupta2507/subscriptions","organizations_url":"https://api.github.com/users/mukulgupta2507/orgs","repos_url":"https://api.github.com/users/mukulgupta2507/repos","events_url":"https://api.github.com/users/mukulgupta2507/events{/privacy}","received_events_url":"https://api.github.com/users/mukulgupta2507/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":10,"created_at":"2015-09-04T17:17:50Z","updated_at":"2015-09-09T15:18:59Z","closed_at":null,"body":"Hi,\r\n\r\nI need some help with SO question http://stackoverflow.com/questions/32402730/building-multiple-social-profile-timelines-on-a-single-page. Can anyone please provide their valuable inputs ?\r\n\r\nThanks"},"comment":{"url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/comments/138944153","html_url":"https://github.com/almasaeed2010/AdminLTE/issues/674#issuecomment-138944153","issue_url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/674","id":138944153,"user":{"login":"almasaeed2010","id":1512664,"avatar_url":"https://avatars.githubusercontent.com/u/1512664?v=3","gravatar_id":"","url":"https://api.github.com/users/almasaeed2010","html_url":"https://github.com/almasaeed2010","followers_url":"https://api.github.com/users/almasaeed2010/followers","following_url":"https://api.github.com/users/almasaeed2010/following{/other_user}","gists_url":"https://api.github.com/users/almasaeed2010/gists{/gist_id}","starred_url":"https://api.github.com/users/almasaeed2010/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/almasaeed2010/subscriptions","organizations_url":"https://api.github.com/users/almasaeed2010/orgs","repos_url":"https://api.github.com/users/almasaeed2010/repos","events_url":"https://api.github.com/users/almasaeed2010/events{/privacy}","received_events_url":"https://api.github.com/users/almasaeed2010/received_events","type":"User","site_admin":false},"created_at":"2015-09-09T15:18:59Z","updated_at":"2015-09-09T15:18:59Z","body":"You'll need a custom container that allows for horizontal overflow. The columns within the container must have a specific maximum width (or fixed width). Here is an example \r\n\r\nCSS\r\n```css\r\n.hor-container {\r\n  /* columns container */\r\n  width: 100%;\r\n  overflow-x: auto;\r\n  white-space: nowrap;\r\n}\r\n.hor-col {\r\n  /* Column to contain a box */\r\n  width: 500px; /* you need to set a fixed width for each box */\r\n  padding: 10px;\r\n  display: inline-block;\r\n}\r\n```\r\n\r\nHTML\r\n```html\r\n<!-- within the main content -->\r\n<div class=\"hor-container clearfix\">\r\n  <div class=\"hor-col\">\r\n    <!-- Box 1 goes here -->\r\n  </div>\r\n  <div class=\"hor-col\">\r\n    <!-- Box 2 goes here -->\r\n  </div>\r\n  <!-- dynamically create more hor-col with a box inside it and place it here ...-->\r\n</div>\r\n```\r\n\r\nYou might also want to specify a height for your boxes so they don't vertically align differently from each other.\r\n\r\nThe result would be something like this. It allows boxes to be on the same line and provides horizontal scroll to navigate between them.\r\n<img width=\"500\" alt=\"screen shot 2015-09-09 at 11 15 48 am\" src=\"https://cloud.githubusercontent.com/assets/1512664/9765909/76936046-56e4-11e5-89f8-33e552ccc944.png\">\r\n\r\n\r\nLet me know how this works for you."}}