0

I have reported this question with the CKEditor tabber issues, but I thought I ask this question here too, in case I am missing something obviuos... I have installed the CKEditor tabber module and after creating some tabs and tab content, the tabs is pushed out to the right in the screen. Like this:

enter image description here

I noticed that when I log out the tabs appear above the content as expected. I have narrowed it down to the permission "Use admin toolbar". When the admin toolbar is shown, the CKEditor tabs is showed as on the image. When the admin toolbar is not shown, the CKEditor tabs shows as they should above the tab content.

I have spent hours trying to find how the toolbar affects the CSS in this way, but I can't figure out what to do...

Anyone?

UPDATE: I noticed that the "left" attribute is 100% too large in this section that is in charge of the first tab's positioning and width:

<dt id="tab-0-0" class="current style="width:16,6667%; left:100%;">

In the js file semantic-tabs.js this code is in charge of the above:

$(this).css({
  'width': (100 / numTabs) + '%',
  'left': (100 / numTabs * tabIndex) + '%'
});

So, if I add "-100" after tabIndex above the tabs are positioned correctly when logged in with the admin toolbar visible. If logged out the tabs are pushed to the left in this case. So the JS decides to add 100% to the "left" value when the toolbar is visible. Also I can see that for half a second the tabs are positioned correctly before being pushed out, every time I refresh the page. I am going crazy here...

  • On what page/s does this happen? Is it for a particular content type? All content type? For a specific role? All roles? – longboardnode Apr 30 '17 at 18:08
  • All content types and all roles that have permission to see the admin toolbar. If I disable the toolbar permission the tabs shows correctly. – TBJ Apr 30 '17 at 19:48
  • Odd. When you look at the HTML source code, do you see an extra <div> or a missing </div> somewhere before/after the tabs? It seems like something is pushing the divs out of whack... – longboardnode May 2 '17 at 0:01
  • Yes, it really is... No I cannot see any stray DIV's. See my update above. – TBJ May 2 '17 at 6:52
0

In case anyone else has the same problem I will answer my own question. I found the answer to my problem in this issue for the same module: https://www.drupal.org/node/2774763 The problem was not exactly the same to begin with, but the solution was the same. The variable tabIndex needed to be placed within the function, not outside as a global. Problem solved.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.