Grid column title too long, hides sorting

My grid column titles are longer than the cell. I tried putting "white-space: pre-wrap" it got to 2 lines, but the sorting icon is still being hidden.

How do I make the sorting icon show?

image

    <RadzenGridColumn TItem="Meal" Property="Number" Title="1 piece is consumed for (days)">
        <HeaderTemplate>
            <span style="white-space: pre-wrap">1 piece is consumed for (days)</span>
        </HeaderTemplate>
    </RadzenGridColumn>

Try setting the Width property of the column.

If I set the column width to 230px for example the text goes back to 1 line and the sorting icon is again half hidden.

image

 <RadzenGridColumn TItem="Meal" Property="Number" Title="1 piece is consumed for (days)">
    <HeaderTemplate>
        <span style="white-space: pre-wrap; width=230px">1 piece is consumed for (days)</span>
    </HeaderTemplate>
</RadzenGridColumn>

You need to set the Width property of the column and not the width style attribute of your span.

Yes, I am sorry I posted the wrong code in my previous post: When I set the property of the column, this is the result: The column title goes back to 1 line and the sorting icon is half hidden.

image

    <RadzenGridColumn TItem="Meal" Property="Number" Width="230px">
        <HeaderTemplate>
            <span class="gridColumndStyle">1 piece is consumed for (days)</span>
        </HeaderTemplate>
    </RadzenGridColumn>

.gridColumndStyle {
white-space: pre-wrap;
}

What happens when you set it to a larger value?

With width: 270px. this is the result:

image

The text is on 1 line and the sorting icon shows.

But the column is unnecessarily big.

I want to set smaller width, the text to break into several lines and always show the sorting icon.

Try setting the display of the span to inline-block and specifying some width value which is smaller than the column Width.

<RadzenGridColumn TItem="Meal" Property="Number" Width="230px">
    <HeaderTemplate>
        <span class="gridColumndStyle">1 piece is consumed for (days)</span>
     </HeaderTemplate>
</RadzenGridColumn>

.gridColumndStyle {
     white-space: pre-wrap;
     display: inline-block;
     width: 200px;
}

Thank you! I applied the proposed changes and it did the trick!

image

The problem now is that the sorting icon is in the middle. I believe this is because of this property:

image

I tried to align to it to the top I tried with this code, but it has no effect:

.ui-sortable-column .fa {
vertical-align: top;
}

Is there anyway I can make this icon be vertical-align: top;?

I recommend searching online for CSS specificity.