[ERLEDIGT] textarea-Element Größe an Auflösung anpassen

[aposch]

Hallo allerseits,
das ist mein erster Post und ich freue mich ein Teil von euch zu sein.

Ich brauche eure Unterstützung:

Habe ein textarea-Element. Auf dem PC sieht es gut aus, auf dem Handy ist es zu groß. Das Element sollte irgendwie an die Auflösung angepasst werden.
Wie kann ich das erreichen?

<textarea class="scrollabletextbox" name="Datenschutzerklärung" rows="6" cols="105" readonly>TEXT DATENSCHUTZERKLÄRUNG
</textarea>

Auf folgender Seite habe ich es eingebettet, damit Ihr es euch mal anschauen könnt:
KLICK

Auf dem PC sieht es gut aus, auf dem Handy nicht. Wenn Ihr es euch auf dem Handy anschaut, seht Ihr, was ich meine.

Freue mich auf eure Antworten.

LG Aposch

 

[Aaron3219]

Easy:

max-width: calc(100% - 30px);

Es würde auch:

max-width: 100%;

gehen, aber ein kleiner Rand links und rechts sieht meiner Meinung nach besser aus.

 

[aposch]

Easy:

max-width: calc(100% - 30px);

Es würde auch:

max-width: 100%;

gehen, aber ein kleiner Rand links und rechts sieht meiner Meinung nach besser aus.

Ich danke dir für deine Antwort. Ich habe das nun versucht einzubauen, jedoch ohne Erfolg. Ich kenne mich nicht so gut aus mit CSS.
Habe das nun wie folgt eingegeben, vielleicht kannst Du nochmal drüber schauen, wo der Fehler ist?

<textarea class="scrollabletextbox" name="Datenschutzerklärung" rows="6" cols="105" readonly max-width: calc(100% - 30px);>
    TEXT DATENSCHUTZERKLÄRUNG
</textarea>

 

[Aaron3219]

Ouch

Ja dann solltest du dir CSS unbedingt mal genauer anschauen.

class="scrollabletextbox"

Du benutzt hier ja bereits CSS-Klassen. Hast du das copy-pasted oder hast du die selber gesetzt? Denn falls Fall 2 richtig sein sollte, würde ich mich über dein Problem extrem wundern.

Also:
Richtig wäre es mit:

style="max-width: calc(100% - 30px);"

Aber noch richtiger wäre eigentlich:

<style>
    .scrollabletextbox {
        max-width: calc(100% - 30px);
    }
</style>

Aber noch viel mehr richtig wäre eigentlich, ein externes CSS-Stylesheet zu erstellen und dort den Code reinzupacken.

Du solltest dich unbedingt damit auseinandersetzen!!!

Für dein Problem würde prinzipiell aber Lösung 1 reichen (style="max-width: calc(100% - 30px);").

 

[aposch]

Ich würde das gerne so richtig richtig machen :)
Ein CSS Stylesheet habe ich bereits aber dieses habe ich nicht angelegt. Bisher hatte ich Unterstützung von einem Freund erhalten, aber diese Möglichkeit habe ich nicht mehr.. Deswegen die bereits vorhandenen CSS Codes.

Ich muss also nun 2 Sachen machen. Einen Eintrag in den CSS Stylesheet und einen entsprechenden Eintrag in meine index.html

Welchen Eintrag muss ich nun in meinen CSS Stylesheet packen und welchen in meine index.html?

Folgendermaßen würde ich es machen:

IN STYLESHEET

.textarea {
max-width: calc(100% - 30px);
}

in HTML index.html konnte ich es mir jetzt auf Anhieb nicht erklären..

 

[Aaron3219]

Du hast dein CSS-Sheet ja bereits in deine HTML-Seite integriert.
In dein CSS-Sheet schreibst du jetzt:

.scrollabletextbox {
    max-width: calc(100% - 30px);
}

Der Punkt steht in dem Fall für eine Klasse, nämlich scrollabletextbox, welche du ja mit dem HTML-Attribut class=scrollabletextbox" declarierst.
Und gerade weil du bereits eine Klasse gesetzt hast, brauchst du in deinem HTML-Code bei diesem Objekt nichts mehr verändern.
Lediglich dein CSS-Sheet muss modifiziert werden.

https://www.w3schools.com/Css/
Schau dir das mal an. Die Bibel für Anfänger und zum Nachschlagen für Fortgeschrittene, man kann sich ja schließlich nicht alles merken ;)

Edit:

.textarea {
max-width: calc(100% - 30px);
}

in HTML index.html konnte ich mir jetzt auf anhieb das nicht erklären..

Das würde ich so nicht machen.
Wie gesagt, der Punkt davor, steht für einen Classname. Also müsste deine Textarea auch die Klasse textarea haben.

Was du meinst ist:

textarea {
max-width: calc(100% - 30px);
}

Ohne den Punkt. Das würde ich dir ebenfalls nicht empfehlen, da du OHNE den Punkt sagst, dass SÄMTLICHE textareas diese CSS-Attribute haben sollen.
Das ist alles umständlich und nur empfehlenswert, wenn du einheitliche Schriftgrößen für Paragraphs z.B. festlegen willst.[/QUOTE]

 

[aposch]

Okay, nun habe ich es mit dem Punkt eingefügt. Folgendermaßen einfach noch unten zu den anderen Codes hinzugefügt:

.scrollabletextbox {
    max-width: calc(100% - 30px);
     height: 600px;
    font-family:"Helvetica Neue"
}

So viel ich jetzt verstanden habe, nimmt das Element seine Styles über die CLASS Verknüpfung "class="scrollabletextbox". Da ich nun die Höhe und Breite über die CSS definiert habe, entferne ich die Angaben aus der HTML.

Leider sieht das Ergebnis genau so aus, wie davor - sogar noch schlimmer - das Feld ist sogar noch kleiner geworden. Das Feld passt sich am Handy immer noch nicht der Breite des Displays an. Habe ich etwas vergessen?

 

[Aaron3219]

Naja, max-width definiert ja nur eine Maximal Größe.
In diesem Falle also 100% des Bildschirms - 30px am Rand.
Du hast ja noch gar nicht gesagt, wie groß die Box sein soll.

Schreib doch z.B. noch width: 800px;

Also ist die textarea 800 px groß.
Bei Handys geht das aber über den Bildschirmrand hinaus, deswegen greift hier das max-width und sagt, es soll nicht größer als 100% - 30px sein.

 

[aposch]

Jetzt habe ich verstanden, wie es funktioniert. Das bedeutet, man gibt ihm eine Feste Größe vor aber unterbindet dann mit dem anderen Eintrag, dass es über den Bildschirm hinaus geht. *raffiniert*

Aber trotzdem tut sich da nichts. Die Box ist sehr klein und scheint nicht die 800 px Breite zu haben.

So sieht es gerade aus:

.scrollabletextbox {
    max-width: calc(100% - 30px);
     height: 600px;
    width: 800px;
    font-family:"Helvetica Neue"
}

Auch die FONT Family übernimmt er nicht..

LG

 

[Aaron3219]

Na dann lösch mal deinen Cache ;)
Bei mir funktioniert es nämlich.

 

[aposch]

Tatsächlich! Super, danke dir!