Control HTML Content Size in App Deploy through UiPath Assistant Issue

[Luis_Fernando]

Hello Community,

I’m working on an app that displays charts through an HTML Control, and I’m experiencing issues displaying the size when deploying my app through the UiPath Assistant. I have noticed in the past that generally, your app will display a bit differently in terms of interface size depending on whether you deploy it through the Assistant or through the browser. Still, you can always configure sizes so it works fine for you. But in this case, I’ve been unable to find a combination of width and height for my canvas in the HTML Content to display my chart in a nice way without having to scroll in the container to see the whole chart. As you can see in this image.

I’ve noticed that the difference between the sizes displayed on my HTML content varies immensely depending on where I deploy it, more than any other control usually behaves.

Size configured

Browser

Asssitant

Surely I don’t know much about this size configuration, but I’ve tried working with px and % and haven’t found a combination that works for me after several attempts.

Has anyone experienced a similar issue?
Any recommendations?

Thank you for your attention. I’ll be waiting for feedback.
Regards

[Divyaprakash_DP (Divyaprakash Thangaraj)]

I tried creating a similar bar chart with same style but for me it looks same in browser and assistant.
However, I see there are few problems with the css code.

1. Width property accepts only one value, so the existing value “0 auto” is not valid.
2. For the chart js, we can just specify the width property and the height will be automatically computed by chartjs based on width.
   Can you please try specifying just width and not height?
   Example:

canvas {
  width: 80%;
  margin: 0 auto;
}

[Luis_Fernando]

Hello @Divyaprakash_DP , I keep getting the same outcome. Could you share your app? I could share you mine if you like, so you can take a look.

[Luis_Fernando]

Control Inventario.uiapp (961.6 KB)

Really haven’t been able to make sense out of it

[Divyaprakash_DP (Divyaprakash Thangaraj)]

Imported the app you shared and verified the runtime in both browser and assistant. It looks almost similar for me in both browser and assistant. Attaching screenshots for reference. I am checking in chrome browser and on assistant 23.10
Browser:

Assistant:

In both the cases, the problem I see is the x-axis is not visible. The reason for that is the width of canvas is set to 80% and as per the chart size, chartjs will set a height for the canvas. When you increase/decrease the width, height will proportionally increase/decrease based on the chart aspect ratio.
The height computed for the chart in this case is more than the height of the container8(55%).
If you are facing the same issue, you can either increase the height of container8 or reduce the canvas width to 70% or lesser.

[Luis_Fernando]

Hello @Divyaprakash_DP
Well that’s the thing, I have tried reducing the width to the max possible and the changes does take effect in chrome but not in the assistant, Chart in the assistant always displays with full width for some reason.

Chrome

Assistant

I end up having to do something like this to display the chart in a way that look good.
Basically was adjusting the create html control so it doesn’t occupy the whole container8 width.