abp.io landing page of blazor page loading and loading.
There is no error shown in the blazor application. HttpApi.Host projects work just fine. I have already upgraded Visual Studio 2022 Version 17.2.0 Preview 4.0. I have run the tutorial project without any problem.
Here's my index.html page
<!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>ListTrader</title>
<base href="/" />
<!--ABP:Styles-->
<link href="global.css?_v=637843235595560988" rel="stylesheet" />
<link href="_content/Volo.Abp.AspNetCore.Components.Web.LeptonTheme/styles/lepton6.css" rel="stylesheet" id=LeptonStyle />
<link href="main.css" rel="stylesheet" />
<!--/ABP:Styles-->
<link href="DecisionTree.ListTrader.Blazor.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
</head>
<body class="abp-application-layout">
<div id="ApplicationContainer">
<div class="loader">
<div id="cover-spin"></div>
</div>
</div>
<!--ABP:Scripts-->
<script src="global.js?_v=637843235597089265"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<!--/ABP:Scripts-->
</body>
</html>
Here's my logfile from HttpApi.Host projects.
It was the radzen script error. We remove it, and it works fine.
Related
I'm tring to add a custom style sheet to one of my page without affecting the others
I have tried this bu it seems to be the wrong way since it's not working
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - RAZCA</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/RAZCA.styles.css" asp-append-version="true" />
#*<link rel="stylesheet" href="~/css/mytyleSheet.css"/>*#
<asp:contentPlaceholder id="head" runat="server" />
</head>
<asp:content contentplaceholderid="head" runat="server">
<link rel="stylesheet" href="~/css/mytyleSheet.css" />
</asp:content>
<div>
<h1>This is services page</h1>
</div>
I'm learning NodeJS, and I'm having trouble loading the CSS. It loads with live server, but not found with localhost.
Also doesn't load the JS file. I need to do the script in the html with tag.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Raleway:400,500,500i,700,800i"
rel="stylesheet"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>My House Rent</title>
</head>
<body>
...
<h1>Index</h1>
<script>
$(document).ready(function () {
$(".navbar-light .dmenu").hover(
function () {
$(this).find(".sm-menu").first().stop(true, true).slideDown(150);
},
function () {
$(this).find(".sm-menu").first().stop(true, true).slideUp(105);
}
);
});
</script>
<!-- <script src="./javascript.js"></script> -->
</body>
</html>
Print:
Explorer:
In my asp.net mvc web application I have a razor layout page with a partial view #Html.Partial("_HorizontalNavbar") in it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="#Url.Content("~/Content/kendo/2020.2.513/kendo.bootstrap-v4.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/angular.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
</head>
<body class="k-content">
#Html.Partial("_HorizontalNavbar")
<main>
<div class="container">
#RenderSection("featured", required: false)
#RenderBody()
</div>
</main>
</body>
</html>
For the partial view I do not need all the css that is referenced in the layout page; actually it interferes with the css that is inside the partial view.
Is there a way to setup a partial view so that it is not affected by the css of the layout page?
Any help will be gratefully appreciated.
I want to access .css file in FTL for generating PDF but I not able to see the effect in PDF.
I tried both ways
<link rel="stylesheet" href="../font/fonts.css"/>
<link rel="stylesheet" href="../stylesheets/global.css"/>
and
<link rel="stylesheet" href="/font/fonts.css"/>
<link rel="stylesheet" href="/stylesheets/global.css"/>
My folder location is, and Currently, I am using Liferay DXP
META-INF/resources/font/fonts.css
META-INF/resources/stylesheets/global.css
code is below
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="key, words"/>
<meta name="description" content="Website description"/>
<meta name="robots" content="noindex, nofollow"/>
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1"/>
<link rel="stylesheet" href="../font/fonts.css"/>
<link rel="stylesheet" href="../stylesheets/global.css"/>
</head>
<body>
<section id="wrapper">
<section id="mainCntr">
<article class="objectBox">
<div class="logo">
<img src=""/>
</div>
<div class="text">
<h2>Objects in <br/> this document <br/> are simpler <br/> than they seem.</h2>
</div>
</article>
</section>
</section>
</body>
</html>
Can anybody tell me the right approach to get effect fonts.css and global.css in FTL to generate PDF?
Finally, we applied inline CSS for whole pdf file code on each and every lines as per our requirements.
Remove below to lines from the pdf file code.
<link rel="stylesheet" href="../font/fonts.css"/>
<link rel="stylesheet" href="../stylesheets/global.css"/>
My CSS doesn't work anymore since I'm using angular4.
Currently building the base template of the app, I've somes difficulties with the CSS which is not applying correctly on DIVS because of the generated Component DOM element of Angular.
This is what I want (1)
<div class="page-container ">
<div class="page-content-wrapper">
<div class="content">
Content here
</div>
<div class="container-fluid container-fixed-lg footer">
Footer here
</div>
</div>
</div>
This is what I have (2)
<div class="page-container ">
<div class="page-content-wrapper">
<div class="content">
<router-outlet>
Content here
</router-outlet>
</div>
<ae-footer-composant>
<div class="container-fluid container-fixed-lg footer">
Footer here
</div>
</ae-footer-composant>
</div>
</div>
This is my index.html
<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta charset="utf-8" />
<title>Pages - Admin Dashboard UI Kit - Blank Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<link rel="apple-touch-icon" href="pages/ico/60.png">
<link rel="apple-touch-icon" sizes="76x76" href="pages/ico/76.png">
<link rel="apple-touch-icon" sizes="120x120" href="pages/ico/120.png">
<link rel="apple-touch-icon" sizes="152x152" href="pages/ico/152.png">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta content="" name="description" />
<meta content="" name="author" />
<base href="/">
<!--[if lte IE 9]>
<link href="assets/plugins/codrops-dialogFx/dialog.ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!-- jQuery -->
<script type="text/javascript" src="/assets/plugins/jquery/jquery-1.11.1.min.js" ></script>
</head>
<body class="fixed-header">
<app-root></app-root>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="/assets/plugins/pace/pace-theme-flash.css" />
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrapv3/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/assets/plugins/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="/assets/plugins/jquery-scrollbar/jquery.scrollbar.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/select2/css/select2.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/assets/plugins/switchery/css/switchery.min.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/assets/pages/css/pages-icons.css">
<link rel="stylesheet" type="text/css" href="/assets/pages/css/pages.css" class="main-stylesheet"/>
<!--<link rel="stylesheet" type="text/css" href="/assets/pages/condensed/css/pages.css" class="main-stylesheet"/>-->
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap3-wysihtml5/bootstrap3-wysihtml5.min.css"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-tag/bootstrap-tagsinput.css"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/dropzone/css/dropzone.css"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-datepicker/css/datepicker3.css" media="screen">
<link rel="stylesheet" type="text/css" href="/assets/plugins/summernote/css/summernote.css" media="screen">
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" media="screen">
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-timepicker/bootstrap-timepicker.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="/assets/plugins/jquery-datatable/media/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/jquery-datatable/extensions/FixedColumns/css/dataTables.fixedColumns.min.css"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/datatables-responsive/css/datatables.responsive.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/assets/css/style.css"/>
<link rel="stylesheet" type="text/css" href="/assets/elium-style/css/elium.css"/>
<link rel="stylesheet" type="text/css" href="/assets/elium-style/css/pages.css"/>
</body>
</html>
This is my app.component.html
<!-- START PAGE-CONTAINER -->
<div class="page-container ">
<!-- START HEADER -->
<ae-header-composant></ae-header-composant>
<!-- START PAGE CONTENT WRAPPER -->
<div class="page-content-wrapper">
<div class="content">
<router-outlet></router-outlet>
</div>
<ae-footer-composant></ae-footer-composant>
</div>
<!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTAINER -->
<ae-quickview-composant></ae-quickview-composant>
<ae-overlay-composant></ae-overlay-composant>
<ae-css-composant></ae-css-composant>
My CSS works with the (1), but not with the (2) because of the generated DOM of angular...
I already try the following, but still not working ...
import { Component, OnInit, ViewEncapsulation} from '#angular/core';
#Component({
selector: 'ae-sidebar-composant',
templateUrl: './sidebar-composant.component.html',
styleUrls: ['./sidebar-composant.component.css'],
encapsulation: **ViewEncapsulation.None**,
})
export class SidebarComposantComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Does anyone have an idea ?
Thank's
angular uses webpack . You must have a css loader in your webpack.config.js file .
if right, check if you have a src/style.css file in which you can import other styles.
or you can add your css in webpack.config.js as follow :
"styles": [
"./src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css", // if you have setted up ng-bootstrap ...
]