Flask slider

toper · Sonntag 6. März 2022, 13:43

Hallo zusammen,

ich versuche gerade, mit Python und Flask eine Website zu erstellen.

In meiner HTML steht:

<form action="/regler" method="POST">
		<input type="range" min="0" max="255" step="1.0" value="0" name="schieber" class="slider">
		<input type="submit" value="submit" />
 </form>

In der CSS:

Code: Alles auswählen

input[type="range"]::-moz-range-progress {
  background-color: #FF0000;
}
input[type="range"]::-moz-range-track {
  background-color: #000000;
}
input[type="range"]{
    background-color: #999999;
}

Wenn ich die HTML manuell starte, sieht der Regler so aus, wie ich es in der CSS festgelegt habe.
Wenn ich aber das Python-Script starte, sieht er wieder so aus wie ohne CSS.

Mein Python Script:

Code: Alles auswählen

@app.route('/home')
def home():
    return render_template("index.html")

@app.route('/regler', methods=["POST"])
def regler():
    schieber = request.form.get('schieber')
    print(schieber)
    return redirect(url_for('home'))
    
app.run(debug=False, host="0.0.0.0", port=80)

Weiß jemand, wie ich das lösen kann?

__deets__ · Sonntag 6. März 2022, 13:58

Das style sheet muss vom server ausgeliefert werden. Ich sehe keinen static file handler. Das ist ein Standard Problem, du musst einfach schauen , wie man das in flask macht.

toper · Sonntag 6. März 2022, 14:01

Ich habe jetzt noch oben folgendes eingefügt:

app = Flask(__name__, template_folder='templates', static_folder='static')

und unten:

app.run(debug=False, host="0.0.0.0", port=80)

Im templates Ordner ist die HTML und im static Ordner die CSS.
Es ist aber immer noch dasselbe Problem

Sirius3 · Sonntag 6. März 2022, 14:09

Wie sieht Dein Code jetzt aus? Wie sieht das komplette index.html aus? Passen die Pfade?
Was gibt Flask auf der Konsole aus?

__deets__ · Sonntag 6. März 2022, 14:10

Liegt aber trotzdem daran. Schau es dir im Browser debugger an, du wirst sehen, die wird nicht geladen. Und du musst auch den Pfad ändern, ist dir klar?

toper · Sonntag 6. März 2022, 14:11

Welchen Pfad?

__deets__ · Sonntag 6. März 2022, 14:14

Den des CSS. Darueber reden wir doch. Welcher sonst?

toper · Sonntag 6. März 2022, 14:18

Also mein Python Code sieht so aus:

Code: Alles auswählen

from flask import Flask, render_template, url_for, redirect, request

app = Flask(__name__, template_folder='templates', static_folder='static')

@app.route('/home')
def home():
    return render_template("index.html")

@app.route('/regler', methods=["POST"])
def regler():
    schieber = request.form.get('schieber')
    print(schieber)
    return redirect(url_for('home'))


def website():
    app.run(debug=False, host="0.0.0.0", port=80)
    
    

if __name__ == '__main__':
    website()

Meine HTML:

Code: Alles auswählen

<html> 
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<link rel="stylesheet" href="../static/index.css"> 




	</head>
	
	

</html>

<body>
	<div class="headder">Website</div>

	<form action="/blocken" method="POST">
		<button class="button">test</button>
	</form>

	<form action="/regler" method="POST">
		<input type="range" min="0" max="255" step="1.0" value="0" name="schieber" class="slider">
		<input type="submit" value="submit" />
	 </form>


</body>

Meine CSS:

Code: Alles auswählen

body {
  margin: 1%;
  background-color: #000000;
}

.headder {
  position: relative;
  background-color: #555555;
  color: red;
  
  font-size: 400%;
  text-align: center;
  color: red;
  
  width: 100%;
}

.button{
  position: relative;
  background-color: #999999;
  color: red;
  
  margin-top: 10vh;
  width: 100%;
  
  font-size: 80px;
  text-align: center;

}


input[type="range"]::-moz-range-progress {
  background-color: #FF0000;
}
input[type="range"]::-moz-range-track {
  background-color: #000000;
}
input[type="range"]{
    background-color: #999999;
}

__deets__ · Sonntag 6. März 2022, 14:28

Das HTML ist falsch, das HTML-Tag muss um das GESAMTE Dokument herum. Und der Pfad ../static ist falsch, hier steht, wie man Flask das berechnen laesst: https://flask.palletsprojects.com/en/2. ... al/static/

toper · Sonntag 6. März 2022, 14:33

Er findet die CSS bereits. Die Buttons und der Headder werden korrekt formatiert. Nur der Slider ist falsch.

__deets__ · Sonntag 6. März 2022, 15:14

Dann ist das CSS falsch, bzw. passt nicht zum HTML. Die Gruende, warum das in Flask nicht geht, aber lokal, haben wir dir genannt. Wenn das jetzt geladen wird, liegt der Rest dann im HTML und CSS verborgen, und das musst du dann entwanzen.

toper · Sonntag 6. März 2022, 15:41

Und genau das ist das Problem. Ich finde den Fehler nicht.
Deshalb ja die Frage.

noisefloor · Sonntag 6. März 2022, 16:05

Hallo,

was bei sowas immer hilft: Entwicklertools im Browser aufrufen und dann den Debugger, CSS Inspektor und was Chrome bzw. Firefox sonst so standardmäßig an Bord haben nutzen. Das Problem liegt ja ziemlich sicher im HTML oder CSS, also musst du das Debuggen. Das liegt nicht an Flask wenn du sicher bist, dass Flask alles ausliefert, was auszuliefern ist.

Gruß, noisefloor