{"action":"opened","issue":{"url":"https://api.github.com/repos/valor-software/ng2-bootstrap/issues/1527","repository_url":"https://api.github.com/repos/valor-software/ng2-bootstrap","labels_url":"https://api.github.com/repos/valor-software/ng2-bootstrap/issues/1527/labels{/name}","comments_url":"https://api.github.com/repos/valor-software/ng2-bootstrap/issues/1527/comments","events_url":"https://api.github.com/repos/valor-software/ng2-bootstrap/issues/1527/events","html_url":"https://github.com/valor-software/ng2-bootstrap/issues/1527","id":201982855,"number":1527,"title":"Horizontally scrollable tabset","user":{"login":"szh","id":546965,"avatar_url":"https://avatars.githubusercontent.com/u/546965?v=3","gravatar_id":"","url":"https://api.github.com/users/szh","html_url":"https://github.com/szh","followers_url":"https://api.github.com/users/szh/followers","following_url":"https://api.github.com/users/szh/following{/other_user}","gists_url":"https://api.github.com/users/szh/gists{/gist_id}","starred_url":"https://api.github.com/users/szh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/szh/subscriptions","organizations_url":"https://api.github.com/users/szh/orgs","repos_url":"https://api.github.com/users/szh/repos","events_url":"https://api.github.com/users/szh/events{/privacy}","received_events_url":"https://api.github.com/users/szh/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-01-19T21:38:25Z","updated_at":"2017-01-19T21:38:25Z","closed_at":null,"body":"I'm using ng2-bootstrap tabs in a mobile web site, but on small screens there are too many tabs to fit on the screen. I am able to get the tabs to scroll like this:\r\n\r\n```html\r\n<tabset class=\"tabset-scrollable\">\r\n```\r\n```less\r\n.tabset-scrollable .nav-tabs {\r\n  display: -webkit-box;\r\n  display: -webkit-flex;\r\n  display: flex;\r\n  -webkit-flex-wrap: nowrap;\r\n  flex-wrap: nowrap;\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  -webkit-overflow-scrolling: touch;\r\n\r\n  & > li {\r\n    float: none;\r\n    -webkit-flex: 0 0 auto;\r\n    flex: 0 0 auto;\r\n  }\r\n}\r\n```\r\n\r\nHowever, the user has no indication that they're scrollable. I'd like to show a scroll shadow, something like http://codepen.io/matthewbeta/pen/fzoHI\r\nThe issue is that this requires CSS styling on a parent element, but the tabs `<ul>` parent also contains the tab content, which isn't scrollable.\r\n![capture](https://cloud.githubusercontent.com/assets/546965/22126417/944f9d48-de65-11e6-8cf5-aeb273c47808.PNG)\r\n\r\nIs there any way to achieve this effect? Thank you."}}
{"actor":{"display_login":"szh"}}