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.

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

Table tags overlap and split across new line when ui.table_column cell_overflow is set to "wrap" #1917

Closed
DeeJaayArgh opened this issue Apr 10, 2023 · 0 comments · Fixed by #1925
Assignees
Labels
bug Bug in code ui Related to UI

Comments

@DeeJaayArgh
Copy link

Wave SDK Version, OS

H2O Wave 0.25.2 20230317093151
Linux Rocky 8.7
Firefox Extended Support Release 102.8.0esr

Actual behavior

When creating a column with tags and setting the cell overflow to wrap, tags within a cell will overlap and split across lines
image

Expected behavior

I would expect tags to not overlap, and only split across lines if column width was less than the tag width

Steps To Reproduce

Run the following app:

# Table / Tags
# Use tags in order to emphasize a specific value. For multiple tags in a single row use `,` as a delimiter.
# ---
from h2o_wave import main, app, Q, ui


_id = 0


class Issue:
    def __init__(self, text: str, tags: str):
        global _id
        _id += 1
        self.id = f'I{_id}'
        self.text = text
        self.tags = tags


# Create some issues
issues = []
issues.append(Issue("Issue 1", "DONE,SUCCESS,Feature"))
issues.append(Issue("Issue 2", "FAIL,Critical"))
issues.append(Issue("Issue 3", "DONE,SUCCESS,Critical, Feature"))
issues.append(Issue("Issue 4", "DONE,SUCCESS,Backlog"))
issues.append(Issue("Issue 5", "DONE,SUCCESS,Refactor,Backlog"))

columns = [
    ui.table_column(name='text', label='Issue', min_width='100px'),
    ui.table_column(name='tag', label='Badge', max_width='150px', cell_overflow='wrap', cell_type=ui.tag_table_cell_type(name='tags', tags=[
        ui.tag(label='FAIL', color='$red'),
        ui.tag(label='Critical', color= '$red'),
        ui.tag(label='DONE', color='#D2E3F8', label_color='#053975'),
        ui.tag(label='Feature', color= '$green'),
        ui.tag(label='Backlog', color= '$yellow'),
        ui.tag(label='Refactor', color= '$orange'),
        ui.tag(label='SUCCESS', color='$mint'),
    ])),
]


@app('/demo')
async def serve(q: Q):
    q.page['example'] = ui.form_card(box='1 1 -1 -1', items=[
        ui.table(
            name='issues',
            columns=columns,
            height='500px',
            width='300px',
            rows=[ui.table_row(name=issue.id, cells=[issue.text, issue.tags]) for issue in issues],
        )
    ])
    await q.page.save()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Bug in code ui Related to UI
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants