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
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
UpdatePanel flickers when the user clicks a button that causes a partial postback, when button positioned inside scrollable div element inside that updatepanel (when a div without scrolling does not flicker). Flicker becomes stronger as the number of elements inside a div increases. The question is how to remove flicker.
This issue appear only in IE11 under Windows 10. In other browsers the problem does not recur, even in IE11 under Windows 8.1 everything works fine.
My version of IE11 on Windows 10 (in older IE11 on Windows 10 there was the same bug)
My test page aspx code (I just created an empty web project with this page)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestIEFlicker.aspx.cs" Inherits="IEFlickering.TestIEFlicker" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<div style="width: 1000px; height: 300px; background-color: antiquewhite; overflow-x: auto;">
<div style="width: 1500px; height: 200px; background-color: aquamarine;">
<asp:Button ID="Button1" runat="server" UseSubmitBehavior="true" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Please help, this issue will completely break my corporate application when customers upgrade to Windows 10 and yes they continue to use IE11...
Scrolling in this way is used in many elements of the site, GridView, DetailsViews, etc. It looks very ugly.
Try to set the Page.MaintainScrollPositionOnPostBack Property toTrue.
Code as below:
<%# Page Language="C#" AutoEventWireup="true" MaintainScrollPositionOnPostback="true" CodeBehind="TestIEFlicker.aspx.cs" Inherits="IEFlickering.TestIEFlicker" %>
Edit:
It is the IE Browser default behavior(bug) or it also might be related the AjaxControlToolkit. There has a workaround, you could use JQuery Ajax to call the web methods (or web API), then update the partial html content, instead of using AjaxControl.
Here are some related articles about using JQuery ajax in Asp.net, you could refer to them:
Partial page updates with jQuery AJAX
ASP.net AJAX database operations and partial page update
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.
I'm trying to add several <img> tags to my html document from asp.net codebehind. I looked at Adding Html from Code Behind in Asp.net and it seems to be the solution, but I'm not sure how divcontrol.Controls.Add determines where exactly it's going to start adding html. For all I know, it's at the end of the html. I also found Write Html Markup from code behind in asp.net, but I'm not certain how to use it either.
So here's the html that I'm using. How can I add the img tag I have also included?:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gallery</title>
<script type='text/javascript' src='/jquery-11.0.min.js'></script>
<script type='text/javascript' src='theme-tiles.js'></script>
</head>
<body>
<form id="form1" runat="server">
<h2>Tiles - Justified</h2>
<div id="gallery" style="display:none;">
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#gallery").gallery({
tiles_type: "justified"
});
});
</script>
</form>
</body>
</html>
This is the <img> tag that I need to add between the <div id="gallery"> tag:
<img alt="img1"
src="images/thumbs/tile1.jpg"
data-image="images/big/tile1.jpg"
style="display:none"/>
</a>
This is the code I would use to add the html:
HtmlGenericControl divcontrol = new HtmlGenericControl();
divcontrol.Attributes["class"] = "sxro sx1co";
divcontrol.TagName = "div";
pnlUserSearch.Controls.Add(divcontrol);
Label question = new Label();
divcontrol.Controls.Add(question); // add to the new div, not to the panel
If you're creating client-side HTML (not server controls) then you can just create a Literal, like this:
<div id="gallery" style="display:none;">
<asp:Literal runat="server" ID="MyLiteral" />
</div>
Then, in your code-behind, set
MyLiteral.Text = "<whatever html you want>"
I'm answering your question literally (no pun intended.) There may be better/other ways to accomplish the end goal. Mixing "normal" client HTML with webforms can get a little messy. Webforms wants you to do everything its way.
It might make more sense if your container div (gallery) is a server control instead. If you're looking to add multiple images then perhaps what you need is a Repeater.
To be really honest, if you're not too far down the development path it might be best to take a look at ASP.NET MVC instead.
Another approach:
Just add your image itself as a server control directly in the markup.
<div id="gallery" style="display:none;">
<img runat="server" ID="MyImage" Visible="False"/>
</div>
In your code-behind if you want to display it,
MyImage.Src = "/image url";
MyImage.Visible = true;
Does anyone have any samples of injecting a HTML snippet just after the open BODY tag in an ASP.Net webforms page? The positioning of this code is very specific.
The beginning HTML might look like this:
</head>
<body>
<div id="header">
The resulting HTML should look like this:
</head>
<body>
<div id="new-div"></div>
<div id="header">
This is a scenario where the HTML cannot be manipulated directly, and javascript would do this too late for the additional HTML to be useful. It must be done with server-side code and in place before the HTML makes it to the web browser.
You can do it this way in your aspx markup:
<html>
<head>
</head>
<body>
<%= FunctionTheOutputsString() %>
The <%= is short for Response.Write(), which is a function that writes directly into the page.
With jQuery, you can use prepend() as so:
$(function(){
$('body').prepend('<div id="new-div">Div content</div>');
});
jsfiddle here.
Update: The server-side solution could also be (besides above answer):
<html>
<head>
</head>
<body>
<asp:placeholder id="divPlaceHolder" Visible="False" runat="server">
<div id="new-div">
</div>
</asp:placeHolder>
On Page_Load()...
if(SomeCondition)
divPlaceHolder.Visible=true;
And because non-visible elements aren't rendered, the new-div element will only be displayed if SomeCondition is true