Suggest mit Scrolldiv gelöst, wird aber mit fieldset überlappt

[chblond]

Hallo, ich muss für die Arbeit Suggests entwickeln.

Das Resultat kann sich auch bereis sehen lassen. Allerdings habe ich das Problem, wenn ich meine Anwendung im IE teste, und unser Kunde nutzt leider den IE, wird mein aufpoppendes DIV von einem Fieldset überlappt.

Mein Sroll-Div, welches eigentlich ganz vorne liegen sollte hat folgenden Style:

  
.suggest_scroller  
{  
  overflow:auto;  
  position: absolute;  
  display: block;  
  z-index: 500;  
  
  text-align:left ;  
  margin: 0;  
  visibility: hidden;  
  
  
  height: expression( this.scrollHeight > 179 ? "180px" : "auto" ); /* sets max-height for IE */  
  max-height:180px !important; /* sets max-height value for all standards-compliant browsers */  
  width: 400px !important;  
  
  
  border:1px solid #AABDD3 !important;  
  clear:both;  
  float: none;  
  margin-top: 20px;  
  padding: 0;  
  
}  

So sieht mein Problem aus:

Hier der Style des überlappenden Fieldsets:
.inhalt FORM FIELDSET { BORDER-TOP-WIDTH: 0pt; BORDER-LEFT-WIDTH: 0pt; BACKGROUND: #f7f9fb 0% 50%; BORDER-BOTTOM-WIDTH: 1px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0pt}.inhalt FORM FIELDSET.vermittlerdaten { BORDER-TOP-WIDTH: 0pt; BORDER-LEFT-WIDTH: 0pt; BACKGROUND: #f7f9fb 0% 50%; BORDER-BOTTOM-WIDTH: 1px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0pt}

Wie so oft, wird es im FF richtig angezeigt.

[Malcolm Beck´s]

hi,

IE
Mein Sroll-Div

Hab dein Problem zwar nicht ganz verstanden, Tippe aber auf "How to cover an IE windowed control".

mfg

[chblond]

Hab dein Problem zwar nicht ganz verstanden, Tippe aber auf "How to cover an IE windowed control".

mfg

Also das Problem ist in etwa dort zu finden. Nur benutze ich bereits den IE7, wo dies angeblich nicht mehr notwendig sein sollte.
Trotzdem - der Kunde benutzt den IE 6 - wollte ich dieses Vorgehen testen. Doch auch hier funktionierte dies nicht.

Wie bekommen dies andere Anwendungen hin?
Zum Beispiel Adresssuche bei Freenet

[Malcolm Beck´s]

hi,

Also das Problem ist in etwa dort zu finden. Nur benutze ich bereits den IE7, wo dies angeblich nicht mehr notwendig sein sollte.
Trotzdem - der Kunde benutzt den IE 6 - wollte ich dieses Vorgehen testen. Doch auch hier funktionierte dies nicht.

Beim besten Willen, ich verstehe dein Problem nicht.
Bitte schildere, was nicht funktioniert.
Gernots Beispiel funktioniert, wenn nicht, musst du dein Problem genauer schildern.

Wie bekommen dies andere Anwendungen hin?
Zum Beispiel Adresssuche bei Freenet

Mit Javascript, wobei ich anmerken muss, dass ich rund 3 Minuten suchen musste, um zu finden, was du meinst.

mfg

[chblond]

Nun, ich probiers nochmal ;)

  
<fieldset class="vermd">  
     <div>  
      <label for="kontoinhaber">Kontoinhaber</label>  
      <html:text property="kontoinhaber" styleId="kontoinhaber" styleClass="standard" maxlength="50"/>  
           </div>  
           <div>  
      <label for="kontonummer">Kontonummer *</label>  
      <html:text property="kontonummer" styleId="kontonummer" styleClass="standard" maxlength="10"/>  
           </div>  
           <div>  
      <label for="blz">BLZ *</label>  
      <html:text property="blz" styleId="blz" styleClass="standard" maxlength="8" onkeyup="window.setTimeout('blzsuche_ajax.loadit()',500);" onblur="window.setTimeout('',500)" />  
  
        <div class="suggest" id="search_suggest_blz">  
       </div>  
  
           </div>  
  
           <div>  
      <label for="kreditinstitut">Kreditinstitut *</label>  
      <html:text property="kreditinstitut" styleId="kreditinstitut" styleClass="standard" style="z-index: -1;" maxlength="50" onkeyup="window.setTimeout('banknamensuche_ajax.loadit()', 500);" onblur="window.setTimeout('hideSuggest(new BankNameSuggest())',500)" />  
        <div class="suggest" id="search_suggest_kreditinstitut">  
       </div>  
           </div>  
    </fieldset>  

meine "div class="suggest" " sind die aufklappenden Vorschläge.
Im FF klappen diese wie gewünscht auf, im IE leider nicht. DOrt landen sie aufgrund des falschen Z-Index immer hinter allen Select und Input-Feldern. (Siehe Bildanlage ganz oben)

Nach einigen Vergleichen, u.a. mit Freenet (Abschluss eines DSL Vertrages mit Adresssuche) konnte ich sehen, dass dieses Suggest auch ihne IFrames zu lösen sein muss. Denn diese Adresssuche von Freenet funktioniert in meinem IE tadellos. Also warum meine nicht?

Ich habe es mit dem "display: none" versucht. Also nicht visibility: hidden

Mein Style:

.suggest  
{  
  z-index: 500;  
  display:none;  
  overflow: auto;  
  position: absolute;  
  clear: both;  
  
  
  
  
  height: expression( this.scrollHeight > 179 ? "180px" : "auto" ); /* sets max-height for IE */  
     max-height:180px !important; /* sets max-height value for all standards-compliant browsers */  
        width: 400px !important;  
  
  background-color: white;  
  background-color: #FFFFFF;  
  text-align: left;  
  border:1px solid #AABDD3 !important;  
  padding: 0;  
  
  margin-top: 20px;  
  *margin-top: 1px;  
  cursor:pointer;  
  
  
  
}

Aber auch dieser brachte keine Wirkung.

Hier vielleicht noch meine Aktivierung im Ajax-Response:

// Iteriere durch die Bankenliste  
  if(bankliste.length > 0){  
  
   var sb = new StringBuffer();  
   sb.append('<table id="suggest">');  
   for (var x=0; x<bankliste.length; x++) {  
  
          var blz = bankliste[x].blz;  
          var bankbezeichnung = bankliste[x].bezeichnung;  
          var plz = bankliste[x].plz;  
          var ort = bankliste[x].ort;  
  
          // Erstelle die Ausgabe, zun?chst BLZ, dann Bankname  
    sb.append('<tr onmouseover="javascript:suggestOver(this);" onmouseout="javascript:suggestOut(this);" ')  
     .append(' onclick="javascript:setBankData(\'').append(blz).append('\', \'').append(bankbezeichnung).append('\');" class="suggest_link">')  
     .append('<td>').append(blz).append('</td>')  
     .append('<td>').append(bankbezeichnung).append('</td>')  
     .append('<td>').append(plz).append('</td>')  
     .append('<td>').append(ort).append('</td>')  
     .append('</tr>');  
  
   }  
   sb.append('</table>');  
   blzsuggestObj.searchsuggest.innerHTML=sb.toString();  
   blzsuggestObj.searchsuggest.style.display = "block";  
   blzsuggestObj.searchsuggest.scrollTop = 0;  
   /*createIframe(blzsuggestObj.searchsuggest, blzsuggestObj.layer);*/  
  
        }

wobei blzsuggestObj vom Typ:

function BLZSuggest(){  
 this.searchsuggest = document.getElementById('search_suggest_blz');  
 this.valuefield = document.getElementById('blz');  
}
~~~ ist.  
  
  
  
  
Leider auch dies ohne Erfolg. Also stürzte ich mich nochmals auf das Thema IFrame!  
Hier mein Javascript:  
~~~javascript
function createIframe(suggestObj, layer){  
var testframe = document.createElement("iframe");  
testframe.id="suggest_iframe";  
testframe.src="javascript:void(0)";  
testframe.style.zIndex="-1";  
testframe.style.allowTransparency="true";  
testframe.offsetWidth = suggestObj.searchsuggest.offsetWidth;  
testframe.offsetHeight = suggestObj.searchsuggest.offsetHeight;  
  
layer.appendChild(testframe);  
  
  
}

wobei suggestObj mein aufklappendes DIV mit Inhalt ist. Layer wäre das vorgeschlagene, aufklappende "Menü". Also ein zusätzliches DIV einbinden?
Diese letzte Funktion würde ich dann nach meinem Request ausführen.

Meine ersten Tests zeigten mir nur auch dort einen Fehler!
Trotz zIndex -1 lag das IFrame auf einmal auf meinem Suggest!
Und das war auch nicht mein Ziel.
Noch irgendwelche Ideen?

[Auge]

Hallo

<fieldset class="vermd">
     <div>
      <label for="kontoinhaber">Kontoinhaber</label>
      <html:text property="kontoinhaber" styleId="kontoinhaber" styleClass="standard" maxlength="50"/>
           </div>
           <div>
      <label for="kontonummer">Kontonummer *</label>
      <html:text property="kontonummer" styleId="kontonummer" styleClass="standard" maxlength="10"/>
           </div>
           <div>
      <label for="blz">BLZ *</label>
      <html:text property="blz" styleId="blz" styleClass="standard" maxlength="8" onkeyup="window.setTimeout('blzsuche_ajax.loadit()',500);" onblur="window.setTimeout('',500)" />

<div class="suggest" id="search_suggest_blz">
       </div>

</div>

<div>
      <label for="kreditinstitut">Kreditinstitut *</label>
      <html:text property="kreditinstitut" styleId="kreditinstitut" styleClass="standard" style="z-index: -1;" maxlength="50" onkeyup="window.setTimeout('banknamensuche_ajax.loadit()', 500);" onblur="window.setTimeout('hideSuggest(new BankNameSuggest())',500)" />
        <div class="suggest" id="search_suggest_kreditinstitut">
       </div>
           </div>
    </fieldset>

  
Welche Sprache bzw. DTD benutzt du? HTML ist das jedenfalls nicht.  
  
Tschö, Auge  

-- 
Die deutschen Interessen werden am Liechtenstein verteidigt.  
  
[Veranstaltungsdatenbank Vdb 0.2](http://termindbase.auge8472.de/)

[chblond]

Hallo

<fieldset class="vermd">
     <div>
      <label for="kontoinhaber">Kontoinhaber</label>
      <html:text property="kontoinhaber" styleId="kontoinhaber" styleClass="standard" maxlength="50"/>
           </div>
           <div>
      <label for="kontonummer">Kontonummer *</label>
      <html:text property="kontonummer" styleId="kontonummer" styleClass="standard" maxlength="10"/>
           </div>
           <div>
      <label for="blz">BLZ *</label>
      <html:text property="blz" styleId="blz" styleClass="standard" maxlength="8" onkeyup="window.setTimeout('blzsuche_ajax.loadit()',500);" onblur="window.setTimeout('',500)" />

<div class="suggest" id="search_suggest_blz">
       </div>

</div>

<div>
      <label for="kreditinstitut">Kreditinstitut *</label>
      <html:text property="kreditinstitut" styleId="kreditinstitut" styleClass="standard" style="z-index: -1;" maxlength="50" onkeyup="window.setTimeout('banknamensuche_ajax.loadit()', 500);" onblur="window.setTimeout('hideSuggest(new BankNameSuggest())',500)" />
        <div class="suggest" id="search_suggest_kreditinstitut">
       </div>
           </div>
    </fieldset>

>   
> Welche Sprache bzw. DTD benutzt du? HTML ist das jedenfalls nicht.  
>   
> Tschö, Auge  
>   
  
  
  
  
Das ist Struts, wird vom Server dann in stink normalen HTML-Code umgewandelt. Also keine Angst!  
  
die `<html:text ....>`{:.language-html} sind dabei normale Eingabefelder

[Beat]

Das ist Struts, wird vom Server dann in stink normalen HTML-Code umgewandelt. Also keine Angst!

die <html:text ....> sind dabei normale Eingabefelder

Bei einem <fieldset> ist ein <legend> als nächstes Element in HTML 4.01 Pflicht.
Ich vermute dass das nicht einfach so hingezaubert wird.

Ich hoffe nur, es wird auch HTML und nicht etwa XHTML ausgegeben.

mfg Beat

[Malcolm Beck´s]

hi,

Im FF klappen diese wie gewünscht auf, im IE leider nicht. DOrt landen sie aufgrund des falschen Z-Index immer hinter allen Select und Input-Feldern. (Siehe Bildanlage ganz oben)

Nein, eben nicht. Das ganze hat mit dem z-index, so wie wir es kennen, nichts mehr zutun, es geht hier um den IE, hier musst du umdenken[1].

Nach einigen Vergleichen, u.a. mit Freenet (Abschluss eines DSL Vertrages mit Adresssuche) konnte ich sehen, dass dieses Suggest auch ihne IFrames zu lösen sein muss.

Ja, Gernots Beispiel löst dein Problem ohne Frame.

Ich habe es mit dem "display: none" versucht. Also nicht visibility: hidden

Was gefällt dir an visibility: hidden nicht? Hast du es denn mal mit visibility: hidden; probiert?

mfg
[1] Im Falle vom IE muss die erste Überlegung sein, wie man ihn überlistet, aber Vorsicht, die Jungs von Microsoft sind nicht ohne und haben in Punkto Fehlerintegration keinen Punkt außer acht gelassen.