Page 1 of 1
Progress bars
Posted: 2020-11-06 19:12
by Moh Youba
Hello
I am looking for the way to create a progress bar inside a column. Is that possible.
- level_mark.jpg (12.77 KiB) Viewed 4366 times
Thank you
Re: Progress bars
Posted: 2020-11-06 20:04
by pbottcher
Hi,
yes you can
add something like
Code: Select all
.addClass('progress-bar progress-bar-warning').attr({'role':"progressbar"}).css({"width": width})
to your table column where you calculate the width according to your definition.
Re: Progress bars
Posted: 2020-11-07 12:00
by Moh Youba
Hello
Thank you for your reply, I am going to try it.
Regards,
Re: Progress bars
Posted: 2020-11-07 14:25
by SkayyHH
that is very cool. where exactly does the code have to be inserted?
Re: Progress bars
Posted: 2020-11-07 21:48
by landinialejandro
use this code inside your tablename-tv.js
Code: Select all
$j(function () {
const max = 300;
$j("td.tablename-fieldname").each(function () {
var obj = $j(this);
obj.css({position:"relative"});
obj.children('a').css({position:"absolute","z-index":"1"});
var value = obj.text();
var rel = value / max;
var w = obj.width();
var h = obj.height();
var $container = $j("<div/>", {
"style": "border:1px solid #d3d3d3; position:absolute; top:3px; left:3px; z-index:0;"
}).width(w).height(h);
var $bar = $j("<div/>",{class:"bg-info"}).width(rel*100+"%").height("100%");
obj.append($container.append($bar))
});
});
Re: Progress bars
Posted: 2020-11-08 07:33
by SkayyHH
Thank you so much. It works fantastic
Kai
Re: Progress bars
Posted: 2020-11-08 13:18
by SkayyHH
Can you maybe tell me how I can adjust the height of the bar?
Thanks again, Kai
Re: Progress bars
Posted: 2020-11-08 14:39
by landinialejandro
SkayyHH wrote: ↑2020-11-08 13:18
Can you maybe tell me how I can adjust the height of the bar?
Thanks again, Kai
hi! this example get de height of container in
var h = obj.height();
there you can put your own value.
Re: Progress bars
Posted: 2020-11-08 14:43
by SkayyHH
Hi, Thanks much!!
I tried this before.
But then the bar disappears completely. I guess I got that wrong. I have tried:
Code: Select all
var h = obj.height (10px); and
var h = obj.height (100%);
But unfortunately it doesn't work for me.
Re: Progress bars
Posted: 2020-11-08 14:58
by landinialejandro
SkayyHH wrote: ↑2020-11-08 14:43
Hi, Thanks much!!
I tried this before.
But then the bar disappears completely. I guess I got that wrong. I have tried:
Code: Select all
var h = obj.height (10px); and
var h = obj.height (100%);
But unfortunately it doesn't work for me.
the obj.height() function only return the container object define in var obj = $j(this);
only put a value
var h = "20px";
or
var h = "100%";
in this case yo need to re-define :
top:3px; left:3px ---> top:0px; left:0px
the bar is floating inside the td container, if you exceed the height the view is bad. so, 100% and obj.height() must be the max value to be get. without change the td container.
Re: Progress bars
Posted: 2020-11-08 20:20
by Moh Youba
Hello
Thank you very much, works as a charm for me
- progress_bar.jpg (35.51 KiB) Viewed 4237 times
Regards,
Re: Progress bars
Posted: 2020-11-08 21:13
by SkayyHH
This is exactly what i was looking for. Thank you very much!
Kai