Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
1 of 7 tasks
FlorianJacta opened this issue Oct 24, 2024 · 11 comments · Fixed by #2318 · May be fixed by #2309
Closed
1 of 7 tasks

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

FlorianJacta opened this issue Oct 24, 2024 · 11 comments · Fixed by #2318 · May be fixed by #2309
Assignees
@namnguyen20999 @philliparaujo
Labels
good first issue New-contributor friendly 🖰 GUI Related to GUI 💥Malfunction Addresses an identified problem. 🟧 Priority: High Must be addressed as soon

Comments

@FlorianJacta
Copy link
Member

FlorianJacta commented Oct 24, 2024 •
edited
Loading

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

image

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)
@FlorianJacta FlorianJacta added 🖰 GUI Related to GUI 💥Malfunction Addresses an identified problem. 🟧 Priority: High Must be addressed as soon labels Oct 24, 2024
@naaa760
Copy link

naaa760 commented Oct 24, 2024 •
edited
Loading

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
Copy link
Member Author

FlorianJacta commented Oct 25, 2024 •
edited
Loading

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

@FlorianJacta FlorianJacta mentioned this issue Oct 25, 2024
Closed
4 tasks
@jrobinAV jrobinAV added the good first issue New-contributor friendly label Oct 25, 2024
@vgauraha62
Copy link

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
Copy link

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
Copy link
Member Author

@Yubarajhalder your answer is not answering the issue

@github-actions GitHub Actions
Copy link
Contributor

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 github-actions bot added the 🥶Waiting for contributor Issues or PRs waiting for a long time label Nov 12, 2024
@github-actions github-actions bot removed the 🥶Waiting for contributor Issues or PRs waiting for a long time label Nov 26, 2024
@github-actions GitHub Actions
Copy link
Contributor

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

@philliparaujo
Copy link

Hi, could you please assign me to this issue?

@FlorianJacta
Copy link
Member Author

Sure @philliparaujo, I have assigned you to this issue!

heyanuja added a commit to philliparaujo/taipy that referenced this issue Dec 8, 2024
@heyanuja
test(gui): Add e2e tests documenting metric CSS units bug (Avaiga#2141)
5537f11 
- Add test for default metric behavior
- Document bug where numeric width/height values default to 100%
- Document bug where px unit width/height values are ignored
- Tests verify current behavior for future fix verification
philliparaujo pushed a commit to philliparaujo/taipy that referenced this issue Dec 9, 2024
@heyanuja @philliparaujo
test(gui): Add e2e tests documenting metric CSS units bug (Avaiga#2141)
a9ea06b 
- Add test for default metric behavior
- Document bug where numeric width/height values default to 100%
- Document bug where px unit width/height values are ignored
- Tests verify current behavior for future fix verification
@philliparaujo philliparaujo mentioned this issue Dec 9, 2024
Open
11 tasks
@namnguyen20999 namnguyen20999 mentioned this issue Dec 11, 2024
Merged
11 tasks
@FabienLelaquais FabienLelaquais linked a pull request Dec 11, 2024 that will close this issue
Fix css syntax for Metric component #2318
Merged
11 tasks
namnguyen20999 added a commit that referenced this issue Dec 12, 2024
@namnguyen20999
Merge branch 'develop' into bug/#2141-metric-width-height-css
511646f
namnguyen20999 added a commit that referenced this issue Dec 12, 2024
@namnguyen20999
Merge pull request #2318 from Avaiga/bug/#2141-metric-width-height-css
bf6c3a4 
Fix css syntax for Metric component
FabienLelaquais added a commit that referenced this issue Dec 17, 2024
@FabienLelaquais
Metric control geometry (issues #2141 and #2142)
a2ec862
@FabienLelaquais FabienLelaquais mentioned this issue Dec 17, 2024
Merged
@FlorianJacta
Copy link
Member Author

FlorianJacta commented Dec 18, 2024 •
edited
Loading

This doesn't seem to be fixed in 4.0.2.dev1 and we also have by default a metric taking the entire screen. However, this is fixed in develop

FabienLelaquais added a commit that referenced this issue Dec 18, 2024
@FabienLelaquais
Metric control geometry (issues #2141 and #2142) (#2346)
f7deb54
@AlexandreSajus
Copy link
Contributor

Fixed in 4.0.2.dev2!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@namnguyen20999 namnguyen20999

@philliparaujo philliparaujo

Labels
good first issue New-contributor friendly 🖰 GUI Related to GUI 💥Malfunction Addresses an identified problem. 🟧 Priority: High Must be addressed as soon
Projects
None yet
Milestone
No milestone
8 participants
@namnguyen20999 @AlexandreSajus @philliparaujo @jrobinAV @FlorianJacta @vgauraha62 @Yubarajhalder @naaa760