Optimize (total expenses) box
I Need to optimize the HTML CCS total Expenses box to include third line and be able to change the font sizes for each line.
Appreciate the help.
let gastos := sum((select Gastos).Monto_Gastos);
let css := "
<style>
.grid-container {
display:grid;
font-size:small;
grid-template-columns:repeat(auto-fill, minmax(11em, 1fr));
grid-gap:2px 0px;
}
.gridFormat, .gridHeader{
text-align:center;
font-family:Helvetica;
font-size:small
}
.gridFormat {
font-size:small;
padding:1em;
color:dimgray;
border:thin solid silver;
background-color:#FFF;
}
.gridHeader {
grid-column: 1 / -1;
border:2px solid green;
padding:5px;
background:radial-gradient(circle, mediumorchid 30%, green);
color:white;
font-size:small;
}
section {
color:green;
font-size:large;
font-weight:bold;
}
</style>
";
let content := "
<aside class = 'grid-container'>
<aside class = 'gridFormat '>🔎 Total Expenses <br><br><section>" +
gastos +
"</section></aside>
</aside>
";
html(css + content)
17 Antworten
-
Hi Raphael, there is no need for a grid here. Try it this way. Mirko
let value1 := "Raphael"; let value2 := "Sanches"; let css := " <style> .asideFormat{ text-align:center; font-family:Helvetica; font-size:small; padding:1em; color:dimgray; border:thin solid silver; background-color:#FFF; } .section1 { color:green; font-size:medium; font-weight:bold; padding:1em .5em .5em .5em; } .section2 { color:red; font-size:x-large; font-weight:bold; padding:.5em .5em 0 .5em; } </style> "; let content := " <aside class='asideFormat'>🔎 Total Expenses<section class='section1'>" + value1 + "</section><section class='section2'>" + value2 + "</section> </aside> "; html(css + content)
-
The problem is that if there are several function fields with css, the last one prevails. In my opinion, your solution is the only one that works, inserting the style conditions directly into the html tag.
-
Hallo zusammen und einen schönen Sonntag ,
ich finde das Thema sehr interessant und habe auch schon ähnliches (auch hier aus dem Forum) umgesetzt.
Ich finde jedoch Mirko's Version übersichtlicher und nun bin ich dabei, diese zu adaptieren. Ich bin jedoch bei einer Sache 'hängengeblieben' und zwar - wie kann man positive Zahlen grün und negative Zahlen rot anzeigen?
Mein erster Ansatz ist 'irgendetwas mit if...then...else', aber da komme ich nicht weiter.
Hast Du eine Idee, wie ich das umsetzen kann?
Vielen Dank schon mal und Gruß Kruna
-
Mirko
Hi Mirko need optimize this.
<aside class = 'double' style='text-align:left; color:grey; font-size:small; font-weight:bold;'>" + html(" <span style=""color: black""> RYM Link </span>" + ":|" + "<br>") + Vrym + " </aside>
The Variable Vrym came from a field url in the same table need to View and click the url
And can't view the two color only one
How can I do that.
Content aside
- Status Answered
-
1
„Gefällt mir“ Klicks
- vor 1 JahrZuletzt aktiv
- 17Antworten
- 267Ansichten
-
4
Folge bereits