Blog

Please help me with this Bootstrap layout... [Answered]RSS

10 replies

Last post Dec 16, 2016 02:53 AM by tangara

‹ Previous Thread|Next Thread ›

Shortcuts

tangara

Member

31 Points

247 Posts

Please help me with this Bootstrap layout...

Dec 08, 2016 07:02 AM|tangara|LINK

I am having great difficulty in this bootstrap....after changing things here and there, I am now lost with this page that is not rendering as the appearance should be.

I hope someone can tell me how to make the part from Create PMT all the way appear outside the header and the sidebar. Tks.

My master page is

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Master.Master.cs" Inherits="EPMT.Master" %>



<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>eDNSN</title>
    <!-- Bootstrap Core CSS -->
    <link href="~/bower_components/bootstrap/dist/css/bootstrap.min.css?parameter=1"
        rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link href="<%# ResolveUrl("~/bower_components/metisMenu/dist/metisMenu.min.css")%>" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="<%# ResolveUrl("~/dist/css/sb-admin-2.css")%>" rel="stylesheet">


    <!-- Custom Fonts -->
    <link href="<%# ResolveUrl("~/bower_components/font-awesome/css/font-awesome.min.css")%>" rel="stylesheet"
        type="text/css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="<%# ResolveUrl("~/dist/css/bootstrap-datetimepicker.min.css")%>" type="text/css" rel="stylesheet" />
    <link href="<%# ResolveUrl("~/dist/css/bootstrap-datetimepicker.css")%>" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>

</head>
<body>
     <form id="form1" runat="server">     

        <%-- <img src="<%= ResolveUrl("../Imgaes/SHeader.jpg")%>" style="width:100%" alt="e-eSNDN"/>--%>

        <img src="../Images/SHeader.jpg" style="width: 100%" alt="e-eSNDN" />

        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" 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>
                </button>
                <%--            <a class="navbar-brand" href="index.html">SSMC - Intranet</a>--%>
            </div>
            <!-- /.navbar-header -->

            <ul class="nav navbar-top-links navbar-right">
               
                <!-- /.dropdown -->                    

            </ul>
            <!-- /.navbar-top-links -->
            </nav>
            <div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <% generateMenu(); %>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->
       
        <div id="page-wrapper">

            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
            <asp:ContentPlaceHolder ID="footercontent" runat="server">
            </asp:ContentPlaceHolder>

        </div>

</form>
    
    <!-- /#wrapper -->
    <!-- jQuery -->
    <script src="<%= ResolveUrl("~/bower_components/jquery/dist/jquery.min.js")%>" type="text/javascript"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="<%= ResolveUrl("~/bower_components/bootstrap/dist/js/bootstrap.min.js")%>" type="text/javascript"></script>
    <!-- Metis Menu Plugin JavaScript -->
    <script src="<%= ResolveUrl("~/bower_components/metisMenu/dist/metisMenu.min.js")%>" type="text/javascript"></script>
    <!-- Custom Theme JavaScript -->
    <script src="<%= ResolveUrl("~/dist/js/sb-admin-2.js")%>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/dist/js/moment.js")%>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/dist/js/bootstrap-datetimepicker.js")%>" type="text/javascript"></script>

    <link href="<%= ResolveUrl("~/bower_components/metisMenu/dist/metisMenu.min.css")%>" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="<%= ResolveUrl("~/dist/css/sb-admin-2.css")%>" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="<%= ResolveUrl("~/bower_components/font-awesome/css/font-awesome.min.css")%>" rel="stylesheet"
        type="text/css">     

</body>
</html>

And my form.aspx is

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="ETDraft.aspx.cs" Inherits="ET.WebForms.EPMTDraft" MaintainScrollPositionOnPostback="true" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div class="row">               
         <div class="col-lg-12">
            <h3 class="page-header">
                Create PMT</h3>       
             </div>     
    </div>         
    <div style="border: 2px solid #EAEAEA; padding: 15px 15px 15px 15px; border-radius: 15px">
        <div runat="server" id="MessageBox" visible="false" class="alert alert-success">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <asp:Label ID="lblmsg" runat="server" Text="Label" Font-Bold="True"></asp:Label>        
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div id="div1" class="panel panel-primary">
                    <div class="panel-heading">
                        Issuer's Details
                    </div>
                                   
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-6 col-lg-6">
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Initiator:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblInitiator" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Division:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblDivision" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>                                                   
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Section:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblSection" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        EmpID:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblEmpID" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>
                                </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-lg-12">
                                    <div class="panel-heading">
                                    Details of Suppliers
                                    </div>
                                <div class="col-sm-6 col-lg-6">
                                <form runat="server">
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Cateogry Name:<span style="color:red">*</span></label>
                                    <div class="input-group col-md-8">
                                        <asp:DropDownList ID="drpCategoryName" runat="server" CssClass="form-control">                                           
                                        </asp:DropDownList>
                                    </div>                                    
                                </div> 
                                    </form>
                            </div>
                            </div>
                            </div>
                            <
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Manager:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblApproverMgr" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Purpose of Removal:<span style="color: #FF0000">*</span></label>
                                    <div class="input-group col-md-8">
                                        <asp:TextBox ID="txtReason" runat="server" Width="100%" Height="50px" TextMode="MultiLine" Placeholder="Please fill in reason for removal" CssClass="form-control"></asp:TextBox>
                                    </div>
                                </div>
                                    <div class="col-sm-6 col-lg-6">
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Department:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblDept" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        ext No:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblExtNo" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Cost Center:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblCostCenter" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Submitted on:</label>
                                    <div class="input-group date" id="tbxSamplingDate1">
                                        <asp:TextBox ID="tbxSamplingDate" runat="server" Width="100%" CssClass="form-control" Style="left: 0px; top:0px"></asp:TextBox>
                                        <span class="input-group-addon"><span class="fa fa-calender"></span></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Due Date:<span style="color: red">*</span></label>
                                    <div class="input-group col-md-8">
                                    <div class="input-group date" id="txtSmaplingDate1">
                                        <asp:TextBox ID="txtDueDate" runat="server" Width="100%" CssClass="form-control" 
                                            Style="left: 0px; top:0px"></asp:TextBox>
                                    <span class="input-group-addon"><span class="fa fa-calender"></span></span>
                                    </div>
                                </div>  
                                        </div>
                                        </div>
                                        <%--Supplier --%>
      
                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                Supplier Details
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-6 col-lg-6">
                                     <form runat="server">
                                             <!-- when user select ddlSupplier, the Vendor Id and name will fill the respective field unless it is others vendor -->   
                                            <div class="form-group">
                                            <asp:DropDownList ID="ddlSupplier" runat="server" AutoPostBack="true" 
                                            OnSelectedIndexChanged="drpSupplier_SelectedIndexChanged"></asp:DropDownList>
                                      </form>
                                            <div class="form-group">
                                            <label class="col-md-4 control-label" for="inputRefNo">
                                                Vendor Email:<span style="color: red">*</span></label>
                                            <asp:TextBox ID="txtSupplierEmail" runat="server"  Width="100%" CssClass="form-control"></asp:TextBox> 
                                             </div>
                                            <div>
                                              
                                            <!-- To insert code for letting user filling up Supplier email - to have auto-pop up and enable overwrite etc. -->                                          
                                                
                                                 <div class="form-group">
                                                 <label class="col-md-4 control-label" for="radios">Others Vendor<span style="color: red">*</span></label>
                                                 <div class="col-md-4"> 
                                                <label class="radio-inline" for="radios-0">
                                                 <input name="radios" id="radios-Y" value="Yes" checked="checked" type="radio">
                                                Yes
                                             </label> 
                                                <label class="radio-inline" for="radios-1">
                                                 <input name="radios" id="radios-N" value="No" type="radio">
                                                     No
                                                 </label> 
                                            </div>
                                               <div class="form-group">
                                            <label class="col-md-4 control-label" for="inputRefNo">
                                                Contact Person:<span style="color: red">*</span></label>
                                                    <div class="input-group col-md-8">
                                                        <asp:Label ID ="txtSupplierCttPerson" runat="server" OnTextChanged="SupplierCttPerson_TextChanged" Width="100%" CssClass="form-control">
                                                            </asp:Label>
                                                    </div>
                                                   <div class="form-group">
                                            <label class="col-md-4 control-label" for="inputRefNo">
                                                Contact Number:<span style="color: red">*</span></label>
                                                    <div class="input-group col-md-8">
                                                        <asp:Label ID ="txtSupplierCttNumber" runat="server" OnTextChanged="SupplierCttNumber_TextChanged" Width="100%" CssClass="form-control">
                                                            </asp:Label>
                                            </div>
                                        </div>
                                                   <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Vendor Email:<span style="color: red">*</span></label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="Label1" runat="server" Text="Please update new email if any" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>    
                                    </div>
                                    <div class="col-sm-6 col-lg-6">
                                        <div class="form-group">
                                            <label class="col-md-4 control-label" for="inputRefNo">
                                                Supplier Name:<span style="color: red">*</span></label>
                                            <div class="input-group col-md-8">
                                                <table style="width: 100%">
                                                    <tr>
                                                        <td>
                                                            <asp:TextBox ID="tbxSupplierCttPerson" runat="server" CssClass="form-control"></asp:TextBox>                                                            
                                                        </td>
                                                        <td>                                                            
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>         
                                    
                                <%-- Mandatory Fields--%>
        <asp:Label ID="lblMandatory" runat="server" Text="Indicates a mandatory/required field"><font size="5" color="red">* </font><strong> indicates a mandatory/required field </strong></span></asp:Label>
        
                <div class="row">
                    <div class="col-lg-12">
                        <div id="div2" class="panel panel-primary">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-12 col-lg-12">
                                        <div class="form-group text-center">
                                            <div class="col-md-12">
                                               
                                                <asp:button ID="btnSave" runat="server" Text="Save" Width="150px" class="btn btn-outline btn-success" OnClick="btnSave_Click"></asp:button >
                                                <asp:button ID="btnSubmit" runat="server" Text="Submit" Width="150px" class="btn btn-outline btn-success" OnClick="btnSubmit_Click"></asp:button>
                                                    
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
           
    </div>                           
                                  
       </asp:Content>    
    <asp:Content ID="Content3" ContentPlaceHolderID="footercontent" runat="server">
    <link href="~/dist/css/bootstrap-datetimepicker.css" rel="stylesheet" />
    <script src="<%= ResolveUrl("~/bower_components/jquery/dist/jquery.min.js")%>" type="text/javascript"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="<%= ResolveUrl("~/bower_components/bootstrap/dist/js/bootstrap.min.js")%>"
        type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/dist/js/moment.js")%>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/dist/js/bootstrap-datetimepicker.js")%>" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $('#tbxSamplingDate1').datetimepicker({

                format: 'DD-MM-YYYY HH:mm:ss'
            });

            $('#txtDueDate').datetimepicker({

                format: 'DD-MM-YYYY HH:mm:ss'
            });
        });
    </script>
</asp:Content>

- Reply
mohtshm
Member

260 Points

138 Posts

Re: Please help me with this Bootstrap layout...

Dec 08, 2016 08:15 PM|mohtshm|LINK

Dear you seems to be missing container div (<div class="container"></div>) which should covered all div with "row class" and it keeps your layout under a fixed width

https://pk.linkedin.com/in/mohtishamzubair

tangara

Member

31 Points

247 Posts

Re: Please help me with this Bootstrap layout...

Dec 09, 2016 02:06 AM|tangara|LINK

Hi,

I've added in like this but it still just rendered the way I wanted.

<div class = "container">
<div class="row">               
         <div class="col-lg-12">
            <h3 class="page-header">
                Create PMT</h3>       
             </div>     
    </div>         
</div>

div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div id="div1" class="panel panel-primary">
                    <div class="panel-heading">
                        Requestor's Information
                    </div>
                      </div>    
                </div> 
            </div>       
        </div>

Basically, I wanted the side bar not to stretch all the way across the page. It should be a vertical side bar with enough for me to insert my menu from database.

Anyway, here's the css code which I hope with this, someone can tell me the way to rectify thing.

/*!
 * Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    background-color: #f8f8f8;
}

#wrapper {
    width: 100%;
}

#page-wrapper {
    padding: 0 15px;
    min-height: 568px;
    background-color: #fff;
}

#quiz-wrapper {
    padding: 30px;
    min-height: 568px;
    background-color: #fff;
}

@media(min-width:768px) {
    #page-wrapper {
        position: inherit;
        margin: 0 0 0 250px;
        padding: 0 30px;
        border-left: 1px solid #e7e7e7;
    }
}

.navbar-top-links {
    margin-right: 0;
}

.navbar-top-links li {
    display: inline-block;
}

.navbar-top-links li:last-child {
    margin-right: 15px;
}

.navbar-top-links li a {
    padding: 15px;
    min-height: 50px;
}

.navbar-top-links .dropdown-menu li {
    display: block;
}

.navbar-top-links .dropdown-menu li:last-child {
    margin-right: 0;
}

.navbar-top-links .dropdown-menu li a {
    padding: 3px 20px;
    min-height: 0;
}

.navbar-top-links .dropdown-menu li a div {
    white-space: normal;
}

.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
    width: 310px;
    min-width: 0;
}

.navbar-top-links .dropdown-messages {
    margin-left: 5px;
}

.navbar-top-links .dropdown-tasks {
    margin-left: -59px;
}

.navbar-top-links .dropdown-alerts {
    margin-left: -123px;
}

.navbar-top-links .dropdown-user {
    right: 0;
    left: auto;
}

.sidebar .sidebar-nav.navbar-collapse {
    padding-right: 0;
    padding-left: 0;
}

.sidebar .sidebar-search {
    padding: 15px;
}

.sidebar ul li {
    border-bottom: 1px solid #e7e7e7;
}

.sidebar ul li a.active {
    background-color: #eee;
}

.sidebar .arrow {
    float: right;
}

.sidebar .fa.arrow:before {
    content: "\f104";
}

.sidebar .active>a>.fa.arrow:before {
    content: "\f107";
}

.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
    border-bottom: 0!important;
}

.sidebar .nav-second-level li a {
    padding-left: 37px;
}

.sidebar .nav-third-level li a {
    padding-left: 52px;
}

@media(min-width:768px) {
    .sidebar {
        z-index: 1;
        position: absolute;
        width: 250px;
        margin-top: 51px;
    }

    .navbar-top-links .dropdown-messages,
    .navbar-top-links .dropdown-tasks,
    .navbar-top-links .dropdown-alerts {
        margin-left: auto;
    }
}

.btn-outline {
    color: inherit;
    background-color: transparent;
    transition: all .5s;
}

.btn-primary.btn-outline {
    color: #428bca;
}

.btn-success.btn-outline {
    color: #5cb85c;
}

.btn-info.btn-outline {
    color: #5bc0de;
}

.btn-warning.btn-outline {
    color: #f0ad4e;
}

.btn-danger.btn-outline {
    color: #d9534f;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
    color: #fff;
}

.chat {
    margin: 0;
    padding: 0;
    list-style: none;
}

.chat li {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #999;
}

.chat li.left .chat-body {
    margin-left: 60px;
}

.chat li.right .chat-body {
    margin-right: 60px;
}

.chat li .chat-body p {
    margin: 0;
}

.panel .slidedown .glyphicon,
.chat .glyphicon {
    margin-right: 5px;
}

.chat-panel .panel-body {
    height: 350px;
    overflow-y: scroll;
}

.login-panel {
    margin-top: 25%;
}

.flot-chart {
    display: block;
    height: 400px;
}

.flot-chart-content {
    width: 100%;
    height: 100%;
}

.dataTables_wrapper {
    position: relative;
    clear: both;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background: 0 0;
}

table.dataTable thead .sorting_asc:after {
    content: "\f0de";
    float: right;
    font-family: fontawesome;
}

table.dataTable thead .sorting_desc:after {
    content: "\f0dd";
    float: right;
    font-family: fontawesome;
}

table.dataTable thead .sorting:after {
    content: "\f0dc";
    float: right;
    font-family: fontawesome;
    color: rgba(50,50,50,.5);
}

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.428571429;
}

.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    border-radius: 25px;
    font-size: 18px;
    line-height: 1.33;
}

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.show-grid [class^=col-] {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #ddd;
    background-color: #eee!important;
}

.show-grid {
    margin: 15px 0;
}

.huge {
    font-size: 40px;
}

.panel-green {
    border-color: #5cb85c;
}

.panel-green .panel-heading {
    border-color: #5cb85c;
    color: #fff;
    background-color: #5cb85c;
}

.panel-green a {
    color: #5cb85c;
}

.panel-green a:hover {
    color: #3d8b3d;
}

.panel-red {
    border-color: #d9534f;
}

.panel-red .panel-heading {
    border-color: #d9534f;
    color: #fff;
    background-color: #d9534f;
}

.panel-red a {
    color: #d9534f;
}

.panel-red a:hover {
    color: #b52b27;
}

.panel-yellow {
    border-color: #f0ad4e;
}

.panel-yellow .panel-heading {
    border-color: #f0ad4e;
    color: #fff;
    background-color: #f0ad4e;
}

.panel-yellow a {
    color: #f0ad4e;
}

.panel-yellow a:hover {
    color: #df8a13;
}

- Reply
Brando ZWZ
Star

8791 Points

2657 Posts

Re: Please help me with this Bootstrap layout...

Dec 09, 2016 10:04 AM|Brando ZWZ|LINK

Hi tangara,

tangara

I am having great difficulty in this bootstrap....after changing things here and there, I am now lost with this page that is not rendering as the appearance should be.

I hope someone can tell me how to make the part from Create PMT all the way appear outside the header and the sidebar. Tks.

According to your description, I have written a test demo on my computer.

I couldn't reproduce your issue now.

But I found you set form tag inside the form tag, this will throw the "A page can have only one server-side Form tag." error.

I suggest you could delete the form tag in your content page.

Since I don't have all your code like " <% generateMenu(); %>" , so I couldn't totally reproduce your error.

Could you please post a screen image of your page?

If you could post more relevant information, it will be more easily for us to help you find the solution.

Best Regards,

Brando
- Reply
tangara
Member

31 Points

247 Posts

Re: Please help me with this Bootstrap layout...

Dec 11, 2016 05:24 AM|tangara|LINK

Hi Brando,

The information I have provided is more than enough for a person who is experienced to tell me how to do it. I presume you are not into bootstrap.

Why I know ?

Cos I manged to fix the problem earlier but of course now I forgot cos I duno about Bootstrap at all.

The generate Menu has nothing to do with the layout. Trust me.
- Reply
Brando ZWZ
Star

8791 Points

2657 Posts

Re: Please help me with this Bootstrap layout...

Dec 11, 2016 01:51 PM|Brando ZWZ|LINK

Hi tangara,

tangara

The information I have provided is more than enough for a person who is experienced to tell me how to do it. I presume you are not into bootstrap.

As my previous post says, I need to firstly reproduce your error, then I could find the solution to help you fix the layout.

I have already imported the bootstrap in my test demo.

The result in my computer is like below image:

Note: Since your content page code missed some </div>, I guess I don't reproduce your error.

So I ask for a more details information.

Image:

Best Regards,

Brando
- Reply
tangara
Member

31 Points

247 Posts

Re: Please help me with this Bootstrap layout...

Dec 11, 2016 02:04 PM|tangara|LINK

Hi Brando,

You got the right layout. But, how on earth did you do it ?

Be'cos no matter how I tried, my computer is not generating the layout you have displayed here.

And be'cos this company is not allowing me to see the image or upload image and I can only see it here using my house computer.

So, I would really appreciate it if you could let me know what is the thing you have corrected in my posted code in order to get the layout that you did here.

I'll check back with my hp and thanks.

Brando ZWZ

Star

8791 Points

2657 Posts

Re: Please help me with this Bootstrap layout...

Dec 12, 2016 11:21 AM|Brando ZWZ|LINK

Hi tangara,

tangara
You got the right layout. But, how on earth did you do it ?

I just add all your code in my computer just delete the form tag in the content page.

More details about my test demo code, you could refer to follow codes:

Master Page:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site2.master.cs" Inherits="WebFormDateError.Site2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>
    <link href="Content/bootstrap-datepicker.min.css" rel="stylesheet" />
    <script src="Scripts/bootstrap-datepicker.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <style>
        /*!
 * Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

        body {
            background-color: #f8f8f8;
        }

        #wrapper {
            width: 100%;
        }

        #page-wrapper {
            padding: 0 15px;
            min-height: 568px;
            background-color: #fff;
        }

        #quiz-wrapper {
            padding: 30px;
            min-height: 568px;
            background-color: #fff;
        }

        @media(min-width:768px) {
            #page-wrapper {
                position: inherit;
                margin: 0 0 0 250px;
                padding: 0 30px;
                border-left: 1px solid #e7e7e7;
            }
        }

        .navbar-top-links {
            margin-right: 0;
        }

            .navbar-top-links li {
                display: inline-block;
            }

                .navbar-top-links li:last-child {
                    margin-right: 15px;
                }

                .navbar-top-links li a {
                    padding: 15px;
                    min-height: 50px;
                }

            .navbar-top-links .dropdown-menu li {
                display: block;
            }

                .navbar-top-links .dropdown-menu li:last-child {
                    margin-right: 0;
                }

                .navbar-top-links .dropdown-menu li a {
                    padding: 3px 20px;
                    min-height: 0;
                }

                    .navbar-top-links .dropdown-menu li a div {
                        white-space: normal;
                    }

            .navbar-top-links .dropdown-messages,
            .navbar-top-links .dropdown-tasks,
            .navbar-top-links .dropdown-alerts {
                width: 310px;
                min-width: 0;
            }

            .navbar-top-links .dropdown-messages {
                margin-left: 5px;
            }

            .navbar-top-links .dropdown-tasks {
                margin-left: -59px;
            }

            .navbar-top-links .dropdown-alerts {
                margin-left: -123px;
            }

            .navbar-top-links .dropdown-user {
                right: 0;
                left: auto;
            }

        .sidebar .sidebar-nav.navbar-collapse {
            padding-right: 0;
            padding-left: 0;
        }

        .sidebar .sidebar-search {
            padding: 15px;
        }

        .sidebar ul li {
            border-bottom: 1px solid #e7e7e7;
        }

            .sidebar ul li a.active {
                background-color: #eee;
            }

        .sidebar .arrow {
            float: right;
        }

        .sidebar .fa.arrow:before {
            content: "\f104";
        }

        .sidebar .active > a > .fa.arrow:before {
            content: "\f107";
        }

        .sidebar .nav-second-level li,
        .sidebar .nav-third-level li {
            border-bottom: 0 !important;
        }

            .sidebar .nav-second-level li a {
                padding-left: 37px;
            }

            .sidebar .nav-third-level li a {
                padding-left: 52px;
            }

        @media(min-width:768px) {
            .sidebar {
                z-index: 1;
                position: absolute;
                width: 250px;
                margin-top: 51px;
            }

            .navbar-top-links .dropdown-messages,
            .navbar-top-links .dropdown-tasks,
            .navbar-top-links .dropdown-alerts {
                margin-left: auto;
            }
        }

        .btn-outline {
            color: inherit;
            background-color: transparent;
            transition: all .5s;
        }

        .btn-primary.btn-outline {
            color: #428bca;
        }

        .btn-success.btn-outline {
            color: #5cb85c;
        }

        .btn-info.btn-outline {
            color: #5bc0de;
        }

        .btn-warning.btn-outline {
            color: #f0ad4e;
        }

        .btn-danger.btn-outline {
            color: #d9534f;
        }

            .btn-primary.btn-outline:hover,
            .btn-success.btn-outline:hover,
            .btn-info.btn-outline:hover,
            .btn-warning.btn-outline:hover,
            .btn-danger.btn-outline:hover {
                color: #fff;
            }

        .chat {
            margin: 0;
            padding: 0;
            list-style: none;
        }

            .chat li {
                margin-bottom: 10px;
                padding-bottom: 5px;
                border-bottom: 1px dotted #999;
            }

                .chat li.left .chat-body {
                    margin-left: 60px;
                }

                .chat li.right .chat-body {
                    margin-right: 60px;
                }

                .chat li .chat-body p {
                    margin: 0;
                }

            .panel .slidedown .glyphicon,
            .chat .glyphicon {
                margin-right: 5px;
            }

        .chat-panel .panel-body {
            height: 350px;
            overflow-y: scroll;
        }

        .login-panel {
            margin-top: 25%;
        }

        .flot-chart {
            display: block;
            height: 400px;
        }

        .flot-chart-content {
            width: 100%;
            height: 100%;
        }

        .dataTables_wrapper {
            position: relative;
            clear: both;
        }

        table.dataTable thead .sorting,
        table.dataTable thead .sorting_asc,
        table.dataTable thead .sorting_desc,
        table.dataTable thead .sorting_asc_disabled,
        table.dataTable thead .sorting_desc_disabled {
            background: 0 0;
        }

            table.dataTable thead .sorting_asc:after {
                content: "\f0de";
                float: right;
                font-family: fontawesome;
            }

            table.dataTable thead .sorting_desc:after {
                content: "\f0dd";
                float: right;
                font-family: fontawesome;
            }

            table.dataTable thead .sorting:after {
                content: "\f0dc";
                float: right;
                font-family: fontawesome;
                color: rgba(50,50,50,.5);
            }

        .btn-circle {
            width: 30px;
            height: 30px;
            padding: 6px 0;
            border-radius: 15px;
            text-align: center;
            font-size: 12px;
            line-height: 1.428571429;
        }

            .btn-circle.btn-lg {
                width: 50px;
                height: 50px;
                padding: 10px 16px;
                border-radius: 25px;
                font-size: 18px;
                line-height: 1.33;
            }

            .btn-circle.btn-xl {
                width: 70px;
                height: 70px;
                padding: 10px 16px;
                border-radius: 35px;
                font-size: 24px;
                line-height: 1.33;
            }

        .show-grid [class^=col-] {
            padding-top: 10px;
            padding-bottom: 10px;
            border: 1px solid #ddd;
            background-color: #eee !important;
        }

        .show-grid {
            margin: 15px 0;
        }

        .huge {
            font-size: 40px;
        }

        .panel-green {
            border-color: #5cb85c;
        }

            .panel-green .panel-heading {
                border-color: #5cb85c;
                color: #fff;
                background-color: #5cb85c;
            }

            .panel-green a {
                color: #5cb85c;
            }

                .panel-green a:hover {
                    color: #3d8b3d;
                }

        .panel-red {
            border-color: #d9534f;
        }

            .panel-red .panel-heading {
                border-color: #d9534f;
                color: #fff;
                background-color: #d9534f;
            }

            .panel-red a {
                color: #d9534f;
            }

                .panel-red a:hover {
                    color: #b52b27;
                }

        .panel-yellow {
            border-color: #f0ad4e;
        }

            .panel-yellow .panel-heading {
                border-color: #f0ad4e;
                color: #fff;
                background-color: #f0ad4e;
            }

            .panel-yellow a {
                color: #f0ad4e;
            }

                .panel-yellow a:hover {
                    color: #df8a13;
                }
    </style>
    <title>eDNSN</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">

        <%-- <img src="<%= ResolveUrl("../Imgaes/SHeader.jpg")%>" style="width:100%" alt="e-eSNDN"/>--%>

        <img src="../Images/SHeader.jpg" style="width: 100%" alt="e-eSNDN" />

        <!-- 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>
                <%--            <a class="navbar-brand" href="index.html">SSMC - Intranet</a>--%>
            </div>
            <!-- /.navbar-header -->

            <ul class="nav navbar-top-links navbar-right">

                <!-- /.dropdown -->

            </ul>
            <!-- /.navbar-top-links -->
        </nav>
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                This is sidebar
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->

        <div id="page-wrapper">

            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
            <asp:ContentPlaceHolder ID="footercontent" runat="server">
            </asp:ContentPlaceHolder>

        </div>

    </form>
</body>
</html>

Content Page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site2.Master" AutoEventWireup="true" CodeBehind="BootstrapTest.aspx.cs" Inherits="WebFormDateError.BootstrapTest" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div class="row">               
         <div class="col-lg-12">
            <h3 class="page-header">
                Create PMT</h3>       
             </div>     
    </div>         
    <div style="border: 2px solid #EAEAEA; padding: 15px 15px 15px 15px; border-radius: 15px">
        <div runat="server" id="MessageBox" visible="false" class="alert alert-success">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <asp:Label ID="lblmsg" runat="server" Text="Label" Font-Bold="True"></asp:Label>        
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div id="div1" class="panel panel-primary">
                    <div class="panel-heading">
                        Issuer's Details
                    </div>
                                   
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-6 col-lg-6">
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Initiator:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblInitiator" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Division:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblDivision" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>                                                   
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Section:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblSection" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        EmpID:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblEmpID" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>
                                </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-lg-12">
                                    <div class="panel-heading">
                                    Details of Suppliers
                                    </div>
                                <div class="col-sm-6 col-lg-6">
                              
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Cateogry Name:<span style="color:red">*</span></label>
                                    <div class="input-group col-md-8">
                                        <asp:DropDownList ID="drpCategoryName" runat="server" CssClass="form-control">                                           
                                        </asp:DropDownList>
                                    </div>                                    
                                </div> 
                                
                            </div>
                            </div>
                            </div>
                            <
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Manager:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblApproverMgr" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Purpose of Removal:<span style="color: #FF0000">*</span></label>
                                    <div class="input-group col-md-8">
                                        <asp:TextBox ID="txtReason" runat="server" Width="100%" Height="50px" TextMode="MultiLine" Placeholder="Please fill in reason for removal" CssClass="form-control"></asp:TextBox>
                                    </div>
                                </div>
                                    <div class="col-sm-6 col-lg-6">
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Department:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblDept" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        ext No:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblExtNo" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Cost Center:</label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="lblCostCenter" runat="server" Text="Label" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Submitted on:</label>
                                    <div class="input-group date" id="tbxSamplingDate1">
                                        <asp:TextBox ID="tbxSamplingDate" runat="server" Width="100%" CssClass="form-control" Style="left: 0px; top:0px"></asp:TextBox>
                                        <span class="input-group-addon"><span class="fa fa-calender"></span></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Due Date:<span style="color: red">*</span></label>
                                    <div class="input-group col-md-8">
                                    <div class="input-group date" id="txtSmaplingDate1">
                                        <asp:TextBox ID="txtDueDate" runat="server" Width="100%" CssClass="form-control" 
                                            Style="left: 0px; top:0px"></asp:TextBox>
                                    <span class="input-group-addon"><span class="fa fa-calender"></span></span>
                                    </div>
                                </div>  
                                        </div>
                                        </div>
                                        <%--Supplier --%>
      
                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                Supplier Details
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-6 col-lg-6">
                                
                                             <!-- when user select ddlSupplier, the Vendor Id and name will fill the respective field unless it is others vendor -->   
                                            <div class="form-group">
                                            <asp:DropDownList ID="ddlSupplier" runat="server" AutoPostBack="true" 
                                            ></asp:DropDownList>
                                     
                                            <div class="form-group">
                                            <label class="col-md-4 control-label" for="inputRefNo">
                                                Vendor Email:<span style="color: red">*</span></label>
                                            <asp:TextBox ID="txtSupplierEmail" runat="server"  Width="100%" CssClass="form-control"></asp:TextBox> 
                                             </div>
                                            <div>
                                              
                                            <!-- To insert code for letting user filling up Supplier email - to have auto-pop up and enable overwrite etc. -->                                          
                                                
                                                 <div class="form-group">
                                                 <label class="col-md-4 control-label" for="radios">Others Vendor<span style="color: red">*</span></label>
                                                 <div class="col-md-4"> 
                                                <label class="radio-inline" for="radios-0">
                                                 <input name="radios" id="radios-Y" value="Yes" checked="checked" type="radio">
                                                Yes
                                             </label> 
                                                <label class="radio-inline" for="radios-1">
                                                 <input name="radios" id="radios-N" value="No" type="radio">
                                                     No
                                                 </label> 
                                            </div>
                                               <div class="form-group">
                                            <label class="col-md-4 control-label" for="inputRefNo">
                                                Contact Person:<span style="color: red">*</span></label>
                                                    <div class="input-group col-md-8">
                                                        <asp:Label ID ="txtSupplierCttPerson" runat="server" OnTextChanged="SupplierCttPerson_TextChanged" Width="100%" CssClass="form-control">
                                                            </asp:Label>
                                                    </div>
                                                   <div class="form-group">
                                            <label class="col-md-4 control-label" for="inputRefNo">
                                                Contact Number:<span style="color: red">*</span></label>
                                                    <div class="input-group col-md-8">
                                                        <asp:Label ID ="txtSupplierCttNumber" runat="server" OnTextChanged="SupplierCttNumber_TextChanged" Width="100%" CssClass="form-control">
                                                            </asp:Label>
                                            </div>
                                        </div>
                                                   <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputRefNo">
                                        Vendor Email:<span style="color: red">*</span></label>
                                    <div class="input-group col-md-8">
                                        <asp:Label ID="Label1" runat="server" Text="Please update new email if any" Width="100%" CssClass="form-control"></asp:Label>
                                    </div>
                                </div>    
                                    </div>
                                    <div class="col-sm-6 col-lg-6">
                                        <div class="form-group">
                                            <label class="col-md-4 control-label" for="inputRefNo">
                                                Supplier Name:<span style="color: red">*</span></label>
                                            <div class="input-group col-md-8">
                                                <table style="width: 100%">
                                                    <tr>
                                                        <td>
                                                            <asp:TextBox ID="tbxSupplierCttPerson" runat="server" CssClass="form-control"></asp:TextBox>                                                            
                                                        </td>
                                                        <td>                                                            
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>         
                                    
                                <%-- Mandatory Fields--%>
        <asp:Label ID="lblMandatory" runat="server" Text="Indicates a mandatory/required field"><font size="5" color="red">* </font><strong> indicates a mandatory/required field </strong></span></asp:Label>
        
                <div class="row">
                    <div class="col-lg-12">
                        <div id="div2" class="panel panel-primary">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-12 col-lg-12">
                                        <div class="form-group text-center">
                                            <div class="col-md-12">
                                               
                                                <asp:button ID="btnSave" runat="server" Text="Save" Width="150px" class="btn btn-outline btn-success" ></asp:button >
                                                <asp:button ID="btnSubmit" runat="server" Text="Submit" Width="150px" class="btn btn-outline btn-success"  ></asp:button>
                                                    
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
           
    </div>                           
                                  
       </asp:Content>    
    <asp:Content ID="Content3" ContentPlaceHolderID="footercontent" runat="server">
    <link href="~/dist/css/bootstrap-datetimepicker.css" rel="stylesheet" />
    <script src="<%= ResolveUrl("~/bower_components/jquery/dist/jquery.min.js")%>" type="text/javascript"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="<%= ResolveUrl("~/bower_components/bootstrap/dist/js/bootstrap.min.js")%>"
        type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/dist/js/moment.js")%>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/dist/js/bootstrap-datetimepicker.js")%>" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $('#tbxSamplingDate1').datetimepicker({

                format: 'DD-MM-YYYY HH:mm:ss'
            });

            $('#txtDueDate').datetimepicker({

                format: 'DD-MM-YYYY HH:mm:ss'
            });
        });
    </script>
</asp:Content>

Best Regards,

Brando

tangara

Member

31 Points

247 Posts

Re: Please help me with this Bootstrap layout...

Dec 14, 2016 04:07 AM|tangara|LINK

Hi Brando,

I copied your code wholesale save for the css portion but I am still getting the following error.

[HttpException (0x80004005): Control 'ContentPlaceHolder1_txtReason' of type 'TextBox' must be placed inside a form tag with runat=server.]
   System.Web.UI.Page.VerifyRenderingInServerForm(Control control) +9645406
   System.Web.UI.WebControls.TextBox.AddAttributesToRender(HtmlTextWriter writer) +52
   System.Web.UI.WebControls.WebControl.RenderBeginTag(HtmlTextWriter writer) +20
   System.Web.UI.WebControls.TextBox.Render(HtmlTextWriter writer) +21
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +66
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +128
   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +13
   System.Web.UI.Control.Render(HtmlTextWriter writer) +12
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +66
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +128
   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +13
   System.Web.UI.Control.Render(HtmlTextWriter writer) +12
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +66
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +128
   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +13
   System.Web.UI.Page.Render(HtmlTextWriter writer) +29
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +66
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1303

- Reply
Brando ZWZ
Star

8791 Points

2657 Posts

Re: Please help me with this Bootstrap layout...

Dec 15, 2016 07:31 AM|Brando ZWZ|LINK

Hi tangara,

tangara
Control 'ContentPlaceHolder1_txtReason' of type 'TextBox' must be placed inside a form tag with runat=server.]

As far as I know, this error means the content page's txtReason textbox not in the form tag.

I suggest you could recheck your master page's codes to make sure the ContentPlaceHolder is inside the form tag.

Best Regards,

Brando
- Reply
tangara
Member

31 Points

247 Posts

Re: Please help me with this Bootstrap layout...

Dec 16, 2016 02:53 AM|tangara|LINK

Tks Brando. I managed to resolve the issue. I think the lethargy sank in me...being new in programming....Once again, thank you so much for helping.

‹ Previous Thread|Next Thread ›