@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.
1 reply
Net 6.0 works with Server Side Blazor without issues, I haven't tested WebAssembly yet^^
Is there any answer?
@emelhu How will you validate your data? Most developers are looking to use model validation, and for that to work, you need something that can 'pick up' from the child input controls that are bound to a model, and therefore provide validation. So when we place a
<ValidationSummary /> component on screen, its always going to be a child of the <EditContext> component. See Here. I assume you just want access to the validation messages from elsewhere. I would say the best bet (I've done this) is to create a method that can take a model, and validate it. This means you have to create an EditContextwhich you also need to tell it to use DataAnnotationValidation. You can then call .Validate()on it, and then it populates itself with validation error messages that you can access.public (bool valid, IEnumerable<string> messages) ValidateModel(object model) {
var validator = new EditContext(model);
validator.AddDataAnnotationsValidation();
if(validator.Validate())
return (true, null);
return (false, validator.GetValidationMessages());
} - I hope this helps.
Has anyone managed to get tooltips to display on the TrailingIcon in the MatTextField components? Seems like a very neat way of having inputs and tooltips organized, but I couldn't find a way to point the tooltip directly to the icon that renders inside the input component
After some time playing around with it, nesting a MatIcon inside of the MatTextField component seems to work
Hey, I've discovered the @bind-ActiveIndex bug in MatTabGroup as explained here : SamProf/MatBlazor#856
I suppose the only recourse in 2022 is to swap to another control suite instead, like MudBlazor?
I suppose the only recourse in 2022 is to swap to another control suite instead, like MudBlazor?
Hey,
May i know how can i change the background color of the selected tab for the below code,
<MatTabGroup>
<MatTab Label="First">
First Content
</MatTab>
<MatTab Label="Second">
Second Content
</MatTab>
<MatTab>
<LabelContent>
Third <MatIcon Icon="@MatIconNames.Close"></MatIcon>
</LabelContent>
<ChildContent>
Third Content
</ChildContent>
</MatTab>
</MatTabGroup>
I would like to run my app locally, but icon is not loading correctly, how could I force it to be in project ?
