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

BUGFIX: Resolve issue with custom data source displaying additional l… #3701

Merged
merged 2 commits into from
Feb 5, 2024
Merged

BUGFIX: Resolve issue with custom data source displaying additional l… #3701

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f0f1ee
BUGFIX: Resolve issue with custom data source displaying additional l…
markusguenther Jan 26, 2024
7857554
BUGFIX: Adjust styles for long labels
markusguenther Feb 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 24 additions & 4 deletions packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,28 @@
.multiLineWithThumbnail__item {
display: grid;
grid-template-columns: auto 1fr;
column-gap: var(--spacing-Half);
align-items: start;
box-sizing: content-box;
background-color: var(--colors-ContrastDarkest);
}

.multiLineWithThumbnail__item span {
Sebobo marked this conversation as resolved.
Show resolved Hide resolved
grid-column: 2;
grid-row: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

&.multiLineWithThumbnail__secondaryLabel {
grid-row: 2;
}

&.multiLineWithThumbnail__tertiaryLabel {
grid-row: 3;
}
}

.multiLineWithThumbnail__item--multiLine {
line-height: 20px;
}
Expand All @@ -26,17 +46,17 @@
.multiLineWithThumbnail__image {
width: calc(1.33 * (var(--spacing-GoldenUnit) + var(--spacing-Full)));
height: calc(var(--spacing-GoldenUnit) + var(--spacing-Full));
grid-column: 1;
grid-row: 1 / 4;
object-fit: contain;
background-color: #fff;
background-size: 10px 10px;
background-position: 0 0, 25px 25px;
background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%, #cccccc);
margin-right: .75em;
display: inline-block;
vertical-align: middle;
margin-left: -var(--spacing-Full);
margin-top: -var(--spacing-Half);
margin-bottom: -var(--spacing-Half);
margin-left: -var(--spacing-Half);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not so happy about still having a negative margin, but I think its fine for now.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, but in the select boxes I am always afraid that I break something else 🙈

align-self: center;
}

.multiLineWithThumbnail__item:hover .multiLineWithThumbnail__secondaryLabel,
Expand Down
Loading