Hello i cant make this work, im making an embed sender with my bot on dashbaord, and i cant make color input good, when i put height auto its broken. I want it to look like a discord embed.
The color on embed isnt going to the bottom. The color cant be fixed cause theres textarea and if it we resize it then its not gonna go to the bottom. Also textarea must be resiable.
Image
HTML (ejs):
<html>
<body>
<div class="mainBoxDash">
<div class="settings">
<form method="POST">
<div class="customEmbed2">
<p class="changeEmbedSettings">Change all embed settings down below</p>
<div class="lineWelcome"></div>
<img class="embedImageBot" src="<%= bot.user.avatarURL()%>" alt="">
<p class="botName"><%= bot.user.username%></p>
<img class="botTag" src="https://cdn3.emoji.gg/emojis/bot.png" alt="">
<div class="embed">
<input type="color" id="embedColor" class="embedColor" accept="hex" name="embedColor" value="#0076ff">
<%- guild.icon ? `<img src="https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}" class="authorImage">` : `<img src="https://maki.gg/static/app-assets/images/portrait/default.png" class="authorImage">` %>
<input class="authorName" name="authorName" maxlength="100" value="<%= guild.name %>">
<textarea name="descriptionBot" id="descriptionBot" class="descriptionBot" maxlength="4096" required="required">Embed Description</textarea>
<input class="footerName" name="footerName" maxlength="32" value="<%= bot.user.username %> • <%= new Date().getFullYear();%>">
</div>
<div class="invisibleEmbed"></div>
</div>
<button type="submit" class="saveSettings">
<p class="saveText">Send Embed</p>
</button>
</form>
</div>
<%- include('footer'); -%>
</div>
</body>
</html>
CSS:
.embed{
background-color: #2f3136;
width: 70%;
height: auto;
margin-left: 85px;
margin-top: 5px;
border-radius: 5px;
}
input[type="color"] {
-webkit-appearance: none;
border: none;
width: 3px;
height: auto;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}