@larseggan yeah, I find it hard to follow code that's not formatted. It might appear ok, so VS probably won't complain. The generated html however might not be right. So when you say Chrome doesn't complain either, I'm wondering if there's some 'healing' going on, and if so, was it as you expect? You're rendering a
<tr> within <MatTableRow> so the generated html will basically be <tr><tr>. So for Chrome to not complain, I'm assuming it simply ignores it? Or does it create a <table> or something? Here's a stack-overflow answer about the nested <tr><tr>.
@larseggan I took the time to copy your code into and make data structures to fake your data, so I could actually run your code, and look at the output. As I originally suspected, your use of
<TR> is not creating a new row at all, as somewhere between MatBlazor, and Blazor, it wraps it in a <table>. This renders it a table inside the first column (Name).
@larseggan You seem set on using tables, but you can't use MatTable in this way. You can either abandon the MatTable for something like this - which is a working version of your code, or you need to re-think what you are trying to achieve. If you need the features of MatTable for filtering, sorting, and paging, but want it to display multiple rows as if it were a single row, then you really can't expect it to work, as discussed above. But working within the limitations means you need fixed width columns, or at least by percentage. That way with each inner table you can ensure the widths are consistent - giving the illusion of table behaviour. Note my first example used fixed widths to achieve this. This is why I also suggested fixed width
<div> elements in my first response. I hope this helps!
Hello all, I am trying to figure out how to call a method in the code behind when the CurrentPageChanged action is triggered. I would like to resubmit my query to my webservice and have a new result returned for display. I cannot find any examples on this and have tried just about everything. TIA
@mariposaben Could you give us a little more detail? I've just had a look through MatBlazor to find you're referring to a MatTable. Its a newer feature, and although this fiddle doesn't seem to work, the code is actually correct. Note the parameter setup in MatTable
CurrentPageChanged="@pageChanged" where the @code block contains a simple Action<int> that you might want to put a breakpoint in, to see it work: void pageChanged(int newPageNumber){ this.newPageNumber = newPageNumber; this.StateHasChanged(); }. Hope this gets you working again.
Hi all, is there a way to configure MudBlazors TextField coloring? Because if I use the Textfield for example on the AppBar, the coloring of the outlining, label and label background just don't work well together with the primary color of the app bar.
Here is an example of what I mean. The label is surrounded with a white background and if you click into the textfield outlining has the same color as the app bar.
https://try.mudblazor.com/snippet/mumblYPwnVFFCZWL
@Simon-Miller And apologies for the lack of detail. I realize after rereading that I should have at least provided the name of the component with that property.
@mariposaben You're welcome, and for anyone else listening - the fiddle with the example in question, does work against latest pre-release version of MatBlazor. Note also, that when I defined the
Looking at the source code history, Eduardo Naretto introduced this feature nearly a year ago (25/11/2020) and is not featured in the current stable release 2.8 - When's the official 2.9 guys? Will it be a Merry Christmas and a happy new year??
<MatTable> I explicitly set a couple of parameters ShowPaging="true" PageSize="3" to make the intention of seeing the paging controls, as well as reducing the page size to force the small amount of cars available to be listed in pages. This is so when clicking on any active paging control, the callback in question CurrentPageChanged="@pageChanged" could be triggered!Looking at the source code history, Eduardo Naretto introduced this feature nearly a year ago (25/11/2020) and is not featured in the current stable release 2.8 - When's the official 2.9 guys? Will it be a Merry Christmas and a happy new year??
<table id="myTable" class="table table-striped table-class" style="width:100%">
<thead>
<MatSortHeaderRow SortChanged="@SortData">
<MatSortHeader SortId="Area">Area</MatSortHeader>
<MatSortHeader SortId="Topic">Topic</MatSortHeader>
<MatSortHeader SortId="Material">Material</MatSortHeader>
<MatSortHeader SortId="Lesson">Lesson</MatSortHeader>
<MatSortHeader>Option</MatSortHeader>
</MatSortHeaderRow>
</thead>
<tbody>
@if (areas != null)
{
@foreach (var area in areas)
{
@if (area.Topics != null)
{
@foreach (var topic in area.Topics)
{
@if (topic.Materials != null)
{
@foreach (var material in topic.Materials)
{
@if (material.Lessons != null)
{
@foreach (var lesson in material.Lessons)
{
<tr>
<td>@area.AreaName</td>
<td>@topic.TopicName</td>
<td>@material.MaterialName</td>
<td>@lesson.LessonName</td>
<td>
<MatIcon>add_circle_outline</MatIcon>
<MatIcon>remove_red_eye</MatIcon>
</td>
</tr>
}}}}}}
}}
</tbody>
</table>How achive this is Mattable
How Use Matpaginator in Html table
@novfal It looks like you're trying to filter your data before you render rows. If you're going to be intelligent about the data you want to render, then you need to filter your incoming data (assume from a database) probably using a Linq query of some sort instead of all the foreach loops. Once you've got your filtered list, you can pass that on to a
<MatTable> for displaying. If that's going to be a common feature in your project, and you want to make a re-usable component (what I've done commercially) then you can really go to town! I included a parameter called FilterFunc of type Func<List<T>, List<T>> where I allow you to pass the filtering function to the custom table component. It would be nice if that were already build into MatTable but there you go. Perhaps we'll see that in a future release? - As for the second part of your question, the pagination is part of the MatTable component, so can't be used separately. But given what I have already suggested, you can pass your filtered data to a MatTable and benefit from the built-in pagination by including the ShowPaging="true" parameter.
@novfal here's a bit of pseudo code for the filtering that I was thinking of:
var filteredData = incomingData.Where(area => area.Topics != null && area.Topics.Count > 0 && area.Topics.Any(topic => topic.material != null && topic.meterial.Count > 0 && topic.material.Any(material => material.Lessons != null && material.Lessons.Count > 0))). Something like this could replace all that markup logic, leaving your markup to concern itself with rendering a @context that a MatTable gives you (each row). Hope this helps?
@dave0292 something like this ?? A
<MatCard> just renders out a <div> with some pre-defined css classes. The content is what ever you want it to be, as you've no doubt figured out. But all MatBlazor components (as far as I know) all include this: [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object> Attributes { get; set; }, and therefore captures things that are not specifically supported, and renders them to the <div>. So in the example, you can see I've exploited the html @onclick= to make the whole div including your rendered content, something I can click on. To visually aid in this, I also added a css style to make the mouse pointer (I hate calling it a cursor) appear as a pointer, as you would expect with a button or a link. Hope this helps.
@cgrundem Different components use different CSS classes to provide default styling. Many components inherit their font size, so at least are defaults for their html element type. MatBlazor provides a MatTheme but I don't think that's what you're after. The notion of a font-size being measured in REMs or EMs implies that setting the font size on the root
<html style="font-size: 24px;"> will affect the default font size, and so many elements will be affected. But not all. So you might want to consider some other options, like simply setting the zoom level for the page. But literally everything will get larger or smaller, and pixels won't measure in on-screen pixels when you go down that road. So sadly, there's no quick fix for this. Commercially speaking, I've overriden some css classes used by some labels as they don't seem to be 100 consistent between components. But some will work with you, for example, on a MatTextField, if you use a label, it floats above using css classes, and its font-size appears smaller. It works like this: .mdc-floating-label--float-above { transform: translateY(-106%) scale(0.75); }, so the <html> font-size idea should affect it. That's about as much as I can offer you - no easy fix, but this might get you somewhere towards where you're trying to get to?
@PKeeneATX I'm not aware of that issue myself. I know the scrollbar disappears when you open a modal popup: When closing, the scrollbar is not restored - at least, in older versions of MatBlazor. I had to make a work-around that removed a CSS class being applied to the
<body> as I recall, with a little JS interop. Here's the javascript: function makeWindowScrollbarVisibleIfNeeded(): {
document.querySelector('body.mdc-dialog-scroll-lock')?.classList.remove('mdc-dialog-scroll-lock');
} - If you try calling this after you've called your api, it might be a work-around?
@mtrevena
Did you get any further on your row height issue? I have the same issue: I want to make the row height in my MatTable smaller, but I have not yet figured out how. I can change font size and color, background color and padding around my table using style, but still not the row height. Any tips anyone??
Did you get any further on your row height issue? I have the same issue: I want to make the row height in my MatTable smaller, but I have not yet figured out how. I can change font size and color, background color and padding around my table using style, but still not the row height. Any tips anyone??
Hello all,
I tried to use MatVirtualScroll already weeks ago and there was already my problem that the examples on the MatBlazor website were not working. They were not working for me in my project either because the Nuget packages were not up-to-date back then. Meanwhile that got solved and they are working so far: https://blazorfiddle.com/temp/f72bef73-1d8f-400d-8459-368deff689aa. Now I have the next issue (in the example on the MatBlazor website (examples) and the same in my project, see https://blazorfiddle.com/temp/f72bef73-1d8f-400d-8459-368deff689aa): If I want to change <MatVirtualScroll style="height: 500px;" ItemType="string" Items="@items" ItemHeight="50"> into <MatVirtualScroll style="height: 100%;" ItemType="string" Items="@items" ItemHeight="50"> or <MatVirtualScroll style="height: 100vh;" ItemType="string" Items="@items" ItemHeight="50">, the items are not or only partially displayed. I think the problem was already described and bugfixed here: SamProf/MatBlazor#696. If I look into the current BaseMatVirtualScroll.cs, it still looks wrong there. Can you please look into it? I have tried with CSS, but I could not solve it with CSS only. I'm going to switch back to my old and own solution.
I tried to use MatVirtualScroll already weeks ago and there was already my problem that the examples on the MatBlazor website were not working. They were not working for me in my project either because the Nuget packages were not up-to-date back then. Meanwhile that got solved and they are working so far: https://blazorfiddle.com/temp/f72bef73-1d8f-400d-8459-368deff689aa. Now I have the next issue (in the example on the MatBlazor website (examples) and the same in my project, see https://blazorfiddle.com/temp/f72bef73-1d8f-400d-8459-368deff689aa): If I want to change <MatVirtualScroll style="height: 500px;" ItemType="string" Items="@items" ItemHeight="50"> into <MatVirtualScroll style="height: 100%;" ItemType="string" Items="@items" ItemHeight="50"> or <MatVirtualScroll style="height: 100vh;" ItemType="string" Items="@items" ItemHeight="50">, the items are not or only partially displayed. I think the problem was already described and bugfixed here: SamProf/MatBlazor#696. If I look into the current BaseMatVirtualScroll.cs, it still looks wrong there. Can you please look into it? I have tried with CSS, but I could not solve it with CSS only. I'm going to switch back to my old and own solution.
@maritaadal @mtrevena The MatTable supports adding a css class name for both the table, and each Table row it renders. So something like
This should look terrible! But I'm sure you'll be happy with the result :-)
<MatTable Items="@cars" RowClass="custom-height"> is how you inject the change. However, by default, each row is given a height of 48px. So you need to override that too. tr.custom-height {
height: auto !important;
}
tr.custom-height td {
padding: 0px 0px;
line-height: 1rem;
}This should look terrible! But I'm sure you'll be happy with the result :-)
@maritaadal The MatPaginator concerns itself with pages; what you're asking sounds like a separate concern, but nothing you couldn't add yourself. Simplest would be to just add a
<p>@numberOfRecords</p> where you know that information because of the list of entities you're giving to the MatTable. You could place it inside a MatTableHeader? This means you've do something like <MatTable ...> <MatTableHeader><tr><td>rows: @myList.Count</td></tr> but you'd ideally pad the TR with as much colspan as necessary, because you've not provided any headers yet!? Not that the header allows you to put in multiple header rows? Hence, the need for a <tr/>. Hope this helps.
@Christian-Oleson Any idea what's happening with #696 - over the last year you've been the most active MatBlazor code contributor on Gitter (that I can see), so hoping you might be able to give us some insight?
Hello,
Can anyone help me on how to bind a list of item on a MatList ?
<MatList SingleSelection="true" @bind-???>
@foreach (var it in ListManager)
{
<MatListItem Value="@it">
@it.FirstName - @it.LastName
</MatListItem>
}
</MatList>I would like to get the selectedvalue.
Thanks
Ive heard nothing from Vlad in a while (since last release).
@Kattabomane_gitlab I've just had a quick look at the code, and it doesn't support binding a value. So currently, your solution involving a
foreach is correct. However, there's nothing stopping you creating your own component to wrap this functionality into say Kattabomane.MatList You could inherit from MatList and provide your own rendering. There's very little to what's in MatList: <ul class="@ClassMapper.AsString()" style="@StyleMapper.AsString()" aria-orientation="vertical" @ref="Ref" @attributes="Attributes" Id="@Id">
@ChildContent
</ul> So you'd just wrap the @ChildContent with your foreach loop. If you're not so familiar with creating components of your own, with parameters etc, I'd be happy to give you an example.
@Kattabomane_gitlab Given the component initialises some javascript code as a one-off, I can't say if it would be happy with being dynamic. I do know a trick for that, as dirty as it might be - but no point talking about it if you're all good. For anyone else listening, consider also overriding MatListItem if you intend to handle each item from the collection, otherwise you'll have one very specific component that can only really handle a list of a known type, and render the
<li /> of each with known parameter names. That may be agreeable to you in your scenario, otherwise more separation of concerns are necessary, hence the need for your own list item component too.
I'm having trouble scaling my matBlazor application when using different scales and resolutions. How to make, for example, matTextField change its size and font size in accordance with the change in scale. I would be grateful for any links to read. (When I zoom in a browser or open my site on computers with different resolutions - the components look bad)
@aviabunin MatBlazor uses HTML defaults. So text is based on 16px height. If you'd prefer this change, you can always override the CSS defaults. In my own project I've made made inputs (including textarea) use 1REM instead, so in CSS I can use media queries to set the html font size depending on width/height/orientation. This is where Bootstrap steps in, and provides some nice defaults, and the ability to have different layouts based loosely on resolution. But its media queries at the end of the day, and I find professionally, that designers just don't understand scaling fonts (BS4 can do). Lastly, a point about MatBlazor components: Many of them have a
FullWidth property. I've used this in conjuction with bootstrap's grid system which makes for a more controlled and cleaner looking display.
Here's what I've got:
<MatSlider @bind-Value="@_site.FlightDisplayWindowPastInHours"
Step="1" EnableStep="true" ValueMin="0" ValueMax="5"
Markers="true" Pin="true" Discrete="true"
Label="Flight Display Window">
</MatSlider>
@bcraig83_gitlab Hiya. I've just had a quick peek at the code for a
MatSlider and Label isn't what you might be expecting. It actually renders the aria-labelattribute of a div. See here - - so if you want to add a label above, that's your own html. Hope this makes sense.