Thursday, October 30, 2014

Parsys issue in Tab Control component.

When we add the Tab control component and author the tabs ,the placeholder below the Tabs which is not active will move towards the top left corner of the page.So it will be difficult for the author to edit the content inside the tabs.
Following below is the workaround for this issue

The problem for tab component occurs because :
·         The div under hidden tab have is hidden by display:none

·         The height and width for the div of drop area for parsys component is  (#CQ .cq-editrollover-insert-container) computed based on the wrapper div

·         Whenever there is any parsys component included inside hidden div or floated div , the CQ authoring library computed height/widht as zero  of #CQ .cq-editrollover-insert-container div 

The solution for this issue or similar issue is not hide the wrapper div where parsys is included by make it hidden by moving it out of view area

For example in case of bootstrap tab component, adding these css style to override bootstrap CSS solves the problem

.tab-content > {
      display: block;
      left: 0px;
      position: relative;

.tab-content > .tab-pane {
      display: block;
      left: -9999px;
      position: absolute;

Hope this will help