I think I have followed the steps for a previous post about this question. But I get no error but I get an alternating question mark and exclamation point on the display.
There are no errors in the Chrome debugger console. If I hover over these alternating "buttons" I don't get any tooltip or additional information. So it seems that the class has been recognized and the button loaded but there is some kind of error that I cannot determine.
Here is what I have so far
Downloaded and the zip of the FA components
Add link to index.html under wwwroot (this is a client side Blazor
application)
Referenced the classes in my component
<button class="fas fa-angle-double-up">Up</button>
<button class="fas fa-angle-double-down">Down</button>
But this doesn't seem to work. Ideas?
I have tried including the .js from Fontawesome but still no luck
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BreakpointManagement.App</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BreakpointManagement.App.Client.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="css/font-awesome/css/all.min.css" />
<script src="css/font-awesome/js/all.min.js"></script>
<script src="_content/BlazorTable/BlazorTable.min.js"></script>
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
I added all paths, as #JasonD mentioned
added this line at component file
and added these lines at index.html
and voi-la
Related
I'm using react/webpack to run a development server on local 8080. This is something I don't quite understand yet and I've run into this problem before. Bootstrap is being linked in the HTML and is running fine. However, when I link the stylesheet, the console is giving me an error of 404 not found for my stylesheet.
Here is my HTML boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="public/stylesheet.css" />
</head>
<body>
<div id="root">
</div>
</body>
</html>
Index.html and Index.js are at the root level, and so is the /Public directory, which only contains one file: stylesheet.css.
Why is stylesheet.css not loading in the browser when I run the local server and how do I fix this? Thanks.
if your sharing out the public folder with express like so
app.use(express.static(path.join(__dirname, 'public')));
then you do not need to have 'public' in the source.
in other words this
<link rel="stylesheet" href="public/stylesheet.css" />
should be this
<link rel="stylesheet" href="/stylesheet.css" />
I am using semantic ui, and the html works fine on my pc. When I upload it and run my site from the internet, it looks like the normal html is working, but sematic specific functionality is missing. Is it not getting the semantic .css or something? I'm a bit new to this, so if you could help me debug I would be be grateful.
I am using Semantic version 1.8.1.
My html is located relative to all the source files in the same way as the examples which come with the release in the /examples directory. So I access the file relatively such as "../dist/semantic.css"
Here is the head section of the default.htm main html page.
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Spin Boogie</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<link rel="stylesheet" type="text/css" href="kitchensink.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<!-- Used with Tab History !-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.address/1.6/jquery.address.min.js"></script>
<script src="../dist/semantic.js"></script>
</head>
I used JQM's Themeroller to develop a theme for my application. Right now, I'm just trying to get it to work in Chrome.
I have the head of my HTML file set up like so:
<head>
<title>SafeRides</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
and my file director is as follows:
Application/
index.html
themes/
SafeRidesTheme.css
SafeRidesTheme.min.css
images/
Am I just missing something obvious in the layout of my files? If someone could help me realize what's going on here I'd greatly appreciate it.
When using custom theme made by Theme Roller, libraries should be loaded this way.
You should remove jQM defualt style sheet and load jQM structure style sheet before your custom one.
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
I don't know why I get this error when I validate my site, but clearly I am doing something wrong because I get the following error too:
"An body element start tag seen but an element of the same type was already open"
<!DOCTYPE html>
<html lang="en-uk">
<head>
<title> Erasmus+</title>
<meta name="author" content="" />
<meta name="dcterms.rights" content="" />
<meta name="" />
<meta name="keywords" content="" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="" type="text/css" />
<link href="" type="text/css" />
<link rel="stylesheet" type="text/css" href="" />
<link rel="shortcut icon" type="image/x-icon" href="" />
<?php wp_head();?>
<!--[if !IE]><!-->
<style>
</style>
<!--<![endif]-->
<script>
</script>
</head>
<body class="home blog">
It is a wordpress website: www.erasmus-plus.ro
I can't find what I am doing wrong.
Thanks!
Edit: I see that if I remove
<?php wp_head();?>
the error is gone, but isn't it needed for wordpress files?
That's not the complete HTML code. Looking at the source, apparently you have:
<input type='hidden' value='http://erasmus-plus.ro/wp-content/plugins/form-maker' id='form_plugins_url' />
In line 41. That's "displayable" code, so I think it's making that the head part closes and opening the <body> implicitly, and hence complaining when it gets to your explicit tag.
I guess that some stray plugin is misbehaving using wp_head to insert that into your . Try disabling your plugins one by one and you'll probably find the culprit. Probably something related to forms?
I have tried looking through this site and Google'd many options, there are various ideas about saving the state of the UpdatePanel before the post-back, however I am unsure how to implement such a thing.
I have a UpdatePanel within a ASP.NET Page which refreshes a GridView - my code works well. However on the Async Post-back it causes the JQuery CSS to disappear which makes the text boxes look rounded, colour of text etc...
I do not need to add any JQuery events - however just need to know how to add the styling back into the Panel - adding the whole framework back in could also be an option.
I would add the code to my project but its massive - below are my JQuery references on my Site Master:
<!DOCTYPE html>
<html class="ui-mobile">
<head>
<!-- Apple Settings -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Apple Icons -->
<link rel="apple-touch-icon" href="/touch-icon-iphone.png"/>
<link rel="apple-touch-icon" href="/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/touch-icon-ipad-retina.png" />
<link rel="icon" href="/touch-icon-ipad-retina.png" />
<!-- Style Sheets -->
<link rel="stylesheet" href="/themes/Sequencing_App_V2.min.css" />
<link rel="stylesheet" href="/css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="/css/Custom.css" />
<!-- JavaScript -->
<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/javascript/Custom.js"></script>
<script type="text/javascript">
</script>
<script type="text/javascript" src="/js/jquery.mobile-1.2.0.min.js"></script>
<!-- Content Placeholders -->
<title><asp:ContentPlaceHolder ID="page_title" runat="server"></asp:ContentPlaceHolder></title>
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
Can anyone help here?
I appreciate all the help you can offer.
Steve
jQuery mobile adds a lot of extra html elements when you construct it.
These will be lost after a PostBack, and you need to recreate it for the new elements in your UpdatePanel.
If you are using a listview to present your data, you will need to refresh it after the PostBack
<script type="text/javascript">
function handleEndRequest(sender, args)
{
$('table').listview('refresh');
//Refresh any other elements
}
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(handleEndRequest);
</script>