michaelbennett3443 asked 5 years ago
Hi I have built the ESP32 Server and its working excellent. I have been able to add more buttons to control the devices that is connected to the outputs, no problem there. I currently have 10 buttons displayed on the server all the buttons work properly. The problem is with the big amount of buttons, Im constantly scrolling either up or down to access the buttons after 1 is pressed. I have tried to add code unsuccessfully to display 2 buttons per row but its not working. The button are stilled display 1 per line versus 2 per line. Any help will be appreciated.
Sara Santos Staff answered 5 years ago
Hi Michael.
I’m not an expert in HTML or CSS, but I’ve tested this approach in our web server code and it worked well to display two buttons on the same row:
- Simply include the two buttons on the same paragraph (highlighted in bold)
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<style>
html {
font-family: Helvetica;
display: inline-block;
margin: 0px auto;
text-align: center;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 40px;
text-decoration: none;
font-size: 30px;
margin: 2px;
cursor: pointer;
}
.button2 {
background-color: #555555;
}
</style>
</head>
<body>
<h1>ESP32 Web Server</h1>
<p>GPIO 26 - State</p>
<p><a href="/26/on"><button class="button">ON</button></a><a href="/26/off"><button class="button button2">OFF</button></a></p>
<p>GPIO 27 - State</p>
<p><a href="/27/on"><button class="button">ON</button></a><a href="/27/off"><button class="button button2">OFF</button></a></p>
</body>
</html>
You can do this for all your buttons.
This is the result:
Let me know if this is what you’ve expected and if it works for you.
Regards,
Sara