Hi,
In the rowexpand (template) of the Datagrid all the text is not wrapped in the Div as it happens outside of the Datagrid, what property is inherited that causes this?
Example:
Outside of the Datagrid:
Inside of the Datagrid:
Hi @joaopedrocmp,
Without some code we can't help much. You can always inspect those HTML elements with your browser's developer tools and see what CSS rules apply to them.
Thanks @korchev for your response.
I've some simplified test code.
Here i got the same
,with a big text ,inside and outside a grid expansion:
Outside
is wrapped and inside i can't.
This should't be a component issue but a lack of knowledge.
Please paste the code, I can't copy it from a screenshot.
Sorry
@page "/ChatTest"
<p>This might be useful if you want to prevent a large gap from appearing if there is just enough space for the string.
Or, where there is another element that you would not want the break to happen immediately after. This might be useful if you want to prevent a large gap from appearing if
there is just enough space for the string. Or, where there is another element that you would not want the break to happen immediately after</p>
<h3>Test Datagrid</h3>
<RadzenDataGrid PageSize="5" AllowPaging="true" Data="@Data1" TItem="ChatMessage" ExpandMode=DataGridExpandMode.Single ColumnWidth="300px">
<Template>
<div class="row">
<div class="col-12">
<p>
This might be useful if you want to prevent a large gap from appearing if there is just enough space for the string.
Or, where there is another element that you would not want the break to happen immediately after.
This might be useful if you want to prevent a large gap from appearing if
there is just enough space for the string. Or, where there is another element that you would not want the break to happen immediately after
</p>
</div>
</div>
</Template>
<Columns>
<RadzenDataGridColumn TItem="ChatMessage" Property="UserId" Filterable="false" Title="UID" Frozen="true" Width="80px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="ChatMessage" Property="message" Filterable="false" Title="Message" Frozen="true" Width="80px" TextAlign="TextAlign.Center" />
</Columns>
</RadzenDataGrid>
@code {
public List<object> Data = new List<object>();
public List<ChatMessage> Data1 = new List<ChatMessage>();
protected async override void OnInitialized()
{
Data.Add(new ChatMessage
{
message = "Mensagem 1",
UserId = "User 1"
});
Data.Add(new ChatMessage
{
message = "Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts)."
+" Use.flex - row to set a horizontal direction(the browser default), "
+" or.flex - row - reverse to start the horizontal direction from the opposite side.",
UserId="User 2"
});
Data.Add(new ChatMessage
{
message = "Mensagem 3",
UserId = "User 1"
});
Data1.Add(new ChatMessage
{
message = "Mensagem 1",
UserId = "User 1"
});
Data1.Add(new ChatMessage
{
message = "Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts)."
+ " Use.flex - row to set a horizontal direction(the browser default), "
+ " or.flex - row - reverse to start the horizontal direction from the opposite side.",
UserId = "User 2"
});
Data1.Add(new ChatMessage
{
message = "Mensagem 3",
UserId = "User 1"
});
this.StateHasChanged();
}
public class ChatMessage
{
public string message { get; set; }
public string date { get; set; } = DateTime.Now.ToString("yyyy/MM/dd hh:mm");
public string UserId { get; set; }
}
}
Solved.
Cause: "white-space: nowrap;" in ".rz-grid-table td" class.
Solution: Add "white-space: normal;" to an inner div
1 Like