Allow a Stylekit "card" to be side-by-side with width=fit-content

[arcanaxion]

Description

Cards can have their width match the size of its content with #468, which is great for displaying metrics (among other things).

I'd like to position cards side-by-side, without needing to use a layout and explicitly defining the width of each element there.

Currently, I can use a layout and define the width:

from taipy.gui import Gui, Markdown

page_md_target = Markdown(
"""
<|layout|columns=10em 10em|

<|card|part|width=fit-content|
Metric 1
|>

<|card|part|width=fit-content|
Metric 2
|>

|>
""")

if __name__ == "__main__":
    gui = Gui(page_md_target)
    gui.run(debug=True, run_browser=False, use_reloader=True, dark_mode=False)

Which produces:

I want to create this without defining a width anywhere.

Solution Proposed

Maybe allowing a layout column to "fit-content" ("fc") is a possible solution? I don't like the extra nesting especially if I'm only showing 2 cards, but it makes sense and I can also use layout.gap to add space between the cards.

page_md_layout = Markdown(
"""
<|layout|columns=fc fc|

<|card|part|width=fit-content|
Metric 1
|>

<|card|part|width=fit-content|
Metric 2
|>

|>
""")

Impact of Solution

Needs to work with taipy.gui.builder / tgb also.

Additional Context

No response

Acceptance Criteria

• [ ] Ensure new code is unit tested, and check code coverage is at least 90%.
• [ ] Create related issue in taipy-doc for documentation and Release Notes.
• [ ] Check if a new demo could be provided based on this, or if legacy demos could be benefit from it.
• [ ] Ensure any change is well documented.

Code of Conduct

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

[arcanaxion]

@dinhlongviolin1 Opened a new feature request per #1725. Thanks for taking a look!

[HatimZ]

@arcanaxion @jrobinAV I am interested in this issue. Can you please assign this to me? I think I would need to look deep down into the Markdown module and how it translates string into actual GUI code. Then i would check for "fc" string and apply styles for width 100% to each child, so they can expand in their axis

[jrobinAV]

Hello @HatimZ ,

Yep, sure. Let me assign it to you. If you have any questions, @FredLL-Avaiga @dinhlongviolin1 @namnguyen20999 @FabienLelaquais will be pleased to answer.

[HatimZ]

ok great.

[quest-bot[bot]]

New Quest!

A new Quest has been launched in @Avaiga’s repo. Merge a PR that solves this issue to loot the Quest and earn your reward.

---

Some loot has been stashed in this issue to reward the solver!

🗡 Comment @quest-bot embark to check-in for this Quest and start solving the issue. Other solvers will be notified!

⚔️ When you submit a PR, comment @quest-bot loot #1780 to link your PR to this Quest.

Questions? Check out the docs.

[xyfer17]

@arcanaxion could please assign the above issue to me, if @HatimZ is not working on it.

[HatimZ]

@arcanaxion Will work on this issue. Just caught up with some work. Updates soon

[HatimZ]

@quest-bot embark

[quest-bot[bot]]

@HatimZ has embarked on their Quest. 🗡

• @HatimZ has been on GitHub since 2020.
• They have merged 6 public PRs in that time.
• Their swords are blessed with Shell and Python magic ✨
• They haven't contributed to this repo before.

This is not an assignment to the issue. Please check the repo’s contribution guidelines before submitting a PR.

Questions? Check out the docs.

[quest-bot[bot]]

🧚 @HatimZ has submitted PR https://github.com/Avaiga/taipy/issues/2039 and is claiming the loot.

Keep up the pace, or you'll be left in the shadows.

Questions? Check out the docs.

[github-actions[bot]]

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.

[RymMichaut]

Congrats @HatimZ please contact me at [email protected] to ship your swag :)

[FredLL-Avaiga]

This should be enough for your case @arcanaxion

from taipy.gui import Gui

page = """
<|layout|columns=max-content max-content|

<|card|part|
Metric 1
|>

<|card|part|
Metric 2
|>

|>
"""

if __name__ == "__main__":
    Gui(page).run(title="layout - fit content")

What do you think ?

[arcanaxion]

@FredLL-Avaiga Yes that's perfect. Time for me to do some reading on CSS... Thanks Fred!

[FredLL-Avaiga]

:+1 can you close the issue then?