Firefox 2. Säule wird mit einem Zeilenumbruch

-1

Ich habe 2 Dropdown-Listen, in das man auf Seite je die Auswahl eines Dropdown angezeigt:Firefox 2. Säule wird mit einem Zeilenumbruch

In firefox, erhalte ich die Form: select-Tag in der zweiten Zeile für beide die Dropdownlisten. In Chrome und IE funktioniert es perfekt wie erwartet.

var flag = 1; 
 

 
function showHide() { 
 

 
    if (flag == 1) { 
 
    document.getElementById('dbTypeDropdown1').style.display = "none"; 
 
    document.getElementById('dbTypeDropdown2').style.display = "block"; 
 
    document.getElementById('dbTypelable1').style.display = "none"; 
 
    document.getElementById('dbTypelable2').style.display = "block"; 
 
    flag = 0; 
 
    } else { 
 
    document.getElementById('dbTypeDropdown1').style.display = "block"; 
 
    document.getElementById('dbTypeDropdown2').style.display = "none"; 
 
    document.getElementById('dbTypelable1').style.display = "block"; 
 
    document.getElementById('dbTypelable2').style.display = "none"; 
 
    flag = 1; 
 
    } 
 
} 
 

 
function loadHide() { 
 
    document.getElementById('dbTypeDropdown1').style.display = "block"; 
 
    document.getElementById('dbTypeDropdown2').style.display = "none"; 
 
    document.getElementById('dbTypelable1').style.display = "block"; 
 
    document.getElementById('dbTypelable2').style.display = "none"; 
 
}

<body onLoad=loadHide()> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <label path="osType" style="text-align: left;" id="osTypelable"><b>Product Type</b>&nbsp;&nbsp;</label> 
 
     </td> 
 
     <td> 
 
     <select path="osType" style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()"> 
 
      <option value="windows">Windows</option> 
 
      <option value="linux">Linux</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 

 
    <tr></tr> 
 
    <tr></tr> 
 

 
    <tr> 
 
     <td id="dbTypelable1"> 
 
     <label path="dbType1" style="text-align: left;"><b>Database Type</b> 
 
     </label> 
 
     </td> 
 
     <td id="dbTypeDropdown1"> 
 
     <select path="dbType1" style="width:205px; height:25px"> 
 
      <option value="embedded">Embedded</option> 
 
      <option value="mssql2008">MS SQL 2008</option> 
 
      <option value="mssql2012">MS SQL 2012</option> 
 
      <option value="mssql2014">MS SQL 2014</option> 
 
      <option value="oracle11">Oracle 11g</option> 
 
      <option value="oracle12">Oracle 12c</option> 
 
     </select> 
 
     </td> 
 
     <td id="dbTypelable2"> 
 
     <label path="dbType2" style="text-align: left;"><b>Database Type</b> 
 
     </label> 
 
     </td> 
 
     <td id="dbTypeDropdown2"> 
 
     <select path="dbType2" style="width:205px; height:25px;"> 
 

 
      <option value="embedded">Embedded</option> 
 
      <option value="oracle11">Oracle 11g</option> 
 
      <option value="oracle12">Oracle 12c</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
</body>

Quelle

2016-04-12 Joshi

Teilen ein funktionierendes Beispiel. Dies bedeutet, dass der ** gerenderte ** HTML-Code (nicht Ihr Vorlagencode) und das CSS angehängt sind. Sie können Stacksnippets oder externe Dienste wie jsfiddle.net verwenden. Bearbeiten Sie diese Frage mit einem Beispiel, das das Problem anzeigt, oder dies sollte als ** offtopic ** geschlossen werden. –

Lesen Sie diese für weitere Informationen http://StackOverflow.com/Help/how-to-ask –

Dies ist kein roher HTML-JavaScript-CSS-Code – cor

Chrome Fehlerkorrektur Festsetzung das Problem für Sie, aber das Problem bleibt. Das Problem besteht nicht nur in Firefox.

Sie haben ein paar Probleme:

Sie haben mehr <tr> tags - Sie sagen, Sie dies in einer einzigen Reihe haben wollen?
Sie verwenden colspan nicht, wenn Sie mehrere <tr> Tags benötigen.
Sie verwenden display: block; - Sie können display: block nicht auf Tabellenelemente zum Umschalten verwenden, da dies die Funktionsweise der Tabellenzellen beeinträchtigt. Sie können display: table-cell und display: none, aber nicht display: block verwenden.

Hier ist Ihre modifizierte HTML: (JSFiddle: https://jsfiddle.net/1ntn0yh5/)

<table> 
    <tr> 
     <td> 
     <label path="osType" style="text-align: left;" id="osTypelable"><b>Product Type</b>&nbsp;&nbsp;</label> 
     </td> 
     <td> 
     <select path="osType" style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()"> 
      <option value="windows">Windows</option> 
      <option value="linux">Linux</option> 
     </select> 
     </td> 
     <td id="dbTypelable1"> 
     <label path="dbType1" style="text-align: left;"><b>Database Type</b> 
     </label> 
     </td> 
     <td id="dbTypeDropdown1"> 
     <select path="dbType1" style="width:205px; height:25px"> 
      <option value="embedded">Embedded</option> 
      <option value="mssql2008">MS SQL 2008</option> 
      <option value="mssql2012">MS SQL 2012</option> 
      <option value="mssql2014">MS SQL 2014</option> 
      <option value="oracle11">Oracle 11g</option> 
      <option value="oracle12">Oracle 12c</option> 
     </select> 
     </td> 
     <td id="dbTypelable2"> 
     <label path="dbType2" style="text-align: left;"><b>Database Type</b> 
     </label> 
     </td> 
     <td id="dbTypeDropdown2"> 
     <select path="dbType2" style="width:205px; height:25px;"> 
      <option value="embedded">Embedded</option> 
      <option value="oracle11">Oracle 11g</option> 
      <option value="oracle12">Oracle 12c</option> 
     </select> 
     </td> 
    </tr> 
    </table>

Quelle

2016-04-12 11:58:40 Pegues

Anzeige: Tisch-Zelle funktioniert – Joshi

Ich bin froh, dass es für dich gearbeitet hat. Und bitte sorge auch dafür, dass du deine Tabelle HTML ein wenig aufräumst. Ich habe ein JSFiddle für Sie bereitgestellt, falls Sie Ihre Arbeit testen möchten. Fröhliche Programmierung! – Pegues

Firefox 2. Säule wird mit einem Zeilenumbruch

Antwort

Verwandte Themen