When a table in the PI Sheet has more than 10 lines the scrolling of the table content is activated. When you scroll down the headers of the table columns get lost because they are also in the scrolling area. This is of course not very user friendly. In the following section I describe a simple stylesheet enhancement that solves this problem. The initial idea came from one of SAP’s customers (thank you Christoph!) and I have added\u00a0the fix for dropdown lists.<\/p>\n
The first location is in the general template for tables called ‘builderrepeat’ (<xsl:template name=”builderrepeat”>) of your XSL. Scroll down to the comment ‘<!– Table body –>’ and insert the following code:<\/p>\n
\n<!-- Table body --><\/span>\r\n<DIV ID=\"_bfw_tab_scroll_\" ...\r\n\u00a0<TABLE ID=\"_bfw_tab_body_\" ...\r\n\u00a0 <THEAD>\r\n\u00a0\u00a0 <TR ID=\"_bfw_tab_text_\">\r\n\u00a0\u00a0 <!-- ### MX_010: Insert Start\u00a0\u00a0 ########################################### -->\r\n<\/span>\u00a0\u00a0\u00a0\u00a0 <xsl:attribute name=\"style\">position:relative;top:expression(this.offsetParent.scrollTop)<\/xsl:attribute>\r\n\u00a0\u00a0 <!-- ### MX_010: Insert End\u00a0\u00a0\u00a0\u00a0 ########################################### --><\/span><\/span><\/pre>\n<\/blockquote>\nPlease do not split the red coding part into several lines!<\/p>\n
This already will probably work for most use cases. However if you are using dropdown lists in your table then the top-most dropdown list element would be scrolled into the title. To avoid this I have added\u00a0 the following code to hide that element as soon as it reaches the title area:<\/p>\n
\n<xsl:template match=\"INPUT[ancestor::INSTRUCTION[.\/@type='repeat' or .\/@group]]\" mode=\"repeat\">\r\n <TD CLASS=\"TABFIELD\" ID=\"_bfw_component_\" _BFW_TYPE_=\"bfwInput\">\r\n <xsl:attribute name=\"_BFW_KEY_\">\r\n <xsl:value-of select=\".\/@id\" \/>\r\n <\/xsl:attribute>\r\n <xsl:choose>\r\n <xsl:when test=\".\/HELPVALUE\">\r\n <SPAN ID=\"_SELECT_\">\r\n <!-- ### MX_010: Replace Delete ########################################### old code below...\r\n <SELECT STYLE=\"width:100%\" ID=\"_bfw_field_\" CLASS=\"TIFDINACTIVE\" TABINDEX=\"-1\"\r\n SIZE=\"1\" _BFW_CSS_ACTIVE_=\"TIFDACTIVE\" _BFW_CSS_INACTIVE_=\"TIFDINACTIVE\"\r\n _BFW_CSS_DEFAULT_=\"TIFDDEFAULT\" _BFW_CSS_ERROR_=\"TIFDERROR\" _BFW_CSS_DISABLED_=\"TIFDDISABLED\">\r\n ### MX_010: Replace Insert ###########################################\r\n ... to avoid that select elements are scrolling into the column title --><\/span>\r\n<\/span> <SELECT STYLE=\"width:100%; visibility:expression(MX_Hide_Select(this))\" ID=\"_bfw_field_\"\r\n CLASS=\"TIFDINACTIVE\" TABINDEX=\"-1\" SIZE=\"1\" _BFW_CSS_ACTIVE_=\"TIFDACTIVE\"\r\n _BFW_CSS_INACTIVE_=\"TIFDINACTIVE\" _BFW_CSS_DEFAULT_=\"TIFDDEFAULT\" _BFW_CSS_ERROR_=\"TIFDERROR\"\r\n _BFW_CSS_DISABLED_=\"TIFDDISABLED\">\r\n<\/span> <!-- ### MX_010: Replace End ########################################### --><\/span>\r\n <xsl:for-each select=\".\/HELPVALUE\"><\/pre>\n<\/blockquote>\nAs you can see there is also some javascript code involved:<\/p>\n
\n\/\/------------------------------------------------------------------------------------\r\n\/\/ MX_010: Table column headers stay at the top\r\n\/\/------------------------------------------------------------------------------------\r\n\/\/ This function hides SELECT objects\r\n<\/span>function MX_Hide_Select(obj) {\r\n\u00a0div_scrollTop\u00a0 = obj.offsetParent.offsetParent.offsetParent.scrollTop;\r\n\u00a0line_offsetTop = obj.offsetParent.offsetTop;\r\n\u00a0obj_offsetTop\u00a0 = obj.offsetTop;\r\n\u00a0\u00a0head_height\u00a0\u00a0\u00a0 = obj.offsetParent.offsetParent.firstChild.offsetHeight;\r\n\u00a0if (div_scrollTop + head_height > line_offsetTop + obj_offsetTop) {\r\n\u00a0\u00a0return 'hidden';\r\n\u00a0} else {\r\n\u00a0\u00a0return 'visible';\r\n\u00a0}\r\n}<\/pre>\n<\/blockquote>\nYou have to provide that code in a separate JS file and of course you need to link this JS file in the\u00a0HTML header definitions in your XSL:<\/p>\n
<SCRIPT LANGUAGE=”JavaScript” SRC=”SAPR3-WR-Z_YOUR_JS_FILE.JS”\/><\/p>\n
Some remarks:<\/span><\/strong><\/p>\nUsing expressions for CSS styles is only possible in Internet Explorer. But since the PI Sheets depends on IE this is not a problem. Due to the constant running of Javascript code these expressions might slow down your performance if you use them a lot. So please use with care!<\/p>\n","protected":false},"excerpt":{"rendered":"
When a table in the PI Sheet has more than 10 lines the scrolling of the table content is activated. When you scroll down the headers of the table columns get lost because they are also in the scrolling area. This is of course not very user friendly. In the following section I describe a […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_links_to":"","_links_to_target":""},"categories":[52],"tags":[40,54],"_links":{"self":[{"href":"https:\/\/websha.de\/xstepcafe\/wp-json\/wp\/v2\/posts\/670"}],"collection":[{"href":"https:\/\/websha.de\/xstepcafe\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websha.de\/xstepcafe\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websha.de\/xstepcafe\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/websha.de\/xstepcafe\/wp-json\/wp\/v2\/comments?post=670"}],"version-history":[{"count":27,"href":"https:\/\/websha.de\/xstepcafe\/wp-json\/wp\/v2\/posts\/670\/revisions"}],"predecessor-version":[{"id":2166,"href":"https:\/\/websha.de\/xstepcafe\/wp-json\/wp\/v2\/posts\/670\/revisions\/2166"}],"wp:attachment":[{"href":"https:\/\/websha.de\/xstepcafe\/wp-json\/wp\/v2\/media?parent=670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websha.de\/xstepcafe\/wp-json\/wp\/v2\/categories?post=670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websha.de\/xstepcafe\/wp-json\/wp\/v2\/tags?post=670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}