Darstellungs Probleme in Chrome

julian1 · 11. Juli 2019

Kann mir jemand erklären warum sich das aussehen in meinem Fall so stark in Chrome von Firefox unterscheidet und was ich dagegen machen kann?

Habe mal ein fiddle erstellt, den unterschied sieht man aber nur so wirklich wenn man das Result Feld groß genug zieht.

https://jsfiddle.net/aofes32L/1/

CSS

* {
    font-family: "Montserrat", serif;
}

body {
    margin: 0;
}

main {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.content-wrapper {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

fieldset {
    border: none;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding-bottom: 0;
    padding-top: 0;
}

input[type=text], select {
    padding: 12px 20px;
    margin: 0;
    display: inline-block;
    border: 1px solid #349ebd;
    border-radius: 4px;
    box-sizing: border-box;
}

textarea {
    width: 100%;
    border: 1px solid #349ebd;
    resize: vertical;
    padding-left: 4px;
    padding-top: 4px;
    margin-bottom: 7px;
}

.input_medium {
    margin-bottom: 7px !important;
}

@media all and (min-width: calc(420px / 80 * 100 / 90 * 100 + 1px)) {
    fieldset {
        justify-content: space-between;
    }

    .input_medium {
        width: 48%;
        min-width: 200px;
    }

    .input_small {
        width: 23%;
        min-width: 100px;
    }
}

@media all and (max-width: calc(420px / 80 * 100 / 90 * 100)) {
    fieldset {
        justify-content: left;
    }

    .input_medium {
        width: 100%;
    }

    .input_small {
        width: 33%;
        margin-right: 10px;
    }
}

Alles anzeigen

HTML:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <link rel="stylesheet" href="main2.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<main>
    <div class="content-wrapper">
        <div class="co_event_form">
            <h4>Veranstaltung hinzufügen</h4>
            <form>
                <fieldset>
                        <input class="input_medium" placeholder="Name" type="text" name="event_name">
                        <input class="input_medium" type="text" placeholder="URL" class="large" name="event_link">
                </fieldset>
                <fieldset>
                        <textarea placeholder="Beschreibung" name="event_description"></textarea>
                </fieldset>
                <fieldset class="left">
                        <input class="input_medium" placeholder="31-12-2019 15:23" type="text" name="event_date">
                        <select class="input_small" name="event_location">
                            <option value="Berlin">Berlin</option>
                            <option value="Charlottenburg">Charlottenburg</option>
                            <option value="Friedrichshain">Friedrichshain</option>
                            <option value="Köpenick">Köpenick</option>
                            <option value="Lichtenberg">Lichtenberg</option>
                            <option value="Marzahn">Marzahn</option>
                            <option value="Mitte">Mitte</option>
                            <option value="Neukölln">Neukölln</option>
                            <option value="Pankow">Pankow</option>
                            <option value="Reinickendorf">Reinickendorf</option>
                            <option value="Spandau">Spandau</option>
                            <option value="Steglitz">Steglitz</option>
                            <option value="Tempelhof">Tempelhof</option>
                            <option value="Treptow">Treptow</option>
                            <option value="Wilmersdorf">Wilmersdorf</option>
                            <option value="Zehlendorf">Zehlendorf</option>
                        </select>
                        <select class="input_small" name="event_location">
                            <option value="1"> < 1€</option>
                            <option value="2"> < 2€</option>
                            <option value="3"> < 3€</option>
                            <option value="4"> < 4€</option>
                            <option value="5"> < 5€</option>
                        </select>
                </fieldset>
            </form>
        </div>
    </div>
</main>
</body>
</html>

Alles anzeigen

julian1 · 11. Juli 2019

Achso vielleicht noch wichtig benutze Chrome in der Version Version 72.0.3626.109 (Official Build) (64-bit) und Firefox 66.0.2 (64-bit).

basti1012 · 11. Juli 2019

geht dir es darum das dein textare Feld die ganze breite nimmt und die anderen Felder nicht ?

Bevor ich weiter rede solltest du deine Fehler ausbauen ?

Ein Element hat nur einmal das attribute class , dein textare hat 2.

Deine <option> haben ein > zu viel. Die müssen da auch raus.

Dann sehen wir mal weiter

EDIT:

ok in firefox sieht es ganz anders aus. ie hättest du es de gerne ?, wie im firefox ?

julian1 · 11. Juli 2019

Da hast du natürlich recht, ja wie im Firefox soll es aussehen.

In Chrome scheint sich da irgendwie rechts noch margin nach rechts rein zu schummeln.

Wenn ich display flexentferne werden in Chrome die Elemente hintereinander angeordnet, aber sie sind dann halt nicht so positioniert wie sie es sein sollen.

Hier nochmal das aktualisierte HTML:

https://jsfiddle.net/njdf6m8x/1/

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <link rel="stylesheet" href="main2.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<main>
    <div class="content-wrapper">
        <div class="co_event_form">
            <h4>Veranstaltung hinzufügen</h4>
            <form>
                <fieldset>
                        <input class="input_medium" placeholder="Name" type="text" name="event_name">
                        <input class="input_medium" type="text" placeholder="URL" name="event_link">
                </fieldset>
                <fieldset>
                        <textarea placeholder="Beschreibung" name="event_description"></textarea>
                </fieldset>
                <fieldset class="left">
                        <input class="input_medium" placeholder="31-12-2019 15:23" type="text" name="event_date">
                        <select class="input_small" name="event_location">
                            <option value="Berlin">Berlin</option>
                            <option value="Charlottenburg">Charlottenburg</option>
                            <option value="Friedrichshain">Friedrichshain</option>
                            <option value="Köpenick">Köpenick</option>
                            <option value="Lichtenberg">Lichtenberg</option>
                            <option value="Marzahn">Marzahn</option>
                            <option value="Mitte">Mitte</option>
                            <option value="Neukölln">Neukölln</option>
                            <option value="Pankow">Pankow</option>
                            <option value="Reinickendorf">Reinickendorf</option>
                            <option value="Spandau">Spandau</option>
                            <option value="Steglitz">Steglitz</option>
                            <option value="Tempelhof">Tempelhof</option>
                            <option value="Treptow">Treptow</option>
                            <option value="Wilmersdorf">Wilmersdorf</option>
                            <option value="Zehlendorf">Zehlendorf</option>
                        </select>
                        <select class="input_small" name="event_location">
                            <option value="1"> &lt; 1€</option>
                            <option value="2"> &lt; 2€</option>
                            <option value="3"> &lt; 3€</option>
                            <option value="4"> &lt; 4€</option>
                            <option value="5"> &lt; 5€</option>
                        </select>
                </fieldset>
            </form>
        </div>
    </div>
</main>
</body>
</html>

Alles anzeigen

basti1012 · 11. Juli 2019

habe mich gerade auch gewundet warum sich die fieldset Elemente nicht richtig mit flexbox anpassen tun. ( wußte ich auch noch nicht )

Ganz einfach das geht nicht .

https://stackoverflow.com/ques…eldset-be-flex-containers

Wenn du versuchst die fieldset Elemente mit Flexbox anpassen willst dann solltest du tricksen oder einfach ein anderes Element benutzen , oder halt auf flexbox verzichten.

julian1 · 11. Juli 2019

Oh krass tatsächlich wenn ich das selbe mit einem span mache funktioniert es in Chrom und Firefox.

Das muss man auch erstmal wissen, cool danke!

Darstellungs Probleme in Chrome

Jetzt mitmachen!

Teilen

Tags