# مشكلة في مكون سمة عرض مربع الفئة المحسن

**URL:** <https://meta.discourse.org/t/problem-with-enhanced-category-box-display-theme-component/215933>\
**Category:** Product Support\
**Created:** [25 يناير 2022، 1:19م UTC](https://meta.discourse.org/t/problem-with-enhanced-category-box-display-theme-component/215933 "2022-01-25T13:19:19Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Julie\_Thézénas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/julie_th%C3%A9z%C3%A9nas/32/241689_2.png) [@Julie\_Thézénas](https://meta.discourse.org/u/Julie_Th%C3%A9z%C3%A9nas)\
**Post date:** [25 يناير 2022، 1:19م UTC](https://meta.discourse.org/t/problem-with-enhanced-category-box-display-theme-component/215933/1 "2022-01-25T13:19:19Z")

</div>

(EN)  
Hello everyone,

i tried to use this code but as you can see (screen A), the text below the boxes are craching. I tryed in the SCSS to make the option :

white-space: revert;  
and delete

white-space: nowrap;

when i use white-space: revert; the text make column (screen B)

The initial code below

> [@Enhanced category-box display component](https://meta.discourse.org/t/enhanced-category-box-display-component/156954):
>
> discourse-theme-category-homepage I’ve worked quite a lot on a new category-box homepage for my community’s forum. It’s quite specific for our needs and then may not be useful for a lot of people, but one might take ideas from it. After/Before Our specific usecase We have a community that deal with a lot of broad topics. We federate local NGOs that have their own members, and we do have autonomous groups, each of them are performing one or multiple …

* * *

(FR)  
Bonjour tout le monde !

J’ai tenté de reprendre le code “Enhanced category”, mais j’ai un bug (image A) avec le texte qui se superpose. Dans le SCSS, j’ai mit  
white-space: revert;  
et enlevé

white-space: nowrap;

car ce dernier faisait se superposer le texte. en appliquant revert, on peut voir une différence (image B).

Avez-vous eu ce problème avec le code ?

Merci d’avance

## Le code initial [Enhanced category-box display component](https://meta.discourse.org/t/enhanced-category-box-display-component/156954)

**A**

 ![screen A](https://global.discourse-cdn.com/meta/original/3X/a/f/af4217991d4a27f73899a05c826857d20f104f91.png)

**B**

 ![screen B](https://global.discourse-cdn.com/meta/original/3X/1/8/18202e9460dceddf49030002ba882dfee6d6ca44.png)

TEST :

```plaintext
.categories-and-latest {
	flex-direction: column;
}

.category-list {
	thead,
	.topics,
	.category-description {
		display: none;
	}
    
    // .title, .featured-topic {
    // overflow: hidden;
    // text-overflow: ellipsis;
    // flex: 0 1 auto;
    // white-space: revert;
    // }

    @mixin ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 0 1 auto;
        white-space: revert;
    }

	tbody {
		text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

		tr {
			display: inline-block;
			width: 250px;
			min-height: 250px;
			margin: 0.75em;
			border: 1px solid rgba(0, 0, 0, 0.1) !important;
			border-left-color: transparent;
            margin-block: 70px;

		}

		.category {
			padding: 1.25em 0;
			border-width: 0;
			display: block;
			width: 100%;
			height: calc(100% - 2.5em);
			position: relative;
			background: #f2f2f2;
            display: flex;
            flex-direction: colum;
            flex-wrap: wrap;
            align-items: center;
			.category-logo {
				float: unset;
				margin: 0 auto;
			}

		h3 {
			 a[href] {
				display: flex;
				flex-direction: column;
				width: 250px;
                    order: 1;
                    .category-text-title {
                        justify-content: center;
                    }
				}
			}

			&:after {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				content: "";
				z-index: 1;
				box-sizing: border-box;
				pointer-events: none;
				border-left: 6px solid;
				opacity: 0.35;
				border-color: inherit;
			}
    
            .subcategories {
                .category-name {
                    margin-top: 0;
                }
                .badge-notification {
                    display: none;
                }

            }
		}
	}
}

```

(AR)  
مرحباً بالجميع،

لقد حاولت استخدام هذا الكود ولكن كما ترون (الشاشة أ)، فإن النص الموجود أسفل الصناديق يتداخل. حاولت في SCSS جعل الخيار:

white-space: revert;  
وحذف  
white-space: nowrap;

عندما أستخدم white-space: revert؛ يصبح النص عمودًا (الشاشة ب)

الكود الأولي أدناه

> [@Enhanced category-box display component](https://meta.discourse.org/t/enhanced-category-box-display-component/156954):
>
> discourse-theme-category-homepage I’ve worked quite a lot on a new category-box homepage for my community’s forum. It’s quite specific for our needs and then may not be useful for a lot of people, but one might take ideas from it. After/Before Our specific usecase We have a community that deal with a lot of broad topics. We federate local NGOs that have their own members, and we do have autonomous groups, each of them are performing one or multiple …

* * *

(FR)  
Bonjour tout le monde !

J’ai tenté de reprendre le code “Enhanced category”, mais j’ai un bug (image A) avec le texte qui se superpose. Dans le SCSS, j’ai mit  
white-space: revert;  
et enlevé

white-space: nowrap;

car ce dernier faisait se superposer le texte. en appliquant revert, on peut voir une différence (image B).

Avez-vous eu ce problème avec le code ?

Merci d’avance

## Le code initial [Enhanced category-box display component](https://meta.discourse.org/t/enhanced-category-box-display-component/156954)

**A**

 ![screen A](https://global.discourse-cdn.com/meta/original/3X/a/f/af4217991d4a27f73899a05c826857d20f104f91.png)

**B**

 ![screen B](https://global.discourse-cdn.com/meta/original/3X/1/8/18202e9460dceddf49030002ba882dfee6d6ca44.png)

TEST :

```plaintext
.categories-and-latest {
	flex-direction: column;
}

.category-list {
	thead,
	.topics,
	.category-description {
		display: none;
	}
    
    // .title, .featured-topic {
    // overflow: hidden;
    // text-overflow: ellipsis;
    // flex: 0 1 auto;
    // white-space: revert;
    // }

    @mixin ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 0 1 auto;
        white-space: revert;
    }

	tbody {
		text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

		tr {
			display: inline-block;
			width: 250px;
			min-height: 250px;
			margin: 0.75em;
			border: 1px solid rgba(0, 0, 0, 0.1) !important;
			border-left-color: transparent;
            margin-block: 70px;

		}

		.category {
			padding: 1.25em 0;
			border-width: 0;
			display: block;
			width: 100%;
			height: calc(100% - 2.5em);
			position: relative;
			background: #f2f2f2;
            display: flex;
            flex-direction: colum;
            flex-wrap: wrap;
            align-items: center;
			.category-logo {
				float: unset;
				margin: 0 auto;
			}

		h3 {
			 a[href] {
				display: flex;
				flex-direction: column;
				width: 250px;
                    order: 1;
                    .category-text-title {
                        justify-content: center;
                    }
				}
			}

			&:after {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				content: "";
				z-index: 1;
				box-sizing: border-box;
				pointer-events: none;
				border-left: 6px solid;
				opacity: 0.35;
				border-color: inherit;
			}
    
            .subcategories {
                .category-name {
                    margin-top: 0;
                }
                .badge-notification {
                    display: none;
                }

            }
		}
	}
}

```

---

_[View the full topic](https://meta.discourse.org/t/problem-with-enhanced-category-box-display-theme-component/215933)._