[🐛 BUG] Setting width/height with CSS units not working for metrics

[FlorianJacta]

What went wrong? 🤔

Setting width and height for metrics with CSS units is not working. This won't change the width/height as expected.

This works when just putting a number. It took a while for me to figure out (I went looking at the actual PR).

If this issue could be backported to another patch, this would be great.

Expected Behavior

This should work with all CSS units supported by Taipy. Or the documentation should change to reflect this behavior.

Steps to Reproduce Issue

from taipy.gui import Gui

value = 50

page = """
<|{value}|metric|>

## Works
<|{value}|metric|width=300|height=300|>

## Height not working, Width not working
<|{value}|metric|width=150px|height=300px|>
<|{value}|metric|width=300px|height=300px|>


## Height not working, Width not working
<|{value}|metric|width=150rem|height=150rem|>
<|{value}|metric|width=300rem|height=150rem|>
"""

Gui(page).run()

Screenshots

Version of Taipy

4.0

Acceptance Criteria

• A unit test reproducing the bug is added.
• Any new code is covered by a unit tested.
• Check code coverage is at least 90%.
• The bug reporter validated the fix.
• Related issue(s) in taipy-doc are created for documentation and Release Notes are updated.

Code of Conduct

• I have checked the existing issues.
• I am willing to work on this issue (optional)

[naaa760]

Hello @FlorianJacta :)

• I think update Dimension Handling: Allow width and height to accept both numerical values and CSS units (e.g., px, rem).
• Dimension Parsing: Implement logic to recognize CSS unit strings or convert numeric values to pixel-based strings (e.g., 150 becomes "150px").

[FlorianJacta]

I think 150 and 150px are two different units. It is related to this issue too: #2142 so you should also be assigned there

[vgauraha62]

Parameters in the 'metric' component do not accept units like, px or rem.
Use numerical values without units (e.g. width=150, height=300).
This should apply the desired dimensions to the metric component.

[Yubarajhalder]

The issue lies in how you're setting the width and height properties in the metric widget.

Taipy GUI uses a specific syntax for styling, and width and height should be defined within a style attribute.

Try modifying your page string as follows:

page = """
<|{value}|metric|style={"width": "300px", "height": "300px"}|>
"""

Or, for multiple styles:

page = """
<|{value}|metric|style={"width": "300px", "height": "300px", "font-size": "24px"}|>
"""

This should correctly apply the width and height styles to your metric widget.

Additionally, consider using units like px for pixels or % for percentage-based sizing.

For more information on Taipy GUI styling, refer to the official documentation:

[FlorianJacta]

@Yubarajhalder your answer is not answering the issue

[github-actions]

This issue has been labelled as "🥶Waiting for contributor" because it has been inactive for more than 14 days. If you would like to continue working on this issue, please add another comment or create a PR that links to this issue. If a PR has already been created which refers to this issue, then you should explicitly mention this issue in the relevant PR. Otherwise, you will be unassigned in 14 days. For more information please refer to the contributing guidelines.

[github-actions]

This issue has been unassigned automatically because it has been marked as "🥶Waiting for contributor" for more than 14 days with no activity.