HTML Tab Controls Containing Content Areas Bug



We're implementing a solution using a tab control. We're using Easy Responsive Tabs but the same is true for Foundation Tabs too.

Our tab control has four tabs, each tab contains a content area. When the active tab is changed and jquery executes the non-active tabs are essentially set to {{display: none;}}. When this happens the div containing "You can drop content here, or create a new block" is displayed in the very top left of the window and has the following inline styles applied.

<div class="epi-overlay-blockarea dojoDndSource dojoDndTarget epi-overlay-item epi-overlay-itemFocused dijitFocused dojoDndContainer" id="uniqName_109_2" widgetid="uniqName_109_2" style="left: 0px; top: 0px; width: 0px; height: 0px;">

Can anyone please advise on how to prevent this from happening as I'm sure we're not the first to come across this.



Jun 19, 2014 9:02


Did you ever find a solution to this issue?

Nov 21, 2014 13:51

Hi Jonas

We did implement a javascript solution which basically hid the divs for the tabs that weren't the active tab using using the div's ID e.g. uniqName_109_2.

Then we updated our version of EPiServer to 7.10 and they changed their naming convention for these divs which broke our code.

Since then we've not tried to fix the issue again.



Nov 23, 2014 23:03

Thanks for reply. I actually got aware that there is a bug filed for this issue. ( Its in active state. Hopefully we will see a solution to this in the near future.


Nov 24, 2014 13:00
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.