Commit 142008cb authored by JuniorJPDJ's avatar JuniorJPDJ Committed by Georg Krause
Browse files

Resolve "Too long radio descriptions resize the entire row"

parent 0873a6e9
Fix showing too long radio descriptions (#1556)
......@@ -13,7 +13,11 @@
{{ radio.name }}
</template>
</h4>
<div class="description">
<div
class="description"
:class="{expanded: isDescriptionExpanded}"
@click="isDescriptionExpanded = !isDescriptionExpanded"
>
{{ radio.description }}
</div>
</div>
......@@ -55,6 +59,11 @@ export default {
customRadio: { type: Object, required: false, default: () => { return {} } },
objectId: { type: String, required: false, default: null }
},
data () {
return {
isDescriptionExpanded: false
}
},
computed: {
radio () {
if (Object.keys(this.customRadio).length > 0) {
......
.card .description {
word-wrap: break-word;
.ui.cards {
align-items: flex-start;
}
.ui.cards > .card,
.ui.card {
color: var(--card-text-color);
background: var(--card-background);
min-height: 200px;
&:not(.flat) {
box-shadow: var(--card-box-shadow);
}
......@@ -22,9 +20,22 @@
.meta {
color: var(--discrete-text-color);
}
.description {
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
}
.description.expanded {
text-overflow: initial;
overflow: initial;
-webkit-line-clamp: initial;
-webkit-box-orient: initial;
}
}
.ui.cards.app-cards {
$card-width: 14em;
$card-height: 23em;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment