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 > .active.tab-pane {
      display: block;
      left: 0px;
      position: relative;
}

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

Hope this will help

6 comments:

  1. Hey there! Would you mind if I share your blog with my facebook
    group? There's a lot of follks that I think would really appreciate your
    content. Please lett me know. Thank you

    Here is my web-site ... such a good point

    ReplyDelete
  2. Thanks, this helped a lot!

    ReplyDelete
  3. Hi,what to do for parsys issue in accordion component?

    ReplyDelete
  4. Accordian is a custom component u need to manage the placeholder by the id

    ReplyDelete
  5. You rock!! i was struggling with this issue for days.
    thanks gain for posting

    ReplyDelete
  6. Can you please explain how we can solve this same issue in Accordion component? I am struggling for days.

    ReplyDelete