TinyMCE und zu schmale drop-down menüs

[oliver]

hallo,

ich habe folgendes problem beim TinyMCE:
wenn ich in einem textelement einem text auf eine TYPOlight datei verlinken will, ist das drop down in manchen fällen zu schmal. man kann dann die einzelnen dateien nicht mehr unterscheiden.
das problem tritt vor allem dann auf, wenn die dateinamen sehr lange sind und sich erst in den hinteren zeichen unterscheiden:



mir ist schon klar, dass man es leicht lösen könnte, indem man die dateinamen kürzt, aber mein kunde hat eben so lange namen.

gibt es dafür eine lösung bzw. workaround?
danke
oliver

[Toflar]

Ich gehe davon aus, dass das alles mit CSS gelöst ist. Einfach mal mit Firebug schauen, ob was machbar ist

[oliver]

danke toflar,

darauf hätte ich eigentlich selber kommen müssen. ;-)
es geht nicht direkt über CSS sonder über die datei
plugins/tinyMCE/plugins/typolinks/typolinks.php

jetzt muss ich nur mehr rausfinden, wie ich diese updatesicher ändere...

danke
oliver

[mandrake]

Hallo Oliver,

wenn ich mich nicht komplett auf dem Holzweg befinde, ist das Problem vom jeweils verwendeten Browser abhängig. Hatte mich in der Vergangenheit auch bereits mit dem Thema beschäftigt - ist aber leider in Vergessenheit geraten.

MfG
Peter

[bubblez]

Das Problem ist Browserabhängig. Firefox passt die grösse der Aufgeklappten Einträge automatisch an den längsten an. IE macht alle Einträge und die Auswahlbox so breit wie im CSS vorgegeben. Mit einer CSS Regel

#tlfiles{ width: auto !important;}

wird auch IE alles anzeigen. Das Problem, dabei ist, dass die Liste dann immer so breit ist wie der längste Beitrag. Das Layout wird also unter umständen verzerrt.

Andere hatten das Problem auch schon :
http://stackoverflow.com/questions/6...-content-in-ie

[bubblez]

In Anlehnung zum meinem geposteten Link habe ich folgendes Versucht:

1. mootools script in typolinks.php head tags laden:

<script type="text/javascript" src="<?php echo $GLOBALS['TL_CONFIG']['websitePath']; ?>/plugins/mootools/mootools-core.js"></script>

2. vor dem /form Tag testweise folgendes eingefügt:

<script type="text/javascript">
top.addEvent('domready',function() {
    $$('tlfile').addEvents({
        'mouseenter': function() {
        	alert("mouse entered");
            this.setStyle("width","auto");
        }
    	/*
        mouseleave: function() {
            this.setStyle("width","200px");
        }*/
    });
});
</script>

Aber irgendwie wird mouse entered nie ausgegeben. Der domready callback wird allerdings ausgeführt. Hat jemand eine Idee warum das so ist?

[bubblez]

Ich hab mir das Template in typolinks.php mal genauer angeschaut und dabei kam folgendes raus:

1. Eine elegante Methode die zu langen/abgeschnittenen Dateinamen in allen Browsern ohne JS/CSS einfach zugänglich zu machen besteht darin in der systems/modules/backend/Backend.php Zeile 476 anzupassen:

// Files
            elseif ($strFile != 'meta.txt')
            {
                $strFiles .= sprintf('<option title="%s" value="%s"%s>%s</option>', $strFile, $strFolder . '/' . $strFile, (($strFolder . '/' . $strFile == $this->Input->get('value')) ? ' selected="selected"' : ''), specialchars($strFile));
            } 

und jeder option einen title zu vergeben.

2. Es ist mir aufgefallen, dass das popup (z.B. in tinyMCE beim Link einfügen) resizable ist. Die Formularfelder skalieren aber nicht mit sondern haben eine feste grösse. Mit ein wenig CSS könnte man das aber dynamisch machen:

<style type="text/css">
.formTable{
	width: 100%;
}
.formTable .col2{
	width: 100%;
}
.formTable select, .formTable input{
	width: 100%;
}
</style>
<table class="formTable" border="0" cellpadding="4" cellspacing="0">
	<tr>
		<td nowrap="nowrap"><label for="tlpage">{#typolinks_dlg.page}</label></td>
		<td class="col2"><select id="tlpage" name="tlpage"
			onchange="document.forms[0].tlfile.value='';document.forms[0].href.value=this.value;">
			<option value="">-</option>
			<?php echo $objLib->createPageList(); ?>
		</select></td>
	</tr>
	<tr>
		<td nowrap="nowrap"><label for="tlfile">{#typolinks_dlg.file}</label></td>
		<td class="col2"><select id="tlfile" name="tlfile"   
			onchange="document.forms[0].tlpage.value='';document.forms[0].href.value=this.value;">
			<option title="empty" value="">-</option>
			<?php echo $objLib->createFileList(); ?>
		</select></td>
	</tr>
	<tr>
		<td nowrap="nowrap"><label for="href">{#typolinks_dlg.link_url}</label></td>
		<td class="col2">
		<table border="0" cellspacing="0" cellpadding="0" class="formTable">
			<tr>
				<td><input id="href" name="href" type="text" class="mceFocus"
					value="" 
					onchange="LinkDialog.checkPrefix(this);" /></td>
				<td id="hrefbrowsercontainer">&nbsp;</td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td nowrap="nowrap"><label for="linktitle">{#typolinks_dlg.link_titlefield}</label></td>
		<td class="col2"><input id="linktitle" name="linktitle" type="text" value=""
			/></td>
	</tr>
	<tr>
		<td><label id="rellistlabel" for="rel_list">{#typolinks_dlg.image_rel}</label></td>
		<td class="col2"><select id="rel_list" name="rel_list" class="mceEditableSelect"
			></select></td>
	</tr>
	<tr>
		<td><label id="targetlistlabel" for="target_list">{#typolinks_dlg.link_target}</label></td>
		<td class="col2"><select id="target_list" name="target_list" ></select></td>
	</tr>
	<tr>
		<td><label for="class_list">{#class_name}</label></td>
		<td class="col2"><select id="class_list" name="class_list"
			class="mceEditableSelect" ></select></td>
	</tr>
</table>

In meinen Augen würde es Sinn machen diese Änderungen in TYPOlight vorzunehmen wie seht ihr das? Bisher habe ich mit Firefox 3.6 und Internet Explorer 8 getestet.