Why are certain features not available for Glide pages?

Ask for Help
21

That looks great! I’ve been trying to come up with something that includes text, like you did with your percentages. Curious how you ended up doing that. I’m not having the best luck due to some weird scaling issues.

image

1 Like
22

jeje, I’m still fighting with all this and trying to make it simpler. :grinning:

But if I could do it time ago, I think I can repeat it in 2023 :muscle:

barras
barras512×716 783 KB

I will let you know when I have something decent to show

Feliz día!

1 Like
23

I’m really close to something I like. I have everything lining up nicely regardless of screen size and I can add and remove additional bars easily. The only issue I have is that low percentages look weird. I can correct it, but then I lose the number on the left side of the bar.

Here’s what I have right now. Notice that low percentages look good.

image
image848×330 10 KB

If I fix that issue, then I lose the number.

image
image828×329 9.39 KB

I’ll try some more, but I think the only solution is to remove the rounded corners, or make them less rounded.

1 Like
24

Here’s code for a javascript column if you want to use it. It will dynamically build as many or as few bars as you want based on the number of percentages you give it. You can specify headings if you want. If not, you still need to put in commas so it splits into an array properly. It’s not perfect, but works pretty good.
p1 = headings
p2 = percentages
p3 = bar colors

image
image342×820 44.1 KB

image
image1015×265 8.58 KB 

let headings = p1.split(",");
let percentages = p2.split(",");
let colors = p3.split(",");
let template = '<td style="text-align:center;"><b>{heading}<p></b><div style="margin:auto;border-radius:0px;background-color:#DDDDDD;position:relative;height:200px;width:15px;"><div style="border-radius:0px;background-color:{color};position:absolute;bottom:0px;width:15px;height:{percentage}%"></div><div style="position:absolute;bottom:0px;height:calc({percentage}% + 10px);right:18px;text-align:right;white-space:nowrap;"><a style="border: 1px solid black;padding:2px;">{percentage}%</a>→</div></div></td>';

let finalResult = [];
for (let i = 0; i < percentages.length; i++) {
finalResult.push(template.replaceAll("{heading}", headings[i]).replaceAll("{percentage}", percentages[i]).replaceAll("{color}", colors[i]));
}

return '<table style="width:100%;table-layout:fixed;"><tr>' + finalResult.join("") + '</tr></table>';
6 Likes
25

No way, you have created a monster!! :exploding_head:

I’m going to test it!!

1 Like