I am trying to implement Bootstrap Carousel in ASP.NET Web Forms, but bootstrap carousel is not working on site. Only images are being displayed without carousel slider. I have added css and javascript files to Site.Master and bootstrap carousel code from https://getbootstrap.com/docs/4.0/components/carousel/ site.
Default.aspx site :
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div id="MyCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" id="carousel-slides-with-controls">
<div class="carousel-item-active">
<img class="d-block w-100" src="Toys%20Images/toy%20top.jpg" alt="Top" />
</div>
<div class="carousel-item">
<img src="Toys%20Images/toy%20tank.jpg" />
</div>
<div class="carousel-item">
<img src="Toys%20Images/toy%20dinosaur.jpg" />
</div>
<a class="carousel-control-prev" href="#" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" area-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#" role="button" data-slide="next">
<span class="carousel-control-next-icon" area-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p>
<p>Learn more »</p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
</p>
<p>
<a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a>
</p>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
<p>
NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.
</p>
<p>
<a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301949">Learn more »</a>
</p>
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
<p>
You can easily find a web hosting company that offers the right mix of features and price for your applications.
</p>
<p>
<a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301950">Learn more »</a>
</p>
</div>
</div>
</asp:Content>
Site.Master Code :
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WingtipToys.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Register">Register</a></li>
<li><a runat="server" href="~/Account/Login">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName() %> !</a></li>
<li>
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
</li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> - My ASP.NET Application</p>
</footer>
<script src="Scripts/jquery-3.5.1.slim.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
</div>
</form>
</body>
</html>
Are you sure of the version of Bootstrap in Content/bootstrap.css? The ASP.Net Web Application (.Net Framework) template installs Bootstrap v3.4.1 by default.
Related
I am a beginner in asp.net. I kept receive the above error
Control 'ContentPlaceHolder1_txtReason' of type 'TextBox' must be placed inside a form tag with runat=server."}
And I am not able to nail the problem on it's head.
Hope someone can point out my mistake.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Master.master.cs" Inherits="E.Master" %>
<!DOCTYPE html>
<head id="Head1" runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
This navbar
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">aaaaaaa</span>
<span class="icon-bar">aaaaaaa</span>
<span class="icon-bar">aaaaaaaa</span>
</button>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
</ul>
<!-- /.navbar-top-links -->
</div>
</nav>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<% generateMenu(); %>
</div>
</div>
<div id="page-wrapper">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="footercontent" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
You should place <form runat="server" id="form1">.
<body>
<form id="form1" runat="server">
// You should code for your controls inside this block. This runat="server" indicates that a control is being treated as a server control.
</form>
</body>
More details are Here
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
Account Group - Add - My ASP.NET Application
</title><script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /></head>
<body>
<form method="post" action="./groupAdd" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="tRJn2Kjwvz2Puav8tcpz3Ls6wGBUmb5Ja174Y3bdllDemDMYow1wPnjeUZgjA1y+av/mqygIOqBBxlrkr1A6axhfG/Ic4fMYi6poCOfltc5MR88HYxVigJJBG3tIvHfroT0iXc0csFM0mwyzWlNttzAhjZx7Xogq99vurKroKnK4q23wfM8J72YgScmhpcujEBgtDuKzbt8o6nu6VjwNYg==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/respond.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ- PDU01" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl08', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Application name
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Log in</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="MainContent_eGroupCode" id="MainContent_lGroupCode">Group Code</label>
<input name="ctl00$MainContent$eGroupCode" type="text" maxlength="10" id="MainContent_eGroupCode" class="form-control" style="text-transform:uppercase" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="MainContent_ddGroupType" id="MainContent_lGroupType">Group Type</label>
<select name="ctl00$MainContent$ddGroupType" id="MainContent_ddGroupType" class="form-control">
<option value="IN">Incomes</option>
<option value="EX">Expenses</option>
<option value="AS">Assets</option>
<option value="LI">Liabilities</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="MainContent_eGroupName" id="MainContent_lGroupName">Group Name</label>
<input name="ctl00$MainContent$eGroupName" type="text" maxlength="40" id="MainContent_eGroupName" class="form-control" style="text-transform:uppercase" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<input type="submit" name="ctl00$MainContent$bSave" value="Save" id="MainContent_bSave" class="btn btn-success" />
</div>
</div>
<hr />
<footer>
<p>© 2016 - PFA</p>
</footer>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="3AAE92F6" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="qSAzVSuS/WkdQ0+7cpffhRi71ZlGYos9x6mRfTlJETXx5PzLHrvJMrvKTBR+gk0eqMw6L0G8IaFchRCu2+y5qUSvQESXisN7B0rrXdNd3EB6D+zzcccmRVsiGszQD39higpryIq2R7q+im2eg0bLsdGa55i5eD7cOF8/Kh9ZNlMhO8NUTJ05Ef8LDMxYv+jB89mlh5Un6dkvjksggF8mBZp2pDYrDoGaINzbFwJzC5Q65UIgChzA9VRKUUWFG/BU" />
</div></form>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"d3ed4f11e0994099a89d07a103267276"}
</script>
<script type="text/javascript" src="http://localhost:50950/1ed6bd9582884a84ad84c822a4bf5589/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Version 2
<%# Page Title="Account Group - Add" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="groupAdd.aspx.vb" Inherits="PFA.groupAdd" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<asp:Label runat="server" ID="lGroupCode" Text="Group Code" AssociatedControlID="eGroupCode"></asp:Label>
<asp:TextBox runat="server" ID="eGroupCode" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<asp:Label runat="server" ID="lGroupType" Text="Group Type" AssociatedControlID="ddGroupType"></asp:Label>
<asp:DropDownList runat="server" ID="ddGroupType" CssClass="form-control">
<asp:ListItem Text="Incomes" Value="IN"></asp:ListItem>
<asp:ListItem Text="Expenses" Value="EX"></asp:ListItem>
<asp:ListItem Text="Assets" Value="AS"></asp:ListItem>
<asp:ListItem Text="Liabilities" Value="LI"></asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<asp:Label runat="server" ID="lGroupName" Text="Group Name" AssociatedControlID="eGroupName"></asp:Label>
<asp:TextBox runat="server" ID="eGroupName" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
And the result - the dropdown is still wider than the text boxes above and below.
Please see screenshot of rendered for below. Why does the dropdownlist occupy the whole screen width while the other two controls don't? Very new to web development. Please advice and help. Many thanks. Iyer
<%# Page Title="Account Group - Add" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="groupAdd.aspx.vb" Inherits="PFA.groupAdd" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="form-group">
<asp:Label runat="server" ID="lGroupCode" Text="Group Code" AssociatedControlID="eGroupCode"></asp:Label>
<asp:TextBox runat="server" ID="eGroupCode" CssClass="form-control"> </asp:TextBox>
</div>
<div class="form-group">
<asp:Label runat="server" ID="lGroupType" Text="Group Type" AssociatedControlID="ddGroupType"></asp:Label>
<asp:DropDownList runat="server" ID="ddGroupType" CssClass="form-control" width="100%">
<asp:ListItem Text="Incomes" Value="IN"></asp:ListItem>
<asp:ListItem Text="Expenses" Value="EX"></asp:ListItem>
<asp:ListItem Text="Assets" Value="AS"></asp:ListItem>
<asp:ListItem Text="Liabilities" Value="LI"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="form-group">
<asp:Label runat="server" ID="lGroupName" Text="Group Name" AssociatedControlID="eGroupName"></asp:Label>
<asp:TextBox runat="server" ID="eGroupName" CssClass="form-control"></asp:TextBox>
</div>
As Webruster says, you have specified a width of 100%. However, that's not the whole story. Even without this, Bootstrap will by default define a CSS width of 100%. Try wrapping the whole block in a <div class="col-***"> tag to better control sizes. For example, col-sm-3.
See the Bootstrap documentation for how to control form sizes.
EDIT:
After chatting with the OP for a while, it transpired that the problem is with the Content/Site.css file that's automatically generated by Visual Studio when creating a new Web Forms app. Amongst other things, it contains the following style:
/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]{
max-width: 280px;
}
This is overriding the default Bootstrap behavior. Furthermore, there is not (as far as I'm aware) an input type called select. Asp.net dropdown lists render to normal select tags. So what the above style does is restrict the maximum width of several input tags, without affecting the dropdown lists.
There are two solutions. First, we can simply delete this block entirely. This will allow Bootstrap to behave as expected, as far as form elements are concerned. This would be my preference.
Second, replace input[type="select"] with simply select. If it transpires that my knowledge of input types is lacking, then add ", select" after it, rather than replacing it (don't forget the comma!)
I have a very similar to many topical problem here on StackOverflow, but none of the solutions listed solved my problem.
(
Bootstrap dropdown closing when clicked
Bootstrap dropdown propagation closing when clicked
Twitter Bootstrap cant stop a dropdown from closing on click
Twitter Bootstrap dropdown closes when clicked
)
I have a horizontal navigation bar, and in the end want to put a dropdown to log in form. However when you click inside the form closes the plumb alone.
Could someone help me ??
Thanks So Much.
My code this:
<head runat="server">
<%--<link href="../Styles/Estilos.css" rel="Stylesheet" media="all" type="text/css" />--%>
<link href="../Styles/Print_Screen.css" rel="Stylesheet" media="print" type="text/css" />
<link href="../Content/CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../Content/CSS/jasny-bootstrap.min.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
<script type="text/javascript">
$(function () {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function (e) {
e.stopPropagation();
});
$('.dropdown-menu input, .dropdown-menu label').click(function (e) {
e.stopPropagation();
});
$('.dropdown-menu input').click(function (event) {
event.stopPropagation();
});
$('.dropdown-menu').on('click', function (e) {
e.stopPropagation();
});
$('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
$('.dropdown-menu').click(function (e) {
e.stopPropagation();
});
})
</script>
</asp:ContentPlaceHolder>
<div class="page-header" style="margin: 10px 0 20px;">
<div id="Div1" class="container">
<div class="navbar-inner navbar-content-center" style="text-align: center;">
<img id="Img3" alt="" style="border: 0" runat="server" src="~/images/logo.png" />
</div>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span><span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<asp:SiteMapDataSource ID="menuData" runat="server" ShowStartingNode="false" />
<asp:Repeater ID="r1" runat="server" DataSourceID="menuData">
<HeaderTemplate>
<ul class="nav navbar-nav">
</HeaderTemplate>
<ItemTemplate>
<li id="Menuitem" runat="server"><a href='<%# ((System.Web.SiteMapNode)Container.DataItem).Url %>'>
<i class='<%#((System.Web.SiteMapNode)Container.DataItem).ResourceKey%>'></i>
<%#((System.Web.SiteMapNode)Container.DataItem).Title%></a> </li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
<form class="form" id="formLogin" runat="server">
<ul class="nav navbar-nav navbar-right">
<li id="liLogin" runat="server" class="dropdown"><a href="#" class="dropdown-toggle"
id="register" data-toggle="dropdown" style="padding: 20px 5px;"><i class="glyphicon glyphicon-cog">
</i>LOGIN</a>
<div class="dropdown-menu" style="padding: 17px;">
<div style="margin-bottom: 25px" class="input-group input-group-sm">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<asp:TextBox ID="txtLogin" runat="server" class="form-control" placeholder="username or email"
Style="width: 200px;"></asp:TextBox>
</div>
<div style="margin-bottom: 25px" class="input-group input-group-sm">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<asp:TextBox ID="txtSenha" runat="server" TextMode="Password" class="form-control"
placeholder="username or email" Style="width: 200px;"></asp:TextBox>
</div>
<div style="margin-top: 10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<asp:LinkButton ID="btnLogin" runat="server" Text="Login" CssClass="btn btn-success btn-sm btn-block"></asp:LinkButton>
</div>
<asp:Label ID="errorLabel" runat="server" Text="" Visible="false"></asp:Label>
</div>
</div>
<!-- /dropdown-menu -->
</li>
</ul>
<asp:ScriptManager ID="ScriptManager2" runat="server">
</asp:ScriptManager>
</form>
</div>
</div>
<!--/.nav-collapse -->
</div>
<script src="../Scripts/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="../Scripts/jasny-bootstrap.min.js" type="text/javascript"></script>
when I tried to create Web Form using Master page I got the HttpException:
HttpException (0x80004005): Content controls have to be top-level controls in a content page or a nested master page that references a master page.]
The Master Page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="adminNav.master.cs" Inherits="Site.AdminPages.adminNav" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Admin Page</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/Site/Scripts/CSS/AdminPage.css" />
</head>
<body>
<div class="bs-example">
<form runat="server">
<nav id="myNavbar" class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<asp:LinkButton class="navbar-brand" Style="color: white" ID="AdminHomePage" runat="server" href="/Site/AdminPages/AdminPage.aspx">Home</asp:LinkButton>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Users</li>
<li>Profile</li> </ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<asp:Label ID="emailDeatilsLabel" runat="server" Style="color: white"></asp:Label>
<b class="caret"></b></a>
<ul class="dropdown-menu">
<asp:LinkButton ID="LogOutLabel" runat="server" href="/Site/UserPages/LogOut.aspx">Log Out</asp:LinkButton>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</form>
</div>
</body>
</html>
Here is the code of Profile.aspx ( what I tried to run and got the exception ):
<%# Page Title="" Language="C#" MasterPageFile="~/AdminPages/adminNav.Master"
AutoEventWireup="true" CodeBehind="Profile.aspx.cs" Inherits="Site.AdminPages.Profile" %>
<!DOCTYPE html>
<head>
</head>
<body>
<p class="explainText">
First name:
<br />
<asp:TextBox ID="ProfilefirstNameTextBox" class="form-control" runat="server" Width="250px" ForeColor="Black" placeholder="First Name" required="true" OnTextChanged="ProfilefirstNameTextBox_TextChanged" />
</body>
</html>
I tried also to write in Profile.aspx code only the elements (without ...) code but its still doesn't work
Content controls have to be top-level controls in a content page or a nested master page that references a master page
Visual Studio is telling you do do the following;
Wrap your mark up with the placeholder tags like this
<asp:Content Id="ContentI" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
<p class="explainText">
First name:
<br />
<asp:TextBox ID="ProfilefirstNameTextBox" class="form-control" runat="server" Width="250px" ForeColor="Black" placeholder="First Name" required="true" OnTextChanged="ProfilefirstNameTextBox_TextChanged" />
</asp:Content>
You do not need to put the html and body tags as they are injected from the master page.That is how master and child pages work.
I have used bootstrap framework and a template from a book to finally make the master page the way I want.
When I use google chrome, or IE, and I resize the browsers, the page is resized and the menu is converted to a vertical menu.
However, I just tried on the iphone and it shows "like" a big browser, instead of showing the vertical menu.
I wish I could paste the code but the bootstrap code is way too long to copy here.
I will show my website:
https://levalencia-public.sharepoint.com/
And I will paste the html of my masterpage.
<?xml version="1.0" encoding="utf-8"?><!--SPG:
This HTML file has been associated with a SharePoint Master Page (.master file) carrying the same name. While the files remain associated, you will not be allowed to edit the .master file, and any rename, move, or deletion operations will be reciprocated.
To build the master page directly from this HTML file, simply edit the page as you normally would. Use the Snippet Generator at https://levalencia-public.sharepoint.com/_layouts/15/ComponentHome.aspx?Url=https%3A%2F%2Flevalencia%2Dpublic%2Esharepoint%2Ecom%2F%5Fcatalogs%2Fmasterpage%2Flv%2Emaster to create and customize useful SharePoint entities, then copy and paste them as HTML snippets into your HTML code. All updates to this file will automatically sync to the associated Master Page.
-->
<!DOCTYPE html[]>
<html class="no-js" lang="en" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<!--CS: Start Page Head Contents Snippet-->
<!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SPM:<%#Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SID:00 -->
<meta name="GENERATOR" content="Microsoft SharePoint" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<!--MS:<SharePoint:RobotsMetaTag runat="server">-->
<!--ME:</SharePoint:RobotsMetaTag>-->
<!--MS:<SharePoint:PageTitle runat="server">-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">-->
<!--MS:<SharePoint:ProjectProperty Property="Title" runat="server">-->
<!--ME:</SharePoint:ProjectProperty>-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:PageTitle>-->
<!--MS:<SharePoint:StartScript runat="server">-->
<!--ME:</SharePoint:StartScript>-->
<!--MS:<SharePoint:CssLink runat="server" Version="15">-->
<!--ME:</SharePoint:CssLink>-->
<!--MS:<SharePoint:CacheManifestLink runat="server">-->
<!--ME:</SharePoint:CacheManifestLink>-->
<!--MS:<SharePoint:PageRenderMode runat="server" RenderModeType="Standard">-->
<!--ME:</SharePoint:PageRenderMode>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:CustomJSUrl runat="server">-->
<!--ME:</SharePoint:CustomJSUrl>-->
<!--MS:<SharePoint:SoapDiscoveryLink runat="server">-->
<!--ME:</SharePoint:SoapDiscoveryLink>-->
<!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--MS:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">-->
<!--ME:</SharePoint:DelegateControl>-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--MS:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server">-->
<!--ME:</SharePoint:CssRegistration>-->
<!--MS:<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">-->
<!--MS:<WebPartPages:SPWebPartManager runat="server">-->
<!--ME:</WebPartPages:SPWebPartManager>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End Page Head Contents Snippet-->
<meta charset="utf-8" />
<!--DC:Specter Group - Blog Bootstrap Version-->
<meta name="description" content="" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/superfish.css" />
<link rel="stylesheet" href="css/nivo-slider.css" />
<link rel="stylesheet" href="css/isotope.css" />
<link rel="stylesheet" href="css/elements.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/custom.css" />
<!-- Modernizr enables HTML5 elements & feature detects for optimal performance.
Include html5shiv 3.6. Our version is a custom build.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="js/modernizr-2.6.2.custom.js">//<![CDATA[//]]>
</script>
<!--Grab Microsofts CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<!--place in head in case need to access jquery inline in SP page layout-->
<script src="js/jquery-1.9.1.min.js">//<![CDATA[//]]>
</script>
<script>//<![CDATA[window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js">//<![CDATA[<\/script>')//]]>
</script>
<!--used to help make old scripts work with jquery 1.9-->
<script src="js/jquery-migrate-1.1.0.min.js">//<![CDATA[//]]>
</script>
<!--js libraries-->
<script src="js/jquery-ui-1.8.9.custom.min.js">//<![CDATA[//]]>
</script>
<script src="js/hoverIntent.js">//<![CDATA[//]]>
</script>
<script src="js/superfish-1.4.8/superfish.js">//<![CDATA[//]]>
</script>
<script src="js/superfish-1.4.8/supersubs.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.nivo.slider.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.isotope.min.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.tweet.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.tabs.js">//<![CDATA[//]]>
</script>
<script src="js/poshytip-1.1/jquery.poshytip.min.js">//<![CDATA[//]]>
</script>
<script src="js/bootstrap.js">//<![CDATA[//]]>
</script>
<!--custom scripts-->
<script src="js/jquery-custom.js">//<![CDATA[//]]>
</script>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:HtmlDesignFromMaster msdt:dt="string"></mso:HtmlDesignFromMaster>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">https://levalencia-public.sharepoint.com/_catalogs/masterpage/lv.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:ContentTypeId msdt:dt="string">0x0101000F1C8B9E0EB4BE489F09807B2C53288F0054AD6EF48B9F7B45A142F8173F171BD10003D357F861E29844953D5CAA1D4D8A3A00A9586E0672297E4794AD6E170F2BEB51</mso:ContentTypeId>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<!--CS: Start Ribbon Snippet-->
<!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SPM:<%#Register Tagprefix="wssucw" TagName="Welcome" Src="~/_controltemplates/15/Welcome.ascx"%>-->
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" HideFromSearchCrawler="true" EmitDiv="true">-->
<div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
<a id="linkTurnOnAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();document.getElementById('linkTurnOffAcc').focus();return false;">
<!--MS:<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnonaccessibility%>" EncodeMethod="HtmlEncode">-->
<!--ME:</SharePoint:EncodedLiteral>-->
</a>
</div>
<div id="TurnOffAccessibility" style="display:none" class="s4-notdlg noindex">
<a id="linkTurnOffAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();document.getElementById('linkTurnOnAcc').focus();return false;">
<!--MS:<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnoffaccessibility%>" EncodeMethod="HtmlEncode">-->
<!--ME:</SharePoint:EncodedLiteral>-->
</a>
</div>
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<div id="ms-designer-ribbon">
<!--SID:02 {Ribbon}-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify) --><div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div><!--PE: End of READ-ONLY PREVIEW -->
</div>
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
<!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
<!--ME:</wssucw:Welcome>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<!--CE: End Ribbon Snippet-->
<div id="s4-workspace">
<div id="s4-bodyContainer">
<!-- HEADER -->
<header>
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<div id="logo">
<!--logo snippet-->
<div data-name="SiteLogo"><!--CS: Start Site Logo Snippet--><!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SharePoint:AjaxDelta BlockElement="true" runat="server">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--MS:<SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server" ID="x8b0737e1232643da88f7b4721567d1e8">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--MS:<SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" ID="x596f04b7f65943cb9ad23b9fd9ac5744" LogoImageUrl="/_layouts/15/images/siteIcon.png" runat="server">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><img id="ctl00_x596f04b7f65943cb9ad23b9fd9ac5744" class="ms-siteicon-img" name="onetidHeadbnnr0" Src="/SiteAssets/logosharepointazul.PNG" alt="Luis Valencia - Sharepoint Architect" /><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:SiteLogoImage>--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:SPSimpleSiteLink>--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:AjaxDelta>--><!--CE: End Site Logo Snippet-->
</div>
</div>
<div class="tagline">
<h2>
<span>Luis
</span>
Valencia </h2>
<h2>
<span>Sharepoint
</span>
Architect </h2>
</div>
</div>
<div class="social cf">
<ul class="cf">
<li>
<a href="https://www.facebook.com/pages/Sharepoint-Architects-Blog/259727274196140" target="_blank">
<img src="img/social/Facebook.png" alt="Facebook" />
</a>
</li>
<li>
<a href="https://twitter.com/levalencia" target="_blank">
<img src="img/social/Twitter.png" alt="Twitter" />
</a>
</li>
<li>
<a href="https://plus.google.com/115487123900000828421/posts" target="_blank">
<img src="img/social/Google+.png" alt="Google+" />
</a>
</li>
<li>
<a href="http://www.linkedin.com/profile/view?id=55314636&trk=nav_responsive_tab_profile" target="_blank">
<img src="img/social/LinkedIn.png" alt="Linked In" />
</a>
</li>
<li>
<a href="#">
<img src="img/social/RSS.png" alt="Blog" />
</a>
</li>
</ul>
<a class="social-toggle" title="Follow Us">Toggle
</a>
</div>
</div>
</div>
</header>
<!-- ENDS HEADER -->
<!-- nav -->
<!-- nav -->
<nav id="topnav">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav nav-collapse collapse">
<!--nav snippet-->
<ul class="root">
<li class="current-menu-item">HOME</li>
<li>ABOUT ME</li>
<li>BLOG</li>
<li>ARTICLES</li>
<li>CONTACT</li>
</ul>
<!--end nav snippet-->
</div> <!--end class nav-->
</div> <!--end container-->
</div>
</div>
</div> <!--end span 12-->
</div> <!--end row-->
</div> <!--end fluid container-->
</nav>
<!-- ends nav -->
<!-- MAIN -->
<div role="main" id="main">
<div class="container-fluid">
<!--main content placerholder, use the following html as sample content for content placeholder-->
<div class="row-fluid">
<div data-name="ContentPlaceHolderMain">
<!--CS: Start PlaceHolderMain Snippet-->
<!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
<div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
</div>
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End PlaceHolderMain Snippet-->
</div>
</div>
<!--end content placerholder-->
</div>
</div>
<!-- ENDS MAIN -->
<footer>
<!-- bottom footer-->
<div class="footer-bottom">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6 copyright">
<p><b>Copyright © 2014 Luis Valencia - All Rights Reverved</b>
</p>
</div>
</div>
</div>
</div>
<!--end bottom footer-->
</footer>
</div>
</div>
</body>
</html>
You are missing
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Check;
Bootstrap 3 responsive not working on mobile
good luck!
You are missing the viewport meta tag. Add this within your <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
What this does is essentially instructs the device that 'width' should be considered the device's width. The device can then use that to compare against your media-queries and decide how to display the page.