How can I apply CSS to a Web Content Form that is using a MasterPage?
I can't apply Class="" anywhere. :S Any help?
in Web Controls the attribute is CssClass and not Class as it is in HTML Controls
<style type="css/text">
.myClass { font-size: x-large; }
</style>
then
<asp:Label ID="myLabel" runat="server"
CssClass="myClass" Text="This is a WebControl Label" />
as opposed to:
<span class="myClass">This is a HTML Lable</span>
Why can't you?
CSS works in content pages the smae way it works in regular pages.
If you're actually asking how to add CSS rules for the content page, you need to add a placeholder in the HEAD element in the master page, then add CSS rules or files to that placeholder in the content page.
I've never had an issue with this. If it's not rendering, then make sure your path to your CSS file is correct.
Be sure you stylesheet is referenced properly in your web content form.
<link id="link1" rel="stylesheet" href="myStyleSheet.css" type="text/css" runat="server" />
Related
I am using <asp:ScriptManager> and link in master page which require <Form> tag but issue is here that i have included already <form> tags in all the child content pages.
I know i just need to include <form> tag just in master page and remove from all child pages but unfortunately its not possible because there are so many content child pages which connected to this master page and also each child <form> tags contains different classes like horizental inline etc.
So i just want that i just want to include <form> tag only in master page if form tag not exist in content/child page.
If i use both in master and child/content, its showing error, its must 1 form tag.
Master page
<form id="Form2" runat="server" novalidate="" role="form" runat="server" class="form-horizontal">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<h3>Session Idle: <span id="secondsIdle"></span> seconds.</h3>
<asp:LinkButton ID="lnkFake" runat="server" />
<cc1:modalpopupextender id="mpeTimeout" behaviorid="mpeTimeout"
runat="server" popupcontrolid="pnlPopup" targetcontrolid="lnkFake"
okcontrolid="btnYes" cancelcontrolid="btnNo"
backgroundcssclass="modalBackground" onokscript="ResetSession()">
</cc1:modalpopupextender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div class="header">
Session Expiring!
</div>
<div class="body">
Your Session will expire in <span id="seconds"></span> seconds.<br />
Do you want to reset?
</div>
<div class="footer" align="right">
<asp:Button ID="btnYes" runat="server" Text="Yes" CssClass="yes" />
<asp:Button ID="btnNo" runat="server" Text="No" CssClass="no" />
</div>
</asp:Panel>
<asp:ContentPlaceHolder ID="body" runat="server">
</asp:ContentPlaceHolder>
</form>
I just want to use form tag only if not in child page. how can i tackle this situation,
Thanks,
As far as I know, the ASP.NET WebForms do not support multiple form elements with runat="server" attribute. So, there is no work around to this as it is something hard coded into the project.
Anyhow, if there are suppose a thousand child pages that also have form element with runat="server" attribute, and you are too lazy to replace all of them one by one, Then you can use Visual Studio's text replacing feature and can change the form element to a div element. For that you just need to press Ctrl + H which will open a little window on top right corner asking for the text that you want to replace and another text that you want to have instead of that. See:
Notice in the screenshot I have shared, I am selecting Current Project from the drop down menu. This will search and replace every text with <form to <div in the project.
And once it has replaced all the tags starting with <form to <div then you can modify the closing text of the form tag by replacing </form with </div. Now you only have left one page.
Now, there is only the MasterPage left that you can replace back the div to form. So, this way you are manually changing only one page.
You need to click the second button that will replace all the values. There are other options to handle the find and replace that you can use as well. But, unfortunately, you cannot have multiple form tags with runat="server" attributes on it.
PS
It won't cause problem with the designs that you have and classes such as horizontal inline will be applied to those divs instead of forms and will be rendered same as the forms were being rendered on the UI.
It is always a good approach to take a backup before modifying things in bulk or changing something that is crucial and could cause a lot mess.
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 have a master page file and I have always added additional style sheets pragmatically using Page.Header.Controls.Add etc. But we have a client that wants the css files in a specific place, so I noticed that in the head section there is a
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
so I thought I could just add it into there.
I have tried
ContentPlaceHolder blar = (ContentPlaceHolder)Master.FindControl("HeadContent");
blar.Controls.Add(css);
But nothing appears, can anyone help?
U can add your css file like that;
ContentPlaceHolder blar = (ContentPlaceHolder)Master.FindControl("HeadContent");
HtmlLink css= new HtmlLink();
css.Attributes.Add("rel", "stylesheet");
css.Attributes.Add("type", "text/css");
css.Href = "/Styles/site.css";
blar.Controls.Add(css);
Check out the answer to this question: https://stackoverflow.com/a/2969360/1372321
It seems to do what you want :)
Update
To add content at a specific place in the header, and you are using .Net 4.5, you can use the System.Web.Optimatization API and bundle the styles. Then in your head, you can use the provided control:
<webopt:BundleReference runat="server" Path="~/Content/css" />
You can see an example of this in the default WebForms project template.
If you're using an older version of .Net, you can use content placeholder in your master page, and then add controls to that specific placeholder like so:
In master page head
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
In aspx page
<asp:Content runat="server" ContentPlaceHolderID="HeadContent">
<asp:PlaceHolder runat="server" ID="placeHolderHead"></asp:PlaceHolder>
</asp:Content>
Then you can simply add the Link controls to the placeholder programatically.
My ASP.NET page was not showing the controls. It just shows that master page error
The page has one or more <asp:content> controls that do not correspond
with <asp:ContentPlaceHolder controls in the Master Page
Try setting
<title></title>
instead of
<title />
Remove comment (<%-- --%>) in the Master file, this worked for me.
All your Content controls have to reference existing ContentPlaceHolders on master page
For instance, if you have on your page
<asp:Content ContentPlaceHolderID="Header" ID="Title" runat="server">
You must have something like this on your master page
<asp:ContentPlaceHolder ID="Header" runat="server" />
ContentPlaceHolderID is the property that must match against any ContentPlaceHolder ID on master page.
The problem is that you must have a syntax error in the master.page's markup :
Ex) %²> in stead of %>
If you validate your markup, I'm sure thar this will solve your problem
PI. I has the same error & it works for me ;)
I have created a custom master page and have the follwoing code on the page:
<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
<SPSWC:SearchBoxEx id="SearchBox"
RegisterStyles="false"
TextBeforeDropDown=""
TextBeforeTextBox="Search"
TextBoxWidth="120"
GoImageUrl="/_layouts/images/gosearch.png"
GoImageUrlRTL="/_layouts/images/gosearch.png"
UseSiteDefaults="true"
DropDownMode = "HideScopeDD"
SuppressWebPartChrome="true"
runat="server"
WebPart="true"
__WebPartId="{07E563F9-A259-4829-920F-03829BBC14D1}"
GoImageActiveUrl="/_layouts/images/gosearch.png"
GoImageActiveUrlRTL="/_layouts/images/gosearch.png"/>
</asp:ContentPlaceHolder>
On one site this code works correctly and on another it does not work and the default search box apears. I can not work out why this is happening. Any ideas?
The content in the contentplaceholder "PlaceHolderSearchArea" can be overwritten by a <asp:Content /> element in a page layout. So check the page layouts you are using for the existance of an <asp:Content/> with the placeholder id "PlaceHolderSearchArea".