{"id":85,"date":"2012-01-30T14:50:02","date_gmt":"2012-01-30T14:50:02","guid":{"rendered":"http:\/\/www.corrspt.com\/blog\/?p=85"},"modified":"2012-01-29T17:03:54","modified_gmt":"2012-01-29T17:03:54","slug":"scrollbars-in-a-xeo-viewer","status":"publish","type":"post","link":"https:\/\/www.corrspt.com\/blog\/2012\/01\/30\/scrollbars-in-a-xeo-viewer\/","title":{"rendered":"Scrollbars in a XEO Viewer"},"content":{"rendered":"

When creating an XEO Viewer you’ll probably run into the “scrollbar issue”. \u00a0Not all container components (such as panel or section) add scrollbars when the content exceeds the available space. In order for you to assure that your content is visible you need to wrap your content using the Tab component, like the following:<\/p>\n

<xvw:tabs>\r\n\r\n   <xvw:tab label='Test'>\r\n\r\n       <!-- Your content goes here  -->\r\n\r\n    <\/xvw:tab>\r\n\r\n<\/xvw:tabs><\/pre>\n
Which produces the following result:<\/p>\n
\"Tab<\/a>
Tab with Label and Scrollbar<\/p><\/div>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
This will make the scrollbar appear if needed. If you set a label for the tab (as in the example with the “Test” label) it will be rendered as such. If you don’t set a label for the tab it will still render the space for that empty label which is not very pretty. In order to make that go away you can use the renderTabBar<\/em> property of the parent xvw:tabs<\/em> component to make that tab bar disappear (but still use a tab component), like in the following listing:<\/p>\n
<xvw:tabs renderTabBar='false'>\r\n\r\n   <xvw:tab>\r\n\r\n       <!-- Your content goes here  -->\r\n\r\n    <\/xvw:tab>\r\n\r\n<\/xvw:tabs><\/pre>\n
Which will produce the following result (with scrollbars as needed) :<\/p>\n
\"Tab<\/a>
Tab with No Label and Scrollbar<\/p><\/div>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
When creating an XEO Viewer you’ll probably run into the “scrollbar issue”. \u00a0Not all container components (such as panel or section) add scrollbars when the content exceeds the available space. In order for you to assure that your content is … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,3],"tags":[14],"class_list":["post-85","post","type-post","status-publish","format-standard","hentry","category-tip","category-xeo","tag-xeo-viewer"],"_links":{"self":[{"href":"https:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/posts\/85","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/comments?post=85"}],"version-history":[{"count":7,"href":"https:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/posts\/85\/revisions"}],"predecessor-version":[{"id":123,"href":"https:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/posts\/85\/revisions\/123"}],"wp:attachment":[{"href":"https:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/media?parent=85"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/categories?post=85"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/tags?post=85"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}