Im using the new angular template, and everytime I make a code change, the view render either underneath, on top of, or beneath the existing view, instead of updating it. Does anyone know why? It didnt do this when I created the project,
but I can't see why it would now.
<mat-toolbar style="background:purple">
<mat-button-toggle (click)="sidenav.toggle()"><i class="material-icons" style="color:white">menu</i></mat-button-toggle>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav #sidenav style="width: 20%;">
<mat-selection-list>
<mat-list-item>Item one</mat-list-item>
<mat-list-item>Item two</mat-list-item>
<mat-list-item>Item one</mat-list-item>
<mat-list-item>Item one</mat-list-item>
<mat-list-item>Item one</mat-list-item>
</mat-selection-list>
</mat-sidenav>
<router-outlet></router-outlet>
</mat-sidenav-container>
<!DOCTYPE html>
<html style="height:100%;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - RemoteTrainer</title>
<base href="~/" />
<link href="~/dist/deeppurple-amber.css" rel="stylesheet" />
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" type="text/javascript"></script>
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
<h1>Hello, world!</h1>
<p>Welcome to your new single-page application, built with:</p>
<ul>
<li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
<li><a href='https://angular.io/'>Angular</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
<li><a href='https://webpack.github.io/'>Webpack</a> for building and bundling client-side resources</li>
<li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
</ul>
<p>To help you get started, we've also set up:</p>
<ul>
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
<li><strong>Server-side prerendering</strong>. For faster initial loading and improved SEO, your Angular app is prerendered on the server. The resulting HTML is then transferred to the browser where a client-side copy of the app takes over.</li>
<li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
<li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular app will be rebuilt and a new instance injected is into the page.</li>
<li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
</ul>
<button mat-fab>Click Me</button>
<mat-slider min="1" max="5" step="0.5" value="1.5"></mat-slider>
For anyone interested, I found the answer to my question elsewhere. The problem is caused by including the browser animation module. Adding oldRootElem!.remove(); underneath oldRootElem!.parentNode!.insertBefore(newRootElem, oldRootElem); in boot.browser.ts fixes the issue by disposing of the old view after appending the new one.
Related
I'm using .NET 7, Visual Studio 2022 and Razor Pages, fresh razor page template project. Something is injecting a suffix b-1cs0j1knof after many of my html tags. This happens even in release/published build. How do I disable this? Nothing comes up when searching online after a few hours so decided to post here. I am sure this is a feature that I could search easily if I knew the name...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SiteName</title>
</head>
<body>
<header>
<nav b-1cs0j1knof>
<div b-1cs0j1knof>
</div>
</nav>
</header>
<div b-1cs0j1knof class="container">
<main b-1cs0j1knof role="main">
<h2>Home Page</h2>
</main>
</div>
<br b-1cs0j1knof/>
<footer b-1cs0j1knof>
<div b-1cs0j1knof>
© 2022 - 2022 SiteName
</div>
</footer>
</body>
</html>
TLDR; If you don't want this feature, add <ScopedCssEnabled>false</ScopedCssEnabled> to your csproj file.
From Reddit.
Those attributes are automatically generated by ASP.NET’s css isolation feature, which is enabled by default. This lets you create a *.razor.css file and add styling specific to your razor file without affecting the rest of the page. ASP.NET will process the css and add attribute selectors matching what you’re seeing on the rendered elements. See https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-7.0
I am making an asp website with bootstrap. I am wondering how do I make all asp button widths the same instead of padding the text with spaces. I created an alternate css file and used the css class tag. am i missing something?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="admin.aspx.cs" Inherits="SCBA.admin" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Admin</title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css"/>
<style>
.box {
border:1px solid grey;
background-color:#d3d3d3;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script src="../Scripts/jquery.min.js"></script>
<script src="../Scripts/boostrap.min.js"></script>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Administration" /> <br />
<asp:Button ID="Button3" runat="server" cssClass="button1" onclick="Button3_Click" Text="Resource" />
</div>
</div>
</div>
</form>
</body>
</html>
Here is my CSS
.button1
{
width: 200px;
}
Depending on which browser you are using, learn to use the browser tools so you can inspect the HTML and CSS elements yourself.
Here are some steps to get you in the right direction:
Look at the Bootstrap documentation for the button classes then override the relevant Bootstrap CSS class in your custom style sheet to change its appearance. Also, do NOT use fixed widths in responsive sites, use percentages. It looks like you are not leveraging the Bootstrap classes at all for this
.NameOfBootstrapButtonClass
{
width: 25%;
}
Move your script links to just before the closing body tag
Remove all inline CSS and CSS links - then from Solution Explorer drag the CSS files you need into the head section of your ASP page. This guarantees your links are correct but only applies if you are using VS
Do not use minified CSS files in development - when deploying you will have all your min versions bundled up for performance. Personally, I comment out much of the bundling in the RegisterBundles method of the BundleConfig class when working locally
If you're building a site you are going to have a lot of redundancy without the judicious use of master pages and user controls
You have no viewport tag in the head so your site will not be responsive in any mobile browser
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you are supporting IE9 and IE8, you need to reference the Modernizr library. You need to give some thought to which browsers you need to support
Remove the xmlns namespace attribute from the html tag
EDIT: I think there is an issue open on this already: http://code.google.com/p/selenium/issues/detail?id=5717
So basically I'm using the Firefox Driver and the div with id="page-content" is causing my selenium test to fail with the error listed in the referenced question: "Element is not currently visible and so may not be interacted with" but another is? I was able to trace the problem down to the fact that that ID has a css style of overflow: hidden Is this a bug, or am I doing something wrong?
I'm using Selenium WebDriver version: 2.33.0.0, Firefox version: 22
The source for the test and website is here: https://github.com/tonyeung/selenium-overflow-issue
For quick reference: the HTML below is my test page. For those of you not familiar with angular, all its doing is displaying an html fragment as a modal whenever you click on add or edit, you can see a live demo here: http://plnkr.co/edit/LzHqxAz0f2GurbL9BGyu?p=preview
<!DOCTYPE html>
<html data-ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Selenium Test</title>
<!-- // DO NOT REMOVE OR CHANGE ORDER OF THE FOLLOWING // -->
<!-- bootstrap default css (DO NOT REMOVE) -->
<link rel="stylesheet" href="css/bootstrap.min.css?v=1">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css?v=1">
</head>
<body>
<div data-ng-controller="MyCtrl">
<span id="added" data-ng-show="added">Added</span>
<span id="edited" data-ng-show="edited">Edited</span>
<div id="page-content" style="overflow:hidden">
<!--<div id="page-content">-->
<div class="employees view">
<button name="addNewEmployee" id="addNewEmployee" class="btn btn-primary" data-ng-click="add()">Add</button>
<button name="editEmployee" id="editEmployee" class="btn btn-primary" data-ng-click="edit()">Edit</button>
<div data-ng-controller="editCtrl" data-ng-include="'app/views/edit.html'"></div>
<div data-ng-controller="addCtrl" data-ng-include="'app/views/add.html'"></div>
</div>
</div>
</div>
<!-- JS scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/0.7.2/angular-strap.min.js"></script>
<script src="app/app.js"></script>
</body>
</html>
According to the Selenium WebDriver source code, an element must not have overflow: hidden as a style. (ref) (UPDATE I just realized that the maintainers have updated the code in the ref I linked to, but that the original 2.33 code did include the overflow: hidden check. Its just been refactored for presumable 2.34.)
So, it looks like unless the maintainers decide against this, you are SOL. But the first step to getting the maintainers to notice the issue is to add an Issue to the official repository, which it looks like you have done.
One possible solution in the meantime if you can't get you developers to help you is to use Javascript to remove the overflow attribute:
driver.executeScript("arguments[0].setAttribute('style', 'overflow: none;')", page_content_element)
And try to run your tests from there.
I'm working on a web interface in ASP.NET. If it matters, I'm using the XHTML 1.0 Transitional doctype.
This website has a masterpage thing going, and that's where the problem came in. When I used a real absolute path for the CSS link in the header, everything was fine. But then when I tried to switch it to tilde notation, all the styling broke.
Here's a fragment of the original master page, which worked fine:
<head>
<title>Account Information</title>
<link href="/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
But then we found out that this account thing is going to be an application that doesn't live on the server root, so we had to make changes.
<head>
<title>Account Information</title>
<link runat="server" href="~/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
Now, those same changes (adding runat="server" and a tilde) worked just FINE everywhere else in the page, but this one didn't. When I looked at the output, it was not resolving the tilde, so the link was actually pointing at "myserver.net/~/css/main.css", which obviously isn't going to work.
Next I tried using ResolveURL, like so:
<link runat="server" href="<% =ResolveURL("~/css/main.css") %>" rel="stylesheet" type="text/css" />
Visual Studio wouldn't even compile that. It didn't even know what ResolveURL meant (as a test, I stuck the same code several other places, including the page title right there next to the link tag, and it worked fine everywhere else).
I did eventually get it to work by giving the link an ID and setting the href in the code-behind:
--Master page--
<link id="StyleLink" runat="server" rel="stylesheet" type="text/css" />
--Masterpage codebehind file--
StyleLink.Attributes.Add("href", ResolveUrl("~/css/main.css"));
But I'm left wondering why I had to spend two hours fighting with this. Why didn't the standard ~ notation work in the first place? I googled around for a while but I couldn't find anything particularly relevant; the closest I could find was a discussion of ~ notation failing when it was in a sub-master page.
This works in the Master Page in front of me right now:
<head runat="server">
<link runat="server" href="~/styles/main.css" rel="stylesheet" type="text/css" />
</head>
For a Page in the root of the application, this translates out to the HTML as this:
<link href="styles/main.css" rel="stylesheet" type="text/css" />
For a Page in a folder off the root, here's what it looks like:
<link href="../styles/main.css" rel="stylesheet" type="text/css" />
(Both pages use that Master, obviously)
Alternative approach
Store the path to the CSS file in the web config, and alter it upon deployment.
You can even use Web Config Transformations to change it automatically based on the build type.
I am guessing that this may be a problem with the scope of the application. In other words when you run <link rel='stylesheet' href='~/css/base.css' id='id' runat='server'> the application may be returning something like this
http://www.mydirectory.com/includes/masterpages/css/base.css
and you want a return something like this
http://www.mydirectory.com/css/base.css
since the ~ gets the application root directory and appends it you may be getting an error on where you master page is if it is not saved in the root directory.
Here's a link to a SO question that I referenced to explain the problem.
slash(/) vs tilde slash (~/) in style sheet path in asp.net
I have no idea why it wouldn't compile other than a possibly unclosed quotation mark in the link tag ie. <link type='text/css" href="..." runat="server" /> notice the single quote in the type vs. the double quote close. I have done that on occasion but I am just guessing here. I checked it on my and dropping in the ~ with a runat server doesn't cause a compile time error for me.
I had links to CSS files in the master page using the following syntax
<link href="~/bm/Styles/Site.css" rel="stylesheet" type="text/css" />
The path resolved correctly in Chrome and Firefox, but not in IE9. The following syntax works fine in all three browsers. Notice the id and runat entries.
<link id="siteCss" runat="server"
href="~/bm/Styles/Site.css" rel="stylesheet" type="text/css" />
Currently, I have a Site.Master page for my MVC app that renders great when run directly from VS2008. It looks like this:
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../../Content/css/layout1_setup.css" />
<link rel="stylesheet" type="text/css" href="../../Content/css/layout1_text.css" />
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
</head>
Unfortunately, when used on my IIS 6.0 server in a "Virtual Directory", the CSS reference fails to load and the page fails to render properly. (By virtual directory, I mean something like http://localhost/MyTestSite where "MyTestSite" is the Virtual Directory created in IIS Manager on the server where the MVC app is installed.)
The MVC app runs fine and the HTML produced from it loads normally, but the server seems to be unable to find the location of the CSS and related images referenced. I find this baffling since it seems to work just fine when run from VS2008.
I did find a workaround to my issue, but I'm not exactly satisfied with the results:
<link rel="stylesheet" type="text/css" href=<%= Page.ResolveUrl(#"~/Content/css/layout1_setup.css") %> />
<link rel="stylesheet" type="text/css" href=<%= Page.ResolveUrl(#"~/Content/css/layout1_text.css") %> />
Using Page.ResolveUrl() feels like a hack to me as it breaks the rendering of the Split and/or Design view of page when editing in VS2008. (And all CSS tags are underlined in green as "not existing".) That said, it renders just fine in both IIS6 and VS2008 when "running".
Is there a better way to fix this problem?
EDIT: My problem sounds like the issue described here: http://haacked.com/archive/2008/11/26/asp.net-mvc-on-iis-6-walkthrough.aspx -- But I already have the fix for the default.aspx.cs file implemented as shown below.
public void Page_Load(object sender, System.EventArgs e)
{
string originalPath = Request.Path;
HttpContext.Current.RewritePath(Request.ApplicationPath, false);
// Setting "false" on the above line is supposed to fix my issue, but it doesn't.
IHttpHandler httpHandler = new MvcHttpHandler();
httpHandler.ProcessRequest(HttpContext.Current);
HttpContext.Current.RewritePath(originalPath, false);
}
<link href="<%= Url.Content("~/Content/css/mystyle.css") %>"
rel="stylesheet" type="text/css" />
Edited:
After giving this some thought I relized that when using the VS 2008 you are probably using debug mode when running the website under "ASP.Net Development Server" And when you deploy to IIS you have probably published the code in Release Mode.
If this is the case then you can try the following:
<% #if DEBUG %>
<link rel="stylesheet" type="text/css" href="../../Content/css/layout1_setup.css" />
<link rel="stylesheet" type="text/css" href="../../Content/css/layout1_text.css" />
<% #else %>
<link rel="stylesheet" type="text/css" href="<%= Url.Content("~/Content/css/layout1_setup.css") %>" />
<link rel="stylesheet" type="text/css" href="<%= Url.Content("~/Content/css/layout1_text.css") %>" />
<% #endif %>
Now with this when you run in Visual Studio 2008 your code completion tools for CSS will work as well as running your website (as a Release version) inside a virtual directory.
John Hartsock is on to something, but the preprocessor commands he is trying to execute does not work as expected in design mode (I think it actually tries to do both). You can instead try to check against a .NET Site property that is available to test if you run in design mode or not (in release configuration, the Site property is not always populated, so you also have to check if it is not null).
Also Visual Studio design viewer does not know of domain and virtual app path, so in the designer you can use / to point to app root.
<% if (Site != null && Site.DesignMode) { %>
<link href="/Content/css/layout1_setup.css" rel="stylesheet"/>
<% } else { %>
<link href="<%= Url.Content("~/Content/css/layout1_setup.css") %>" rel="stylesheet"/>
<% } %>
I am afraid there's no elegant way of doing this. You could perform the following horrible hack to cheat the designer:
<% if (false) { %>
<!-- That's just to cheat the designer, it will never render at runtime -->
<link rel="stylesheet" type="text/css" href="../../Content/css/layout1_setup.css" />
<link rel="stylesheet" type="text/css" href="../../Content/css/layout1_text.css" />
<% } %>
<link rel="stylesheet" type="text/css" href="<%= Url.Content("~/Content/css/layout1_setup.css") %>" />
<link rel="stylesheet" type="text/css" href="<%= Url.Content("~/Content/css/layout1_text.css") %>" />
Personally I never use the designer and would never do something like this in my code but if you really need to have this design view then it could be a solution.
I mean you are working in an ASP.NET MVC project, you should be manipulating html, why care about the design view? Look at the price you should pay just to get the design view working, it's too expensive. It's faster to hit CTRL+F5 in your favorite browser to see the result of your efforts than switching all the time between code and design view.
Maybe this is obvious or I've missed something but this looks like a path issue. You are using relative paths (../../). I believe when you run something in Visual Studio, the application is the root path (ie. default.aspx in your project's main directory would be localhost:port/default.aspx). If a relative path in any page goes up too many directories (ie ../ too many times), it will be ignored and taken from the root of the website (in this case localhost:port/). For example, if your folder structure is like this:
AppRoot
styles (folder)
content (folder)
otherfiles (folder)
myfile.aspx
default.aspx
You can access the content folder from myfile.aspx by using ../content/ or, even though you shouldn't do this, by using ../../content/ This only works if AppRoot is the same as the domain root (ie. localhost:port/content/ and domain.com/content/ are the same folder).
However, if you put those files in another (virtual) folder on your web server (ie. domain.com/virtual == new AppRoot) now ../../content from domain.com/virtual/otherfiles/myfile.aspx will be referring to domain.com/content/, which is incorrect.
I hope this helps.
Just tested the following to make sure it would solve both your problems (enabling design view & resolve properly). Hope it works for you
<link rel="stylesheet" type="text/css" href="~/Content/css/layout1_setup.css" runat="server" />
<link rel="stylesheet" type="text/css" href="~/Content/css/layout1_text.css" runat="server" />