CSS - How to avoid child being affected

Question

Hello,

I have a data grid and inside this data grid, there is another grid inside of the dropdown. How to only make the font size = 10 of the data grid without affecting the dropdown? I don't want test font size to become 10.

.rz-grid-table td:not(.rz-dropdown-panel > td) .rz-cell-data:not(.rz-dropdown-panel > .rz-cell-data) {  
        font-size: 10px;  
    }  

Answer 1

@Zhi Lv - MSFT I tried a couple of things but couldn't manage :( This shouldn't be this hard or am I CSS disabled? I am trying to avoid affecting RadzenDropDownDataGrid font size.

Here is the Blazor page I am working on:

    <style>  
        #wrapper {   
            overflow: auto;  
            margin-bottom: -1rem !important;  
        }  
      
        #c1 { float: right; }  
      
        #c2 { float: right; }  
      
        #c3 { float: right; }  
      
        h1 { margin-bottom: 0.1rem !important;}  
      
        .rz-grid-table td .rz-cell-data {  
            font-size: 10px;  
        }  
      
        .rz-dropdown-panel {  
            font-size: 15px !important;  
        }  
        .rz-card {  
            margin-bottom: 0.1rem !important;  
            background-color: rgba(33, 150, 243, 0.2);  
        }  
        .rz-data-row:not(.rz-dropdown-panel) {  
            height: 11px !important;  
        }  
      
        td:not(.rz-dropdown-panel) {  
            padding-top: 1px !important;  
            padding-bottom: 1px !important;  
        }  
    </style>  
    @if (DisplayAlert) {  
        <div class="alert alert-success alert-dismissible d-flex align-items-center fade show">  
            <i class="bi-check-circle-fill"></i>  
            <strong class="mx-2">Success!</strong> Your message has been sent successfully.  
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>  
        </div>  
    }  
    <h1>Orders</h1>  
    <RadzenButton Icon="add_circle_outline" style="margin-bottom: 10px" Text="Add New Order" Click="@InsertRow" Disabled="@(_orderToInsert != null)" Size="ButtonSize.Small"/>  
    <RadzenButton IsBusy=@busyDetailExcelExport Text="Export XLS" Icon="grid_on" Click="@(args => ExportExcel())" Class="mb-4 mr-2" ButtonStyle="ButtonStyle.Secondary" Size="ButtonSize.Small"/>  
    <RadzenDataGrid @ref="_grid" AllowFiltering="true" AllowPaging="true" PageSize="20" AllowSorting="true" RowClick="RowClick" ExpandMode="DataGridExpandMode.Single"  
                    Data="@_orders" TItem="Order" EditMode="DataGridEditMode.Single" RowUpdate="@OnUpdateRow" RowCreate="@OnCreateRow" @bind-Value="@SelectedOrders"  
                    ShowExpandColumn="false" ShowPagingSummary="true" AllowColumnResize="true" RowRender="@RowRender" >  
        <Template Context="order">  
            <RadzenCard Style="margin-bottom: 20px">  
                Customer:  
                <b>@order?.Customer?.Name</b>  
            </RadzenCard>  
            <RadzenTabs>  
                <Tabs>  
                    <RadzenTabsItem Text="Order Details">  
                        <div id="wrapper">  
                            <RadzenButton class="rz-background-color-success-light" Icon="add_circle_outline" style="margin-bottom: 10px" Text="Add Order Detail" Click="@(() => InsertDetailRow(order.Id))" Disabled="@(_detailToInsert != null)" Size="ButtonSize.Small"/>   
                            <RadzenButton IsBusy=@busyDetailExcelExport Text="Export XLS" Icon="grid_on" Click="@(args => ExportDetailExcel())" Class="mb-4 mr-2" ButtonStyle="ButtonStyle.Secondary" Size="ButtonSize.Small"/>  
                            <RadzenButton Icon="close" id="c3" style="margin-bottom: 10px;" ButtonStyle="ButtonStyle.Info" Click="@(args => CancelEdits(SelectedOrders.FirstOrDefault()?.OrderDetails))" Size="ButtonSize.Small"/>  
                            <RadzenButton IsBusy=@busySaveDetails Icon="save" style="margin-bottom: 10px; margin-right: 10px" Text="Save Details" id="c2" Click="@(args => SaveRowDetails(SelectedOrders.FirstOrDefault()?.OrderDetails))" ButtonStyle="ButtonStyle.Light" Size="ButtonSize.Small"/>  
                            <RadzenButton Icon="border_color" style="margin-bottom: 10px; margin-right: 10px" Text="Edit Details" id="c1" Click="@(args => EditRowDetails(SelectedOrders.FirstOrDefault()?.OrderDetails))" @onclick:stopPropagation="true" ButtonStyle="ButtonStyle.Dark" Size="ButtonSize.Small"/>  
                              
                              
                        </div>  
                        <RadzenDataGrid @ref="_gridDetail" AllowFiltering="@(_detailToInsert == null)" AllowPaging="true" PageSize="15" AllowSorting="@(_detailToInsert == null)" Data="@order.OrderDetails"  
                                        TItem="OrderDetail" EditMode="DataGridEditMode.Multiple" RowUpdate="@OnUpdateRowDetail" RowCreate="@OnCreateRowDetail" AllowColumnResize="true"  
                                        AllowColumnPicking="true" ShowPagingSummary="true" ColumnWidth="150px" Density="Density.Compact">  
                            <Columns>  
      
                                <RadzenDataGridColumn TItem="OrderDetail" Property="Id" Title="Product ID" Frozen="true" OrderIndex="1"/>  
                                <RadzenDataGridColumn TItem="OrderDetail" Property="ProductCode" Title="Product  Code" OrderIndex="2">  
                                    <EditTemplate Context="orderDetail">  
                                        <RadzenTextBox @bind-Value="orderDetail.ProductCode" Style="width: 100%; display: block" Name="ProductCode"/>  
                                        <RadzenRequiredValidator Text="Product Code is Required!" Component="ProductCode" Popup="true" Style="position: absolute; z-index: 9999;"/>  
                                    </EditTemplate>  
                                </RadzenDataGridColumn>  
                                  
                                <RadzenDataGridColumn TItem="OrderDetail" Property="Vendor.Name" Title="Vendor" Width="200px" OrderIndex="4">  
                                    <EditTemplate Context="orderDetail">  
                                        <RadzenDropDownDataGrid TValue="int"  AllowFiltering="true" AllowClear="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.Contains"  
                                                                Data=@_vendors Count="5" TextProperty="Name" ValueProperty="Id"  
                                                                Class="w-100" @bind-Value="orderDetail.VendorId" Name="vendor" id="vendor"/>  
                                        <RadzenNumericRangeValidator Component="vendor" Min="1" Text="Vendor is Required!" Popup=true Style="position: absolute; z-index: 9999;" />  
                                    </EditTemplate>  
                                </RadzenDataGridColumn>  
....  

Please help me.

Answer 2

Just use the browsers css debugging tools to determine the drop drops unique class namem, then set to size you want

 .rz-grid-table td:not(.rz-dropdown-panel > td) .rz-cell-data:not(.rz-dropdown-panel > .rz-cell-data .some-drop-down-class) {  
         font-size: 12px;  
     }  

Answer 3

Not ideal but this worked for me.

.rz-grid-table td .rz-cell-data {  
        font-size: 10px;  
    }  
  
    td {  
        padding-top: 1px !important;  
        padding-bottom: 1px !important;  
    }  
    .rz-data-row {  
        height: 11px !important;  
    }  
    #popup-vendor .rz-cell-data {  
        font-size: 16px;  
    }  
    #popup-customer .rz-cell-data {  
        font-size: 16px;  
    }