Hi,
I can't figure out why some dropdowns appear in the wrong place.
Dropdown
Format, Font, Font size, Styles are displayed in the right place.
Also, when in full screen the problem persist and the toolbar looks different.
Dropdown full screen
Thanks.

CommentFileSizeAuthor
dropdown_full_screen.png4.26 KBgge
dropdown.png3.56 KBgge
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

TwoD’s picture

TwoD
Primary language Swedish
Location Sweden
CreditAttribution: TwoD commented
Status: Active » Postponed (maintainer needs more info)

I don't know what could cause this, other than some conflict between the styling in TinyMCE and perhaps the Drupal theme you are using.
I found a similar issue in http://www.tinymce.com/forum/viewtopic.php?id=26765 and it suggests that a style rule somewhere applies relative positioning to the dropdown, where I guess it should be absolute.

Can you check with Firebug for Firefox or a similar tool to see which style rules get applied to the elements the dropdown is made up of? It should tell you in which file that rule is and what the CSS selector looks like which happen to match one or more of those elements.

gge’s picture

gge CreditAttribution: gge commented

Hi,
To create/edit content I use Seven, Wysiwyg 7.x-2.x-dev and Tinymce 3.4.9. However, I think I've found something....
As I said, other dropdowns like Styles are displayed correctly so let's have a look at that block:

<div id="menu_edit-body-und-0-value_edit-body-und-0-value_formatselect_menu" class="mceListBoxMenu mceNoIcons defaultSkin" role="listbox" style="position: absolute; left: 427px; top: 383.767px; z-index: 200000; outline: 0pt none; display: block; width: 120px; height: 150px;" tabindex="0">
	<div id="menu_edit-body-und-0-value_edit-body-und-0-value_formatselect_menu_co" class="mceMenu mceListBoxMenu mceNoIcons defaultSkin" role="presentation" style="width: 120px; height: 150px;">
		<table id="menu_edit-body-und-0-value_edit-body-und-0-value_formatselect_menu_tbl" cellspacing="0" cellpadding="0" border="0" role="presentation">
		.........
		</table>
	<div>
</div>

Now let's take a look at numbered list dropdow:

<div id="menu_edit-body-und-0-value_edit-body-und-0-value_bullist_menu" class="mceSplitButtonMenu defaultSkin" role="listbox" style="position: absolute; left: 41px; top: 361.767px; z-index: 200000; outline: 0pt none; display: block; width: 86px; height: 101px;">
	<div id="menu_edit-body-und-0-value_edit-body-und-0-value_bullist_menu_co" class="mceMenu mceSplitButtonMenu defaultSkin" role="presentation">
		<table id="menu_edit-body-und-0-value_edit-body-und-0-value_bullist_menu_tbl" cellspacing="0" cellpadding="0" border="0" role="presentation">
		.........
		</table>
	</div>
</div>

The div is positioned absolute in both cases but in the second example (numbered list dropdow) left and top values are wrong and I have no idea how to fix that :)
I'm not sure if I have the same problem as the guy on the tinymce forum.

I forgot to mention that when I click on menu_edit-body-und-0-value_edit-body-und-0-value_bullist_menu or menu_edit-body-und-0-value_edit-body-und-0-value_formatselect_menu firebug shows only one rule, which is the element style. Bellow is reset.css, body color and font...

TwoD’s picture

TwoD
Primary language Swedish
Location Sweden
CreditAttribution: TwoD commented

Oh, hmm.. that's odd.
I have no idea how TinyMCE calculates those position values, all I know is that it does it on its own.

Are the dialogs positoned the same in all browsers?
Is it also happening on http://www.tinymce.com/tryit/full.php?

gge’s picture

gge CreditAttribution: gge commented

The dialogs look the same in Firefox 11, Chrome 19, Opera 11.61 and IE 9.
TinyMCE demo looks as it should, can't see any problem there.
I just did a fresh install of drupal 7.12 without installing other modules but wysiwyg 7.x-2.x-dev and tinymce 3.4.9 and same problem...

daveoj’s picture

daveoj CreditAttribution: daveoj commented

Wonder if there has been any movement on this issue. I'm experiencing exactly the same... it seems to occur only on 'drop-down buttons' versus the combo-box controls.

I'd love to say I knew how to provide more information, but it does appear as if TinyMCE is generating the wrong positioning for these drop-down components. However, to concur with what's been said here - this only appears to be an issue when embedded in Drupal (the TinyMCE demo works just fine). That would suggest some kind of styling conflict to me - but I'm not able to track it down yet.

TwoD’s picture

TwoD
Primary language Swedish
Location Sweden
CreditAttribution: TwoD commented

@daveoj, @gge, do you have a site online where I could take a look at this phenomenon?

mjwright’s picture

mjwright CreditAttribution: mjwright commented

A fix for this issue is to add the following to wysiwyg/editors/css/tinymce-3.css:

.wysiwygToolbar > div {
  display: inline-block;
}
.wysiwygToolbar,
.wysiwygToolbar * {
  white-space: normal !important;
}

The dropdowns may still be slightly out of position if you are running TinyMCE 3.4. Upgrading to TinyMCE 3.5 along with the CSS additions above will position the dropdowns perfectly.

mjwright’s picture

mjwright CreditAttribution: mjwright commented

To fix the dropdown positioning problem in full screen mode, remove the following style from wysiwyg/editors/css/tinymce-3.css:

.mceToolbar td {
  display: inline;
}
TwoD’s picture

TwoD
Primary language Swedish
Location Sweden
CreditAttribution: TwoD commented
Status: Postponed (maintainer needs more info) » Closed (duplicate)

This seems to be caused by Wysiwyg's stylesheets, which apply workarounds for other issues with the TinyMCE toolbars.
None of those workarounds will no longer be needed once we are able to commit a good patch from #277954: Allow to sort editor buttons. So, I'll mark this a duplicate of that issue and encourage everyone having button placement issues to have a look at the latest patch over there or check out the sort_buttons branch from git to test the latest code.