Roger Wilson asked 18 hours ago
Hi RNT team. I am using code adapted from your “Build an All-in-One ESP32 Weather Station Shield” to just display 3 parameters from my different sensors (SHT45 and BMP390)and it is working nicely. One change I made was to store index.html in LittleFS in flash memory instead of on an SD card but when I just open index.html directly in my browser all of the items in the table are centre-aligned but when I run the sketch and open the WiFiServer URL in my browser, all of the items in the readings rows are left-justified while the headings row remains centre-aligned. What is the source of that difference? I’m assuming it must be altered by the sketch somehow since the index.html file is the same. I’d like to fix it so that the heading row and data rows are the same. Can you help me? Images illustrating this issue are here: https://imgur.com/a/512Qgxk
Sara Santos Staff answered 10 hours ago
Hi.
When you access the web page on your browser, open the console: CTRL+SHIFT + J
Click on the Elements tab.
Now, you can see the HTML file the browser is loading and compare it with the original one to see if any changes were made during the process.
I hope this helps.
Let me know if you need further help.
Regards,
Sara
Roger Wilson answered 3 hours ago
Thanks for that tip Sara. I found through the elements tab that in the sketch URL version <table> section that the test-alignment was not ‘inherited from body’ ie it is crossed out but I don’t know why this is handled differently from when just opening the html file directly. I added a ‘test-align: centre’ statement into the table section of the <style> block immediately below the body section which also has that statement and this has corrected the problem. All of the labels and readings in the table are now centre-aligned. It would be good to know why it is not inherited.I have attached a couple of images showing this. https://imgur.com/a/5ZP0oA8