I use Master Page in my Project.But Master Page contents are not same in all pages.In Home.aspx page it's margin is 0px and in other page isn't. Texts are Bold and Big Size in one page and Small in another Page. Why this occur?
My Master.master page Code :
<body style="margin:0px; text-align: left;">
<form id="form1" runat="server">
<div>
<div class="auto-style1" style="background-color: #3399FF; height: 42px;">
<h2>
<asp:Label ID="homeLabel" runat="server" Text="Home"></asp:Label>
</asp:Label>
<asp:Label ID="file_sharedLabel" runat="server" Text="Files Shared"></asp:Label>
<asp:Label ID="blogLabel" runat="server" Text="Blogs"></asp:Label>
</h2>
</div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
And Two picture of Home.aspx and Members.aspx are
What happens I don't Catch .
Again, it is hard to tell what is going on without the actual HTML from your child pages. However, judging from the picture, you are probably looking for a margin value on a an element between your <asp:ContentPlaceHolder> tags.
It looks like your second page is using a <table> of some sort.
Make sure your table has:
style="margin-top: 0px;"
Or
<table class="noTopMargin"> ...
<style>
.noTopMargin { margin-top: 0px; }
</style>
As for the font-size and font-weight being messed up, it is possible that your second page has a <style> declaration somewhere which is screwing it all up. Also make sure that your browser zoom is the same between both pages.
Related
I have an iFrame inside my index page. This iFrame contains an aspx page with a form inside it, with runat=server.
For some weird reason, anything I add after the iFrame is not being rendered to the page.
I tried adding text, a div, nothing is being added after when I run the page.
Code:
<body>
<asp:Panel ID="Panel1" runat="server" Height="80px">
<iframe name="LogoFrame" id="LogoFrame" src="asp/Logo.aspx"
scrolling="no"
style="border-style: hidden; padding: 0px; margin: 00px; width: 100%; height: 100%"
width="100%"/>
</asp:Panel>
<form id="MainMenu" method="post" runat="server">
<asp:Panel ID="Panel2" runat="server" Height="38px">
<table class="tableMenu" id="MainTable" style="BACKGROUND-COLOR: #e2eded" cellSpacing="0"
cellPadding="0" width="100%" border="0">
<tr class="trMenu2" vAlign="middle">
// Some other things below, including the closing of Panel2 and MainMenu form
When I run and inspect the page...
If I remove the iFrame, the rest of the page renders properly.
What is up with that?
I suspect it's because the iframe tag is self-closing and iframes should not be self-closing. If you replace ' />' with '></iframe>', I think that should resolve the problem.
Seems like the iframe is out of the form tag. But you put the iframe inside a Panel, which is an asp.net tool. You can try Removing the panel, or moving the code inside the form tags.
I know this question has been asked many times, but I didn't seem to find any solution that I can understand online. Most says using javaScript and css but I don't really know how to implement that.
I'm using visual studio and i have a master page and several other content pages. On the master page I have a link that redirects me to one of these content pages using
"a href = pages.aspx"
Since the content page uses a SQL query to retrieve data so it takes a very long time. I would like to show a loading spinner or progress bar or even just a text saying "loading..." while the page loads.
Are there anyway to do this?
I also thought about using a label which is only visible when the link is clicked, and goes invisible when the page loads. Is there a way of doing this?
Thanks!
An exact situation with detailed code and explanation, where a loading image is shown on loading of an asp.net page can be seen at following URL : Show Loading Image when Page first Loads.
This has detailed explanation with full working code as well as a link to demo page. You can ask me if you have any questions regarding this sample.
To verify that the loading image shows up in above sample you can simply go to this URL : Loading Image when Page first loads
Another very simple approach with tested/tried sample code is as explained below.
You will need jquery in your aspx page for this to work.
There are three scenarios in which you would like to show a loader element in an aspx page and they are:
On button click that does a non-ajax postback
hyperlink click that navigates to another page
on button click that does an ajax postback
In first two of above scenarios, all you need to do is hookup their client click event with a JavaScript method of ShowProgress. This method shows a popup div that has an animated image in it.
In the last scenario where an ajax postback is done, an UpdateProgress control is used so it automatically hides once the ajax postback completes.
The loader popup is styled to show at center of page in a modal manner'; these styles can be found in the head section of markup pasted below. You can modify some of these styles like border or background-color and also you can substitute any animated image in place of loading.gif.
I tested the markup below with a Page PageTakingLongToLoad.aspx that took 20 s to load the first time it rendered, and with ajax/non-ajax postbacks that took 10 s to complete, and in both cases the loader displayed perfectly as expected.
Markup of Page from which a loader is shown
<%# Page Language="C#" AutoEventWireup="true" CodeFile="InitialPage.aspx.cs" Inherits="InitialPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modal {
position: fixed;
top: 0;
left: 0;
background-color: lightgray;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading {
font-family: Arial;
font-size: 10pt;
border: 5px dashed #f00;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
margin: 0 auto;
text-align: center;
padding-top: 35px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<div class="loading">
<div>
Loading. Please wait.<br />
<br />
<img src="loading.gif" alt="loading" />
</div>
</div>
Link To Another Page
<br /><br />
<asp:Button ID="btnPostBack" runat="server" OnClientClick="ShowProgress();" OnClick="btnPostBack_Click" Text="Do Long Process without Ajax" /><br /><br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Button ID="btnAjax" runat="server" OnClick="btnPostBack_Click" Text="Do Long Process with Ajax" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="loading" style="display: table">
<div>
Processing. Please wait...<br />
<br />
<img src="loading.gif" alt="loading" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.css("vertical-align", "middle");
loading.css("display", "table-cell");
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
</script>
</form>
</body>
</html>
I have modified my master page to move the site collection title from the body, to be inside my upper suite bar. So I move the following h1 div code to be inside the Suite bar DIV as follow:-
<div id="suiteLinksBox">
<SharePoint:DelegateControl id="ID_SuiteLinksDelegate" ControlId="SuiteLinksDelegate" runat="server" />
</div>
<h1 id="pageTitle" class="ms-core-pageTitle" style="color:white;float:left">
<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">
<SharePoint:SPTitleBreadcrumb
runat="server"
RenderCurrentNodeAsLink="true"
SiteMapProvider="SPContentMapProvider"
CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">
<PATHSEPARATORTEMPLATE>
<SharePoint:ClusteredDirectionalSeparatorArrow runat="server" />
</PATHSEPARATORTEMPLATE>
</SharePoint:SPTitleBreadcrumb>
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
<SharePoint:AjaxDelta BlockElement="true" id="DeltaPlaceHolderPageDescription" CssClass="ms-displayInlineBlock ms-normalWrap" runat="server">
<a href="javascript:;" id="ms-pageDescriptionDiv" style="display:none;">
<span id="ms-pageDescriptionImage"> </span>
</a>
<span class="ms-accessible" id="ms-pageDescription">
<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" />
</span>
<SharePoint:ScriptBlock runat="server">
_spBodyOnLoadFunctionNames.push("setupPageDescriptionCallout");
</SharePoint:ScriptBlock>
</SharePoint:AjaxDelta>
</h1>
The result is that the Site title (in my case the Dicusion forum) will be on the right side of the screen although i have defined float:left for the h1 div, so is there a way to move it to the left just beside the logo ?
Can anyone advice please, if he know how to do it ?
pageTitle {position: absolute; left: 400px; top: 30px} will work fine
i set some css rules and html tags, that looks desirable in the design view. But when a child form of the masterpage loads the page, it looks different. Can a child css rules dominate the properties of a parent css rules.
style type="text/css">
#container{position:relative;}
img#border{position:absolute;
}
#placeH{position:absolute; left:344px;
top: 325px;
height: 168px;
width: 708px;
bottom:287px;
}
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<div align="center" id="container">
<asp:Image ID="Header" runat="server" ImageUrl="~/header.png" Width="1196px"
Height="280px" />
</div>
<div id="border">
<asp:Image ID="Image1" runat="server" ImageUrl="~/border.png"/>// the border
that i try to set here appears fine in the masterpage design view..but on the childs
design view,,it appears at the bottom left of the page
</div>
<div id="placeH">
<form id="form1" runat="server">
<asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</form>
</div>
</body>
the only thing that I can see from here is that. You have some CSS that may not behave as you expect.
img#border{position:absolute;}
This will apply to an <img/> tag with the id="border". In the above HTML, you have an img inside a div with an id="border. You CSS for this should look something like.
div#border > img { postition:absolute; } if you want it applied to the image only.
or
#border { position:absolute; } if you want it applied to the whole div.
It is actually quite hard to see in the above HTML with the snippets. If the above does not solve it, paste the whole thing for me.
I think you should change the style of placeH into this.
#placeH{
position:absolute;
left:344px;
top: 325px;
height: 168px;
width: 708px;
}
^^
And yes, css from master page is applied for the child page.
i have 6 content place holder in my master page.
i need to set the background color [body] for all my content place holder in my master page to light gold color. so that all my content page wil content this color[body]
how do do it
The best way would be css:
body {
background: #FFD700;
}
As an alternative to Dave's solution, you could have a div at the top level inside your placeholders:
<asp:Content ID="first" ContentPlaceHolderID="_firstContainer" runat="server">
<div class='content'>
// do presentation
</div>
</asp:Content>
With css:
.content{
background: #FFD700;
}
You could wrap each content placeholder in a div in the master page then style each div so that the background colour is light gold.
<div class="goldcontent">
<asp:ContentPlaceholder ID="Content1" runat="server"></asp:ContentPlaceholder>
</div>
<%-- other controls --%>
<div class="goldcontent">
<asp:ContentPlaceholder ID="Content2" runat="server"></asp:ContentPlaceholder>
</div>
<%-- etc --%>
Then in your css file
div .goldcontent
{
background-color: # FFD700;
}