Strange pieces of CSS missing

[kctowers]

I managed to get an application working using ESPAsyncWebServer in an ESP-IDF project. Everything seems to work fine with the exception of some strange formatting of the web page that I can't figure out. I also want to point out that I'm new to HTML/CSS though I do have 40 years of embedded development experience.

This esp-idf project converts the index.html file into a SPIFFS partition and flashes it to my ESP32-S3 device along with the application.
I've confirmed that the SPIFFS file system contains the correct index.html file without any corruption. I'm using V3.90. of ESPAsyncWebServer and V3.4.9 of AsyncTCP.

My index.html file that I created has this section for the CSS: ("Note: this is not the whole index.html file to keep things concise)

<meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Arial, sans-serif; text-align: left; /* General body alignment for content */ } .container { max-width: 360px; margin: 0 auto; /* Center the container on the page */ padding: 20px; } form label { display: block; /* Make labels take their own line */ text-align: left; margin-top: 10px; font-weight: bold; } input[type="text"] { width: 100%; /* Full width within the container */ padding: 8px; margin: 5px 0 15px 0; box-sizing: border-box; /* Include padding and border in the element's total width and height */ border: 1px solid #ccc; /* Add lines around the edit boxes */ float: left; /* Align input field to the left */ } input[type="submit"] { background-color: #007bff; /* Blue submit button */ color: white; padding: 10px 15px; border: none; cursor: pointer; margin-top: 80px; display: block; /* Make it a block element to ensure it's on its own line */ width: 100%; /* Make the button full width of the container */ } </style>

When I attach to the WiFi AP on my device and point my browser to the IP address, I do see most of web page though some formatting is missing. All edit fields are present and work OK. I'm using the developer tools in Chrome to view the HTML source in the browser. This is what the browser has:

<meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Arial, sans-serif; text-align: left; /* General body alignment for content */ } .container { max-width: 360px; margin: 0 auto; /* Center the container on the page */ padding: 20px; } form label { display: block; /* Make labels take their own line */ text-align: left; margin-top: 10px; font-weight: bold; } input[type="text"] { width: 100; /* Make the button full width of the container */ } </style>

Note that lines are missing. I can load the index.html file directly into my browser locally and everything seems to be there and formatting works.

What is puzzling to me is that even with pieces missing, the <style> block seem to be formatted properly without syntax errors. Is the browser fixing corrupted formatting for me?

Does anyone have any ideas of where I can look to solve this?

[kctowers]

Sorry, formatting of my original post seems to be off...

This is my index.html file:

<style>

    body {
        font-family: Arial, sans-serif;
        text-align: left; /* General body alignment for content */
    }
    .container {
        max-width: 360px;
        margin: 0 auto; /* Center the container on the page */
        padding: 20px;
    }
    form label {
        display: block; /* Make labels take their own line */
        text-align: left;
        margin-top: 10px;
        font-weight: bold;
    }
    input[type="text"] {
        width: 100%; /* Full width within the container */
        padding: 8px;
        margin: 5px 0 15px 0;
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
        border: 1px solid #ccc; /* Add lines around the edit boxes */
        float: left; /* Align input field to the left */
    }
    input[type="submit"] {
        background-color: #007bff; /* Blue submit button */
        color: white;
        padding: 10px 15px;
        border: none;
        cursor: pointer;
        margin-top: 80px;
        display: block; /* Make it a block element to ensure it's on its own line */
        width: 100%; /* Make the button full width of the container */
    }
</style>

This is what the browser sees:

<style>

    body {
        font-family: Arial, sans-serif;
        text-align: left; /* General body alignment for content */
    }
    .container {
        max-width: 360px;
        margin: 0 auto; /* Center the container on the page */
        padding: 20px;
    }
    form label {
        display: block; /* Make labels take their own line */
        text-align: left;
        margin-top: 10px;
        font-weight: bold;
    }
    input[type="text"] {
        width: 100; /* Make the button full width of the container */
    }
</style>

[mathieucarbou]

Hello,
Sadly there is not enough info to help but you can look in the project there are a LOT of exemples. Take one and modify it ;-)

[kctowers]

I searched all of the examples. None of them actually use a file system to store the web page. So I started with the closest one "Params" and modified it. The code is attached...

The bug occurs when you use the processor function to fill the data fields. The text substitution corrupts the CSS portion of the block.

If I have the processor method return the string "Bug" like this:

String processor(const String &key)  {
    return ("Bug");
    }
...
        request->send(LittleFS, "/index.html", "text/html", false, processor);
 

The browser gets this: (Note the width of the type "text" field below).

        body {
            font-family: Arial, sans-serif;
            text-align: left; /* General body alignment for content */
        }
        .container {
            max-width: 360px;
            margin: 0 auto; /* Center the container on the page */
            padding: 20px;
        }
        form label {
            display: block; /* Make labels take their own line */
            text-align: left;
            margin-top: 10px;
            font-weight: bold;
        }
        input[type="text"] {
            width: 100Bug; /* Make the button full width of the container */
        }
    

Here is the project that shows the bug.
webpage.zip

[mathieucarbou]

searched all of the examples. None of them actually use a file system to store the web page.

https://github.com/ESP32Async/ESPAsyncWebServer/blob/main/examples/StaticFile/StaticFile.ino

[kctowers]

I managed a workaround by using an external CSS file rather than using inline styles.

[mathieucarbou]

Another one:
https://github.com/ESP32Async/ESPAsyncWebServer/blob/main/examples/Templates/Templates.ino