How to implement My Account resizing for customized templates

Piano's My Account section enables end users to manage their subscriptions and user details on the publisher's website directly.

By default, the My Account container automatically resizes based on the width and screen size of the device it's being viewed on.

But in case you have heavily customized the My Account section, this out-of-the-box functionality might not be working properly. You can follow the steps outlined below to remedy this, though.

1. Replace my-account-widget-scroll with class="scrollable-content" to get something like this <div class="scrollable-content">. If there already is a class attribute on the tag, simply remove the my-account-widget-scroll directive and add another class name after a whitespace: <div class="some-class scrollable-content">. Here is the list of templates that need to be updated:

   My Account Voucher Components

   My Account Wallet Components

   My Account Transactions Components

   My Account Payments Components

   My Account User Profile Components

   My Account Cash Payment Components

2. In the template My Account Help Components:

   • in the blocks item.shtml, new.shtml, selectResource.shtml complete step 1,

   • in the block list.shtml remove my-account-widget-scroll from

     HTML

     <div ng-show="inquires.length > 0" class="table-container" my-account-widget-scroll >
     

     and right after the opening script tag add a new opening tag with classes <div class="without-border scrollable-content"> and then close the </div> tag before closing </script>, like this:

     HTML

     <script type="text/ng-template" id="/widget/myaccount/partials/help/list.shtml">
     <div class="without-border scrollable-content"> 
     
     </div> 
     </script>
     

3. In the template My Account Library Components you should update only the block library_list.shtml.

   • Remove the opening tag <div my-account-widget-scroll="scrollable-content-top-indent"> and its paired closing tag </div>.

   • Find library-table tags in the active and expired sections and wrap them into the new tags <div class="scrollable-content"> like this:

     HTML

     <tab heading="{{'Active' | tc:'checkout.platform'}}" select="$parent.active=true">
       <div class="scrollable-content"> 
         <library-table
           ...>
         </library-table>
       </div> 
     </tab>
     

   • Find the block with screen--print-component class and wrap its contents into a new tag with classes <div class="scrollable-content without-border"> like this (don’t forget to close the tag):

     HTML

     <div class="screen--print-component" ng-if="isScreen(SCREEN_PRINT_COMPONENT)">
       <div class="scrollable-content without-border"> 
         
       </div> 
     </div>
     

Now your My Account section should resize on the fly.

Last updated: June 26, 2026