Dear Community!
I have created a very simple progress bar widget.
The reason is for that later on we want to customize it for our design requirements later.
Long story short: the widget works perfectly fine in the custom widget editor, but acts very strange in the a specific app editor:
You can see, that the widget is rendering outside of the boundary box.
I also attach the json file:
customWidget-5S progress bar.json (1.7 KB)
Thanks for anybody who has some ideas!
Best Regards, Áron
Hi @aronjancso,
to me it looks like you found a bug.
I don’t think thats a result of your html/css/JS but an issue of the iFrame handling in Tulip.
I made some slight changes to make this App fitting my needs. So thanks for sharing.
But I was not able to come up with a solution. Then I found out, this happens to all Custom Widgets, if they are narrower than 28px (or so) in height.
In fact thats also an issue in the editor. As you can see it starts with a distance to the top, grows up first and then starts growing down:
Here is my version:
customWidget-Progress_Bar.json (1.5 KB)
(EDIT: Bugfix of Border-Radius in my Widget Version)
I guess you must set a relatively small height,so why it shows like this.
Please see below:
Check the outbox of the element. try to find a class named “widget”,change the “font-size” in it ,or just remove the font-size:25px. you will find the answer.
now:
after:
It’s an interesting thing in CSS with outbox.
Any element with fixed value ,such as font-size,height will cause this problem.
The element outside is smaller than the element inside.
And another interesting you can try is that,the POSITION of the out box is absolute，change it to “relative”,the Bar will show above the outbox
Hi @tony.wang,
I guess thats exactly the cause.
So now its on TULIP tu fix this.
@Peter.Hartnett Should be an easy one. What do you think?
