html view details

I have this html and I want to show it in my app, but I've already made some changes and it doesn't show.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.caixa {
width: "200px";
height: 150px;
text-align: center;
padding: 20px;
border-radius: 10px;
margin: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.laranja {
background-color: orange;
color: white;
}

.azul {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="caixa laranja">
<h2>Total da Meta</h2>
<p>R$ 10,000</p>
</div>
<div class="caixa azul">
<h2>Meta Realizado</h2>
<p>R$ 7,500</p>
</div>
</body>
</html>

 

it would have to appear like this

DEVIMPLOY_Autom_0-1696445306284.png

 



0 8 531
8 REPLIES 8

@GreenFlux  .. hi my friend , could you help me ... thanks!

AppSheet doesn't support what you are trying to do.
The best you can do is to use an SVG image as an Image column

Hi @DEVIMPLOY_Autom , I've been out of AppSheet development for a few years now, and I've never used the HTML view. Your code seems to work fine in CodePen. It might be a limitation in the HTML view feature of AppSheet. 


@GreenFlux wrote:

I've been out of AppSheet development for a few years now


😨

@SkrOYC  @GreenFlux 
i got it! , thanks!

DEVIMPLOY_Autom_0-1698867059679.png

 

Hey @DEVIMPLOY_Autom , what was the solution? Im trying to accomplish exactly the same.

I have the code the HTML code, just need the steps to show it.

Hello my friend, I am having the same problem, I write the html svg codes to creare the images, but how can I display them and even manipulate the elements using data from my app?

Ive already used some SVG samples from the internet, such as qr codes, charts, progress bars and others, but I don't know how to do it.
PS: I am using vs code editor. 

Agora que eu vi que voce é brasileiro né kkkk está tudo em portugues nas imagens.

Top Labels in this Space