I'm developing a mapping application (VS2008 C#) and have my map window (Esri ADF MapControl) displayed within my main aspx.
I'm now compiling a print template with another aspx page which will display and print the current map from the main aspx.
Normally I'd use a Frame tag to dispay the main aspx in my print template however I'm just interested in copying over the map DIV.
You can try do it using jquery:
<!DOCTYPE html>
<html>
<head>
<style>
body{ font-size: 12px; font-family: Arial; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<b>Footer navigation:</b>
<div id="mydiv"></div>
<script>
$("#mydiv").load("mypage.html");
</script>
</body>
</html>
Source: http://api.jquery.com/load/
Related
When I'm adding css classes or changing bootstrap classes on view html in ASP.NET MVC, nothing happens.
CSS stylesheet
.icon {
margin-top: 8px;
border: 1px solid white;
border-radius: 100%;
}
.titleLibrary{
color: gray;
}
View html
<a href="#Url.Action("Index","Home")">
<img src="#Url.Content("~/Icons/bookIcon.jpg")" width="50" class="icon" />
</a>
#Html.ActionLink("Library", "Index", "Home", new { area = "" }, new { #class = "titleLibrary" })
screenshot
but when I use style in html everything is fine
<a href="#Url.Action("Index","Home")">
<img src="#Url.Content("~/Icons/bookIcon.jpg")" width="50" style=" border: 1px solid white; border-radius: 100%;" />
</a>
If you are not clearing the cache, then this may be a reason for not reflecting the updated CSS style in your Index or any other page. So try to clear the cache and then try to update the style. For clearing cache use Ctrl+F5. This will helps to clear the cache. The another solution, if you are keeping the style.css file separately, then please give the reference link at the top the Index page, then refresh and rebuild the page and try again.
<head>
<link href="~/Content/background.css" rel="stylesheet" />
</head>
Hey Ivan have you made sure to render your styles on your view you are using? For instance if you are using a layout page you usually would render your style bundle or sheet at the head of the layout page.
I'll give you an example
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Project System</title>
#Styles.Render("~/content/site-bundle")
#RenderSection("styles", false)
</head>
Here you can see me render my style bundle. In this case you can instead render your stylesheet you have.
Make sure, If that css file is in the same directory (or folder) as the html page, it's as easy as typing in "style.css" with the name of the css file matching whatever you called yours. I just used style.css to simplify things. However, if the css file is in another directory (say inside a folder called css) you would need to type out the path to it relative to the html document. In this case, you'd type "css/style.css". Generally, it's a good idea to store your css files in a css folder.
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
After compiling the entire asp.net project, when the first time the default.aspx page loads, asp.net compiles the pages into Temporary Asp.Net directory. This takes a long time during which I want to show a loading gif to the user.
Using a javascript on the default.aspx does not work as the page is practically not constructed yet. To get around this I created another page, say startup.html, that loads the splash and loads the default.aspx using windows.location.replace function.
This works but seems kludgy, Is there a better way of doing this?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.load {
width: 100%;
height: 100%;
position: fixed;
z-index: 9999;
background: url("images/loading.gif") no-repeat center center rgba(0,0,0,0.25);
}
</style>
<script type="text/javascript" async>
setTimeout(function () {
window.location.replace("default.aspx");
}, 100);
</script>
</head>
<body>
<div class="load" />
</body>
</html>
Looking at some Razor views, I see a lot of times where a <style> tag is added directly in a view (CSHTML) file.
This seems to work fine, but in fact it adds the <style> tag inside the <body> tag, while it should generally be inside the <head> tag.
How would you some inline CSS to a single razor page so that it appears within the <head> tag? Is there a preferred way?
Like this:
Shared/_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
...
#RenderSection("HeadStyles", required: false)
</head>
<body>
...
</body>
</html>
Home/Index.cshtml or whatever other view you need to do this in
#section HeadStyles {
<style>
.custom-style { color: red; }
</style>
}
The reason why inclusion of <style> tags is not recommended inside <body> is because of causing FOUC.
But if your <style> tag applies to content that's after it in DOM, that risk is null.
No browser currently in use has any trouble parsing <style> tags placed in <body>.
Technically, when the browser meets a <style> tag in DOM it:
pauses rendering
reconstructs CSSOM to include the new declarations
rebuilds the already rendered DOM (this is where FOUC happens, if)
carries on with rendering
best variant is -
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- here is page content -->
<script src="scripts.js" type="text/javascript"></script>
</body>
</html>
in this case browser will load in this sequence
styles
content (which will be already styled)
scripts (which will not slow down page rendering in case if scipts are not so little)
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
I created jquery popup dialog and asp.net dropdownlist control in my aspx page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" ></script>
<script src="//code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function () {
$('#div_popup').dialog({
resizable: true,
height: 300,
width: 300,
position: 'center',
zIndex: 10000
});
});
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" type="text/css" />
<style type="text/css" >
#div_dropdownlist
{
margin-left : 50%;
margin-top : 50%;
z-index: -1;
}
#div_popup
{}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div_dropdownlist">
<asp:DropDownList runat="server" ID="ddlList" Width="200px"></asp:DropDownList>
</div>
<div id="div_popup">
My test Popup
</div>
</form>
</body>
</html>
My purpose is to show jquery dialog popup over every other controls when you drag it over other controls.
Everything work well in every browsers but IE6.
I tried css zIndex. But it has no effect in IE6.
So, please let me know how I can make it correct in IE6.
Updated
I changed my div popup style to
#div_popup
{
z-index: 10000;
}
and I had changed my jquery dialog css style to
$('#div_popup').dialog({
...
zIndex: 10000
});
But in IE6, that jquery popup cannot display over asp.net dropdown list box when I drage over that control.
For your reference , here is my_source_code.
As mentioned in http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
There is an ie bug and the select boxes shows on top.
I would hide the select box as suggested or use an shim for ie6.