Tips for appending a new row to the ToolBarContent within a MudTable

I am currently facing a challenge in adding a second row with MudChipSet for my Filter within the ToolBarContent of MudTable. My main concern is ensuring that the first row remains unaffected by this addition. Below is my existing code, and I would appreciate any suggestions on how to successfully incorporate a second row with buttons to enable/disable Filter functions.

<MudGrid Spacing="3" Justify="Justify.Center">
    <MudItem>
        <MudPaper>
            <MudTable Items="@_crashInformations" MultiSelection="true" Filter="new Func<CrashInformation,bool>(FilterFunc1)" @bind-SelectedItems="_selectedItems"
                  Hover="true" Striped="true" Dense="true">
                <ToolBarContent>
                    <MudText Typo="Typo.h6">Test</MudText>
                    <MudSpacer />
                    <MudTextField @bind-Value="_searchString" Placeholder="Search" Immediate="true" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0" />
                </ToolBarContent>
                <HeaderContent>
                    <MudTh>Analyse</MudTh>
                    <MudTh>Bearbeiten</MudTh>
                    <MudTh>Name</MudTh>
                    <MudTh>Crashpointer</MudTh>
                    <MudTh>Date</MudTh>
                    <MudTh>Affected Version</MudTh>
                    <MudTh>State</MudTh>
                    <MudTh>Assignee</MudTh>
                    <MudTh>Fixed Version</MudTh>
                    <MudTh>Fixed Date</MudTh>
                    <MudTh>Description</MudTh>
                </HeaderContent>

Current representation: https://i.sstatic.net/OCusG.png

Desired outlook: https://i.sstatic.net/FddDw.png

c#csshtml-tablemudblazor

Answer №1

ToolBarContent utilizes a flexbox layout. To achieve two rows, you must enable wrapping of flex items and ensure that MudChipSet is on a separate line by instructing it to take up the full width of the flexbox. Additionally, resetting the height property of the flexbox is necessary since it currently has a non-default value set.

<style>
  .mud-table-toolbar              { flex-wrap: wrap;
                                    height: inherit; }
  .mud-table-toolbar .mud-chipset { flex-basis: 100%; }
</style>

Below is the code snippet for ToolBarContent:

<ToolBarContent>
    <MudText Typo="Typo.h6">Test</MudText>
    <MudSpacer />
    <MudTextField @bind-Value="searchString1" Placeholder="Search" Adornment="Adornment.Start"
                  AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0" />
    <MudChipSet MultiSelection Filter>
        <MudChip Text="Chip1" />
        <MudChip Text="Chip2" />
        <MudChip Text="Chip3" />
    </MudChipSet>
</ToolBarContent>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

div containing various images of varying sizes

I am working with a layout that requires 4 images to be displayed together within a container. One image should be larger and positioned on the left, while the other three should be uniform in size and placed next to it on the right. Despite my efforts t ...

htmlcss

Tips for enhancing a table with extra functionality in Angular 6

Hi there! I've created a table using Angular 6 and now I'm looking to enhance it with some extra functionality: Implement an overall table search feature Allow users to sort the table by columns Add a "Page x of n" option for pagination I woul ...

htmlcssangulartypescriptangular-ngmodel

Addressing Layout Problems When I Enlarge the Browser Width

My website is www.adventureswithross.com When the device width is larger than 601px, I have specific requirements: I need the menu and custom header to be seamlessly connected without any spacing in between. To address the issue of space above the custo ...

phphtmlcsswordpress

Substitute the text within the control content

I have a Word template that requires some text to be inserted at specific locations. Although I have already created a header, I utilized only the InnerXml function. It may be more beneficial if I avoid using this function. Below is my code snippet: us ...

c#.netms-wordopenxml

The unusual actions displayed by the initial row of a grid container

In an effort to familiarize myself with front-end development, I took on the challenge of creating a simple calculator. Opting to utilize the grid-layout due to the static nature of the content and my desire for flexibility in button sizes both vertically ...

htmlcssgrid-layout

What are the best methods for efficiently extracting web page content that is nested within HTML pages under the `<body>` tag?

Is there a way to easily extract embedded content like images, PDFs, videos, and documents from HTML web pages without including CSS, CSS background images, or JavaScript? I am in the process of migrating content from an old site to a new site and need to ...

cssxhtml

"How to Align Sliding Images in the Center Across Various Web Browsers

I am trying to adjust the sliding image on my webpage's page banner so that it appears in the center instead of floating to the left or right. Here is the HTML code: <ul class"rslides" id="slides"> <li><img src"image/test.jpg">&l ...

htmlcsscss-floatcss-position

Tips for eliminating the border radius on select box elements within Bootstrap

I am currently using bootstrap v3.3.1 from the standard directory, and I am facing difficulty in removing the border radius from the select box components specifically in Google Chrome. This particular inquiry is unique because: Despite attempting to mo ...

htmlcsstwitter-bootstrap

Adding custom fonts to DOMPDF: a step-by-step guide

First, I moved the dompdf library folder to /dompdf Next, I added a /fonts folder containing Roboto-Black.ttf Then, I created an index.php file <?php // Autoloader inclusion require_once 'dompdf/autoload.inc.php'; // Namespace reference ...

phpcssdompdf

identify external components based on their internal identifiers

Can we target an external element based on its descendant elements? This question arises from the need to apply one stylesheet to two different dynamic pages within the same wrapper. Page 1 <div id="api"> <div class="a"></div> </div ...

csscss-selectors

Array index exceeded boundary in C#

When trying to add items to a ListBox using ListBox.Items.Add(), I am encountering an error indicating that the index is out of bounds of the array. Surprisingly, if I utilize MessageBox.Show() instead of ListBox.Items.Add(), the error does not occur. str ...

c#arrayslistbox

Is there a way to eliminate the white border surrounding this input field? (JSFiddle link included)

http://jsfiddle.net/gn3LL/ .error { background-color: red; } <input id="firstname" class="custom error" name="first_name" type="text" placeholder="" class="input-xlarge"> I am trying to remove the small white border around the inside of the inpu ...

csstwitter-bootstrap

Tips for positioning a text link alongside an image link within a table row using only inline styles

I am struggling to align text and an image link next to each other within a table row. The image keeps moving up and down despite my efforts to use various alignment and display block styles. I am only able to use inline CSS and need it to display correctl ...

htmlcssemailoutlook

Having trouble locating a source for certain outdated code

I am currently in the process of revamping a project that was created a while back by someone else. Despite my efforts, I have been unable to find any information on what the reference for "DMB" is in the code snippet below. Has anyone encountered this s ...

c#asp.net.net

Tips for ensuring v-tabs-items and v-tab-item fill height

I found an example that I am trying to follow at the following link: https://vuetifyjs.com/en/components/tabs#content <v-tabs-items v-model="model"> <v-tab-item v-for="i in 3" :key="i" :value="`tab-${i}`" > < ...

cssvue.jsvuetify.js

A specialized WordPress template that loads just the header and footer

I have encountered a strange issue while trying to create a custom template for WordPress. The index.php file is working perfectly fine - all elements load without any issues. Here is the code in index.php: <?php get_header(); ?> <?php if ( is_ ...

phpcsswordpressheaderfooter

Creating a CSS auto center for elements, with a unique twist

I have a design layout like this: Click here to view the image My auto-centered content is styled with the following CSS: width: 960px; margin: 0px auto; Within this auto-centered content, there is a DIV element that needs to span the full width of the ...

htmlcss

In RESTful WCF, the child class/entity consistently comes back as null

I have a class structure set up like this namespace Eauction { [DataContract(Namespace = "")] public class SaleListJS { public SaleListJS() { this.SaleDataJS = new HashSet<SaleDataJS>(); } [DataMember] public string Aucti ...

c#jsonwcf

Decoding JSON response containing random dates in headers

As I collect stock pricing data, it's presented in this structured format: {"Meta Data": { "1. Information": "Intraday (5min) open, high, low, close prices and volume", "2. Symbol": "IBM", "3. La ...

c#jsonserialization

Adjusting the size of the div both horizontally and vertically in Angular 5 using the mouse cursor

As a beginner in Angular 5, I am looking to achieve horizontal and vertical resizing of a div by dragging with the mouse pointer. Can someone assist me in implementing this feature? ...

cssangular