Jonathan Randall asked 3 years ago
Oi Oi. Todo Bien?
I am having an issue trying to upload html with style tag.
When I add another attribute to the style sheet, it doesn’t upload the PROGMEM variable properly. It seems to miss the middle part of the string from where I’ve added the new attribute to the %SLIDERVALUE% and then a bit after that.
e.g. Original:
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 2.3rem;}
p {font-size: 1.9rem;}
body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
.slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
outline: none; -webkit-transition: .2s; transition: opacity .2s;}
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
.slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; }
</style></head>
<body>
<h2>ESP Web Server</h2>
<p><span id=”textSliderValue”>%SLIDERVALUE%</span></p>
<p><input type=”range” onchange=”updateSliderPWM(this)” id=”pwmSlider” min=”0″ max=”255″ value=”%SLIDERVALUE%” step=”1″ class=”slider”></p>
New:
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 2.3rem;}
p {font-size: 1.9rem;}
body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
.slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
outline: none; -webkit-transition: .2s; transition: opacity .2s;}
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
.slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; }
.column{flex:50%;}
.button {
background-color: #2f4468;
border: none;
color: white;
padding: 20px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 6px 3px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
</head>
<body>
<h2>ESP Web Server</h2>
<p><span id=”textSliderValue”>%SLIDERVALUE%</span></p>
<p><input type=”range” onchange=”updateSliderPWM(this)” id=”pwmSlider” min=”0″ max=”255″ value=”%SLIDERVALUE%” step=”1″ class=”slider”></p>
Uploaded page source:
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 2.3rem;}
p {font-size: 1.9rem;}
body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
.column {flex:50SLIDERVALUESLIDERVALUE ; height: auto”>
Jonathan Randall answered 3 years ago
Ok. I realised my mistake. It’s because I use a “%” sign in the style sheet. So if I want to include a %, I have to do two in a row, like %% (worked so far).
.column {
float: left;
width: 33.33%%;
padding: 5px;
}
Sara Santos Staff answered 3 years ago
Hi.
Great!
I’m glad you found a workaround.
I’ll mark this issue as resolved. If you need further help, you just need to open a new question in our forum.
Regards,
Sara