Why does Mudblazor component appear without css? - css

I have installed mudblazor through NuGet and followed the "tutorial" on how to set up mudblazor, I did everything step by step but for some reason the component appears without any css or js. I had to link a css and js file in _host.cshtml:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
but the problem is that it still doesn't seem to work.


Try to clone a MudBlazor template from github, https://github.com/Garderoben/MudBlazor.Templates, it should work out of the box, with all pre-requisites installed. If not, there is something wrong in your environment


Create a razor component named _Imports in the folder of your pages and add the following: #layout MainLayout
In your MainLayout you should have:
<MudThemeProvider/> <MudDialogProvider/> <MudSnackbarProvider/>


In program.cs there is a missing instruction.
add the following line before builder.build() is called.
StaticWebAssetsLoader.UseStaticWebAssets(builder.Environment, builder.Configuration);
I spotted the discrepancy here: https://github.com/MudBlazor/Templates/blob/dev/src/.template.base/server/Program.cs#L9


Empty your browser cache and do a hard reload (press F12 in Chrome, then right-click on the reload icon and select "Empty cache and hard reload"). This will get the new client-side css and js content loaded in your Blazor WASM client.


Make sure you set your base href like below:
<base href="/" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />


Incase anybody encouncer this issue in production environment, the above solutions did not work for me.
This is what works for me, first publish your app to folder then open the published wwwroot folder to copy the _content folder to production.
if MudBlazor works on development then the _content folder contains the MudBlazor files.

Related

Style suddenly does not show after no changes made to it, no error in the console or cmd

I am working with node.js, express and .ejs files. My style did work and i did not change anything about it before it stopped.
Here is the code:
https://github.com/RTweety/todoapp-v1/tree/main/todoapp-v1
I've checked the path and changed both it in the script.js and list.ejs but no response.
I also tried to restore the code to the point when it did work but it did not work.

I've cloned Your Project and You have bug in header.ejs file.
Instead of this line
<link type="text/css" href="css/styles.css" />
You should use <link/> tag like that and that's it ! :-)
<link rel="stylesheet" href="css/styles.css" />
Here You have reference about How To link an external stylesheet
Folder and file structure script.js, header.ejs, terminal:
Output in browser:

How to add a working link to external css file in .NET core 5 project

My project is here
(Look for "Laptop" branch, and "IsolatorUI" internal project)
I need to work with external css file I just saved in wwwroot/css.
I have a schtml Home view file and I would like to use it there.
So far, everything I tried did not work. Even using the site.css which was already there was unsuccessful.
Please ignore the different languague on cshtml HomeView file.
How can I establish a css file link? There are many discussions and suggestions I found on the internet, but none of them worked for me.
It's really frustrating when such simple thing doesn`t work...

Basically there is a disturbing bug with css in .NET framework files, but eventually this code worked for me:
In my View:
#section Styles {
<link href="#Url.Content("~/css/Home.css")" rel="stylesheet" type="text/css" />
}
And in my Layout:
<head>
...
<link rel="stylesheet" type="text/css" href="~/css/site.css" />
#RenderSection("Styles", false)
</head>

Phpstorm Live Edit not working with external css and js files

Phpstorm Live Edit not working with external css and js files.
But when i change html/css/js code in .html (.php) files it is work nice.
Problem only with external files, like:
<link rel="stylesheet" type="text/css" href="css.css"/>
<script src="js.js"></script>

Please make sure that 'Update' in Settings/Build,Execution,Deployment/Debugger/Live Edit is set to 'Auto in (ms)' and 'Restart if hotswap fails' is enabled. Changes in HTML code are updated in the browser automatically regardless of the selected Update mode; but this is not the case for js and css - in Manual mode, you need to click the Update Application button on the debugger tool window or in the main Run menu, or press cmd+F10 to get page refreshed.
See http://blog.jetbrains.com/webstorm/2014/08/live-edit-updates-in-webstorm-9/

jQuery-ui: Differences between local and remote inclusion of stylesheet

When I include a jquery-ui stylesheet for a resizable jquery-ui dialog remotely like so
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css" />
I get this result:
but when I download the very same file and include it locally like so
<link rel="stylesheet" type="text/css" href="./jquery-ui.css" />
I get this result:
Note the missing resize handle in the lower right corner which seems to be the only difference.
What causes the difference?

Jquery-ui references a bunch of image sprite sheets. When including the reference from ajax.googleapis.com the path to the image resolves properly because google hosts those images on their server and has them in the proper location. However in your local copy of the jquery-ui.css i'm guessing there's a good chance your images are not in the proper location.
I'm using jquery ui in a current project and my folder structure is:
Content
images <--- this is the jquery ui sprite iamges folder
jquery-ui.css

go to /jquery-ui.css and make sure the bg paths are path correctly

CSS and images on Master Page

I have this quite popular problem, but have failed to find a solution that works.
Basicly, I am using a Master Page (/Masterpages/Default.master), that includes
<link href="../css/style.css" rel="stylesheet" type="text/css />
And it also includes some images with the same relative linking.
But when I apply the Master Page to content pages (in diffrent folderlevels) the css formating and images is lost.
Is there anyway to dynamicaly solve the folderlevel links to css and images to all content pages using the masterpage?
Thanks in advance
UPDATE:
There is an additional problem. It's tricky to get the output to render correctly in both the browser and in design view in Visual Studio.
I got it to work by using the asp:image solution for the images in the masterpage and by double linking the css in the masterpage, one to make it render in VS and one to make it render correctly browsing the site.
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=ResolveUrl("~/css/style.css")%>" rel="stylesheet" type="text/css" />

best to use:
<link href="<%=ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css />
since this will cope with iis application roots unlike:
<link href="/css/style.css" rel="stylesheet" type="text/css />

You can make your link runat="server" and use tilde mapping to make the CSS path relative to the site root.
<link runat="server" id="siteStyle"
href="~/css/style.css"
rel="stylesheet"
type="text/css" />
The images referenced in the CSS should be relative to the location of the CSS file and should resolve normally once the CSS file itself is included properly. For images in tags on the page, you would need to use the ASP:Image control and, again, use the tilde mapping for a path relative to the root.

Fairly sure this will work
<link href="/css/style.css" rel="stylesheet" type="text/css />
/ takes you to the root of your site

You can use the tilde to get the link to work from anywhere. This will work in Images as well.
<link runat="server" href="~/css/style.css" rel="stylesheet" type="text/css />

Images in CSS are relative to the file they are referenced from.
(An exception from this is the "filter" rule in Internet Explorer which is used for PNG fixes. The images in this case are relative to the HTML document.)

Yes, the problem is that the materpage is using a relative url to load the CSS:
"../css/style.css"
you need to change this to the site root (depending on the location of your css files) something like:
"/css/style.css"
than all the various folder levels can use the same url.

Actually, master pages will rebase css files for you automatically, without you having to add runat="server". Be sure that your css file is located one directory down in the folder you specified.
You can use an absolute path to the css file, but visual studio doesn't seem to render the styles in design view when you do this. Also, sometime you won't know if you're going to be running in a virtual directory, so it's not always ideal to use the absolute path.
Also, use relative links to your image assests from the css file itself - which will work irrespective of how you link to your stylesheet.

You might also be interested in looking into themes and skins.
ASP.NET Themes and Skins Overview

Resources