I have the problem that when I refresh (F5) the page of my Blazor Server App, the stylesheets are loaded much too late, resulting in ugly effects (see screencast here).
I recently upgraded to version 7.1.0 and feel that this problem was not so extreme before.
You can see in the following image that the CSS files are loaded after about 1 second.
I have now tried to combine all these files into one bundle.
// Blazor UI
options.StyleBundles.Configure(
BlazorLeptonXThemeBundles.Styles.Global,
bundle =>
{
bundle.AddFiles("/global-styles.css");
bundle.AddFiles("/blazor-global-styles.css");
bundle.AddFiles("/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/css/bootstrap-gyh.css");
bundle.AddFiles("/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/css/gyh.css");
bundle.AddFiles("/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/css/layout-bundle.css");
bundle.AddFiles("/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/css/abp-bundle.css");
bundle.AddFiles("/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/css/blazor-bundle.css");
//You can remove the following line if you don't use Blazor CSS isolation for components
bundle.AddFiles("/GetYourHouse.Blazor.styles.css");
}
);
This seems to solve the problem, but now the files are loaded twice. First in the global bundle and then again separately as CSS files.
How should I do this correctly?
Thanks, Adrian
I have selected in the configuration that the phone number must be verified.
When I change the phone number in the profile and then press "submit", the email address must first be verified again before I can verify the phone number (but I did not change the email address and it was already valid before).
Workaround (but not clear for the normal user): Reload the page, then the verify button appears at the right place.
Since this is a bug, I wish my number questions would not be charged (that's why I posted it on GitHub first).
If the user enters an invalid phone number in the profile under "Personal info" and does not confirm it there, he will not be able to login the next time. Reason for this: The phone number has to be verified, but this is not possible with a wrong number and the text field for this is readonly.
Hint: The settings "Require confirmed phone number" and "Allow users to confirm their phone number" are activated. Very likely there is the same problem with the mail address.
By the way, very useful would be the validation of the phone number (e.g. whether the country code was specified). Otherwise, when using the Twilio module, you run into an exception with an invalid formatting.
Since this is a bug, I wish my number questions would not be charged (that's why I posted it on GitHub first).
We use the two factor authentication. It works perfectly via email and SMS. But we want to force the user to do the verification via phone. He should not see the dropdown "Selected provider". How can I do this?
We have a situation where we want to click again on an already selected menu item to reload that view. But nothing happens when we click on it. In our case this is necessary because we have a grid with orders in this view. If we select an order, the report of this order opens. Afterwards, we want to get back to the order overview and usually do this by clicking on the menu button (which is still selected, though).
Also in the admin area this does not work, there you have to use the "Back" button.
In version 5.3.1 this had worked (Lepton Theme, not LeptonX).
Do you have a solution to this?
Regards, Adrian
This is actually the same question as @balessi75 has already asked here: #3862
I want to use my string resources in a DTO (MyProject.Application.Contracts).
public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
{
var results = new List<ValidationResult>();
var l = validationContext.GetRequiredService<IStringLocalizer<MyProjectResource>>();
var errorMessage = l["Entity:DocumentType:IsRequired:ValidationText"].Value;
...
return results;
}
Unfortunately, I have not figured out how to register the IStringLocalizer correctly. I have read the mentioned documentation and searched for it, but somehow it doesn't work for me. I always get the following error message:
Unhandled exception rendering component: No service for type 'Microsoft.Extensions.Localization.IStringLocalizer`1[MyProject.Localization.MyProjectResource]' has been registered.
System.InvalidOperationException: No service for type 'Microsoft.Extensions.Localization.IStringLocalizer`1[MyProject.Localization.MyProjectResource]' has been registered.
at Microsoft.Extensions.DependencyInjection.ServiceProviderServiceExtensions.GetRequiredService(IServiceProvider provider, Type serviceType)
at Microsoft.Extensions.DependencyInjection.ServiceProviderServiceExtensions.GetRequiredService[T](IServiceProvider provider)
at MyProject.Shared.DocumentDependentBase.Validate(ValidationContext validationContext) in
Can you tell me how to register it in my module?
I have defined my own style according to your instructions (Documentation).
During development (Visual Studio) it works very well. But as soon as I deploy to Azure, the style is not applied correctly (see also [Ticket #3951](https://support.abp.io/QA/Questions/3951/LeptonX-Customization)).
Problem 1: On the MVC side (e.g. login) I could solve the problem by setting the "PreserveNewest" flag on the CSS files in the themes folder. But I guess that this should not be necessary, otherwise you would have written this in the manual. So what could be the reason that everything in the themes folder is ignored on publish?
Problem 2: It does not work at all in the Blazor application. The CSS files are present on the server, but they are not applied . It looks like they are overwritten by the original styles. I have tried a few things with the bundles, but unfortunately without success. In general, I find it interesting that the wrong styles are being loaded at all, since I defined and set a new style.
Example of how it should look (screenshot from development environment):
And this is how it looks when running on Azure:
It looks like the "Light" style is loaded even though I remove that and explicitly set "gyh" as the DefaultStyle.
System.ArgumentException: The type 'MyProject.Blazor.Components.Layout.MyMainHeaderToolbar' is not assignable to service 'Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.MainHeader.MainHeaderToolbar'.
at Autofac.Builder.RegistrationBuilder.CreateRegistration(Guid id, RegistrationData data, IInstanceActivator activator, IResolvePipelineBuilder pipelineBuilder, Service[] services, IComponentRegistration target)
at Autofac.Builder.RegistrationBuilder.CreateRegistration[TLimit,TActivatorData,TSingleRegistrationStyle](IRegistrationBuilder`3 builder)
at Autofac.Builder.RegistrationBuilder.RegisterSingleComponent[TLimit,TActivatorData,TSingleRegistrationStyle](IComponentRegistryBuilder cr, IRegistrationBuilder`3 builder)
at Autofac.ContainerBuilder.Build(IComponentRegistryBuilder componentRegistry, Boolean excludeDefaultModules)
at Autofac.ContainerBuilder.Build(ContainerBuildOptions options)
at Volo.Abp.Autofac.AbpAutofacServiceProviderFactory.CreateServiceProvider(ContainerBuilder containerBuilder)
at Microsoft.Extensions.Hosting.Internal.ServiceFactoryAdapter`1.CreateServiceProvider(Object containerBuilder)
at Microsoft.Extensions.Hosting.HostBuilder.CreateServiceProvider()
at Microsoft.Extensions.Hosting.HostBuilder.Build()
at Microsoft.AspNetCore.Builder.WebApplicationBuilder.Build()
at MyProject.Blazor.Program.Main(String[] args) in D:\Projects\MyProject\src\MyProject.Blazor\Program.cs:line 65
using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.MainHeader;
using Volo.Abp.DependencyInjection;
namespace MyProject.Blazor.Components.Layout
{
[ExposeServices(typeof(MainHeaderToolbar))]
[Dependency(ReplaceServices = true)]
public partial class MyMainHeaderToolbar
{
public string Name = "My Main Header Toolbar";
}
}
Does this still need to be registered somewhere?
I would like to change the colors of the LeptonX theme ('Light' style).
I wanted to override it in blazor-global-styles.css with my colors. But for the pink color (e.g. grid pagination) this doesn't work.
I then saw that the color code #f72585 (pink) occurs in the file bootstrap-light.css in very many places and is not set globally. So of course it is very hard to replace the color everywhere.
Can you make it so that we can just overwrite it? Something like with the variable --lpx-brand.
Or what is the easiest way to do this?
I've grouped several questions (and bugs) together here, as they all have to do with the LeptonX theme with TopMenu layout.
private void ConfigureTheme()
{
Configure<LeptonXThemeBlazorOptions>(options =>
{
options.Layout = LeptonXBlazorLayouts.TopMenu;
});
Configure<LeptonXThemeOptions>(options =>
{
options.DefaultStyle = LeptonXStyleNames.Light;
// Remove unused styles
options.Styles.Remove(LeptonXStyleNames.System);
options.Styles.Remove(LeptonXStyleNames.Dim);
options.Styles.Remove(LeptonXStyleNames.Dark);
});
}
If I remove all styles, then only the DefaultStyle appears. That would be a workaround...
options.Styles.Clear();
And it would be nice if the menu item would be automatically hidden when there is only one option.
I hope to have contributed to an even better theme :-)
Thanks, Adrian