Ankündigung

Einklappen
Keine Ankündigung bisher.

Problem mit width 100% und Input bei Chrome

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    Problem mit width 100% und Input bei Chrome

    Hallo,

    ich habe ein Problem, an dem ich mich bei Google schon fast Tod gesucht habe.


    HTML-Code:
                echo '<tr>';
                echo '<td style="width: 155px; background-color: #FF0000;">1</td>';
                echo '<td style="width: 30px; background-color: #00FF00;">2</td>';
                echo '<td style="width: 700px; background-color: #0000FF;">3</td>';
            echo '</tr>';

            echo '<tr>';
                echo '<td></td>';
                echo '<td><input style="width: 100%; padding: 0px; margin: 0px;" type="text" value="2"></td>';
                echo '<td></td>';
            echo '</tr>';

    Wenn kein Inputfeld vorhanden ist, entsprechen die Breiten der TD's den angegebenen Werten.
    Aber sobald ich ein Inputfeld einfüge, wird das entsprechende TD länger als es soll.

    Im IE und FF funktioniert das wie gewünscht. Im Chrome aber nicht.

    Weiß jemand warum das so ist?
    Danke.

    Man friert nur, wenn man glaubt, einem sei kalt
    Stichworte: -
  • #2
    Gib auch immer die Versionsnummer an mit der du das getestet hast. Ein Beispiel oder Fiddel wäre auch schön, damit man sich das nicht zusammenbasteln muss. Dann hast du auch mehr Chancen dass sich das jemand mal näher betrachtet.

    Kommentar

    • #3
      PHP-Code ist bei einem Darstellungsproblem irrelevant. Poste bitte vollständigen HTML-Code, bei dem das Problem nachvollziehbar auftritt.

      Kommentar

      • #4
        Hallo,

        oh, natürlich.

        Chrome: Version 63.0.3239.108 (Offizieller Build) (64-Bit)

        Hier nochmal ein Testdokument in HTML:
        HTML-Code:
        <!DOCTYPE html>
<html lang="de">
    <head>
        <title>Test</title>
        <style>
            table {
                border-collapse: collapse;
            }
            td {
                margin: 0px;
                padding: 0px;
            }
            input {
                width: 100%;
                padding: 0px;
                margin: 0px;
                border-style: solid;
                border-color: #DBE5F1;
                border-width: 0px 1px 1px 0px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <table>

            <tr>
                <td style="width: 155px; background-color: #FFF000;">1</td>
                <td style="width: 30px; background-color: #00FFF0;">2</td>
                <td style="width: 700px; background-color: #FF0000;">3</td>
            </tr>

            <tr>
                <td><input type="text" name="test" value="1"></td>
                <td><input type="text" name="test" value="2"></td>
                <td><input type="text" name="test" value="3"></td>
            </tr>

        </table>
    </body>
</html>
        Wie gesagt, in Chrome werden durch die Inputfelder die Pixelangaben ignoriert und somit werden die Spalten breiter als gewünscht.

        Danke für eure Hilfe.
        Man friert nur, wenn man glaubt, einem sei kalt

        Kommentar

        • #5
          Das Element td, wo sich das Input Element drin befindet hat keine Grösse. Width bezieht sich immer auf das Elternelement.
          Gib allen tds im CSS die gleiche Grösse und nimm die Inlinestyles raus, diese sollte man so gut wie gar nicht verwenden.

          Daneben sollte man Tabellen auch wirklich nur für tabellarische Daten verwenden. Eingabefelder zähle ich erst mal nicht dazu.
          Zudem solltest du auch das label Element einsetzen, wenn du Eingabefelder hast..

          Insgesamt ist dein Ansatz ein Formular darzustellen nicht gut umgesetzt.

          Kommentar

          • #6
            Hallo,

            danke für deine Antwort.

            Normalerweise verwende ich auch keine Inlinestyles, sondern binde css im Head-Bereich ein.
            Das war jetzt nur für den Test, damit ich die Abstände besser erkennen kann.

            Eigentlich ist das ganze ein Gitternetz, also wie Excel und damit ja doch eine Tabelle?
            Damit alles in jedem Browser an der selben Stelle ist und die richtige Größe hat, nutze ich dafür die TD-Tags.

            Es kommt also auch vor, das manche Zellen verbunden sind. <td colspan ... und deswegen <input width 100% und deswegen wollte ich im Kopfbereich die Größenangaben angeben, der Rest sollte sich dann daran ausrichten.
            Was in allen Browsern auch funktioniert, nur nicht im Chrome.

            Dann muss ich das wohl nochmal anders angehen.
            Man friert nur, wenn man glaubt, einem sei kalt

            Kommentar

            Vorherige Weiter
            Lädt...
            X