I have this code and i would like to ask ways how to display the result of my query into my textbox named "Textbox1"
<%# page language="C#" autoeventwireup="true" codeBehind="Default.aspx.cs" inherits="MainPage, App_Web_rlctbjj5" %>
<%# Import Namespace="System.Data" %>
<%# Import Namespace="System.Data.SqlClient" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string connect = ConfigurationManager.ConnectionStrings["TDBSConnectionString"].ConnectionString;
string query = "SELECT news, news_date FROM [IBSI].[dbo].[ibsi.news]";
if (query != null)
{
using (SqlConnection conn = new SqlConnection(connect))
{
using (SqlCommand cmd = new SqlCommand(query, conn))
{
conn.Open();
SqlDataReader rdr = cmd.ExecuteReader();
if (rdr.HasRows)
{
while (rdr.Read())
{
Response.Write("<p>");
Response.Write("<strong>" + rdr["news"].ToString() + "</strong><br />");
Response.Write(rdr["news_date"].ToString() + "</p>");
}
}
}
}
}
else
{
Response.Write("<p>No customer selected</p>");
}
Response.End();
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>iBSI SLA Manager</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="keywords" content="iBSI SLA Manager" />
<meta name="description" content="SLA Manager" />
<meta name="author" content="iBSI" />
<meta name="copyright" content="Copyright 2010-2011 by Wenchester M. Visitacion" />
<meta name="company" content="iBSI SLA Manager" />
<%-- <link rel="shortcut icon" href="../styles/images/favicon.ico" />--%>
<link rel="icon" type="image/jpg" href="Styles/images/IBSI_LOGO.png" />
<link rel="Stylesheet" href="Styles/CoreStyle.css?version=1.0.1" type="text/css"
media="all" />
<link rel="Stylesheet" href="dojox/layout/resources/FloatingPane.css" type="text/css" />
<link rel="Stylesheet" href="dojox/layout/resources/ExpandoPane.css" type="text/css" />
<link rel="Stylesheet" href="dojox/widget/Toaster/Toaster.css" type="text/css" />
<link rel="Stylesheet" href="dojo/resources/dojo.css" type="text/css" />
<link rel="Stylesheet" href="dijit/themes/claro/claro.css" type="text/css" />
<link rel="Stylesheet" href="dojox/resources/Grid.css" type="text/css" />
<link rel="Stylesheet" href="dojox/resources/claroGrid.css" type="text/css" />
<link rel="Stylesheet" href="dojox/form/resources/CheckedMultiSelect.css" type="text/css" />
<link rel="Stylesheet" href="dojox/form/resources/FileInput.css" type="text/css" />
<link rel="Stylesheet" href="dojox/grid/enhanced/resources/claroEnhancedGrid.css"
type="text/css" />
<link rel="stylesheet" type="text/css" href="Scripts/style.css" media="all" />
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="Scripts/carosel.js"></script>
<script>
$(function() {
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
hoverPause:true,
visible: 3,
auto:500,
speed:3000
});
});
</script>
<script type="text/javascript" src="dojo/dojo.js" djconfig="parseOnLoad: true "></script>
<script type="text/javascript">
dojo.require("dojo.CheckboxTree");
dojo.require("dojo.CheckboxForestStoreModel");
</script>
<script type="text/javascript" src="Scripts/CoreScript.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/Dashboard.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/Node.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/Menu.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/Role.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/RoleMembers.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/AccessRights.min.js?version=1.0.1"> </script>
<script type="text/javascript" src="Scripts/User.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/Company.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/Customer.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/TransactionType.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/Transaction.min.js?version=1.0.5"></script>
<script type="text/javascript" src="Scripts/WorkFlowIn.min.js?version=1.0.1"></script>
<script type="text/javascript" src="Scripts/WorkFlowOut.min.js?version=1.0.2"></script>
<script type="text/javascript" src="Scripts/DocumentControl.min.js?version=1.0.5"></script>
<script type="text/javascript" src="Scripts/Periodic.min.js?version=1.0.2"></script>
<script type="text/javascript" src="Scripts/PeriodicInstruction.min.js?version=1.0.2"></script>
<script type="text/javascript" src="Scripts/CustomerTransaction.min.js?version=1.0.2"></script>
<script type="text/javascript" src="Scripts/CustomerConcern.min.js?version=1.0.2"></script>
<script type="text/javascript" src="Scripts/TransactionInquiry.min.js?version=1.0.2"></script>
<script type="text/javascript" src="Scripts/CustomerConcernInquiry.min.js?version=1.0.2"></script>
<script type="text/javascript" src="Scripts/PeriodicInstructionInquiry.min.js?version=1.0.2"></script>
</head>
<body class="claro" style="background-color: #000000;">
<div dojotype="dojox.widget.Toaster" id="ToasterMessage" positiondirection="br-left"
duration="500" messagetopic="ToasterMessage">
</div>
<div id="bc" style="width: 100%; height: 100%; padding: 0px 5px 5px 5px;" dojotype="dijit.layout.BorderContainer">
<div id="header" dojotype="dijit.layout.ContentPane" region="top" style="background-color: Transparent;
height: 60px; border: 0px; overflow: hidden;">
<div id="divLoginInfo" class="LoginInfo">
<div>
<span id="spanUsername">Hi User!</span> <span id="spanChangePassword" class="LinkDrill">
[Change Password]</span> <span id="spanSignout" class="LinkDrill">[Signout]</span></div>
<div style="margin-top: 10px;">
<div style="text-align: right;">
<span id="spanDate"></span>
</div>
<div style="text-align: right;">
<span id="spanTime"></span>
</div>
</div>
</div>
<img src="Styles/images/sparkbanner.jpg" style="height: 100px; width: auto;" />
</div>
<div jsid="MainLeft" id="MainLeft" dojotype="dojox.layout.ExpandoPane" splitter="true"
duration="275" region="left" title="Menu" previewondblclick="true" maxwidth="230"
style="background-color: Transparent; width: 210px;" easein="dojo.fx.easing.backOut"
easeout="dojo.fx.easing.backInOut">
<div dojotype="dijit.layout.TabContainer" id="TabContainerMain" jsid="TabContainerMain"
region="center" attachparent="true" tabposition="bottom" tabstrip="true" style="background-color: Transparent;
border: 0px;">
<div id="ContentPaneMain_Login" jsid="ContentPaneMain_Login" dojotype="dijit.layout.ContentPane"
style="background-color: Transparent;">
<div style="padding-top: 50px; margin-left: 10px; background-color: Transparent;">
<div>
UserName:
<input jsid="TextBoxUserName" id="TextBoxUserName" dojotype="dijit.form.TextBox"
type="text" style="width: 90%;" selectonclick="true" />
</div>
<div>
Password:
<input jsid="TextBoxPassword" id="TextBoxPassword" dojotype="dijit.form.TextBox"
type="password" style="width: 90%;" selectonclick="true" />
</div>
<div>
<button jsid="ButtonLogin" id="ButtonLogin" dojotype="dijit.form.Button" style="float: right;
padding: 5px 15px 0px 0px;">
Login</button>
</div>
<br />
<br />
<span id="spanMessage"></span>
</div>
</div>
</div>
</div>
<div id="MainRight" jsid="MainRight" dojotype="dijit.layout.ContentPane" splitter="true"
region="center" style="background-color: transparent; padding: 0px; border: 0px;">
<div dojotype="dijit.layout.TabContainer" region="left" id="TCCenterPane" tabstrip="true"
style="margin-top: -4px; border: 0px;">
<div dojotype="dijit.layout.ContentPane" title="Home" selected="true" style="padding: 0px;
background-color: #000000;">
<form id="form1" runat="server">
<div style="position:absolute;z-index:200; left:52.5%;top:9%;">
<asp:TextBox ID="TextBox1" runat="server" Height="168px" TextMode="MultiLine"
Width="303px"></asp:TextBox>
<div class="news">
<div class="newsticker-jcarousellite" style="position:absolute;z-index:200; left:52.5%;top:9%;">
</div></div></div>
<div style="position:absolute;z-index:200; left:52.5%;top:52%;">
<asp:TextBox ID="TextBox2" runat="server" Height="168px" TextMode="MultiLine"
Width="303px"></asp:TextBox>
</div>
</form >
<div style="width: 100%; height: 90%; background: #000000 url(Styles/images/IBSI_LOGO1.png) no-repeat center;">
</div>
</div>
</div>
</div>
</div>
<div jsid="DialogAlertMessage" id="DialogAlertMessage" dojotype="dijit.Dialog" title="Alert Box"
style="padding: 0px 0px 0px 0px;">
<div style="width: 300px; min-height: 50px;">
<span id="spanAlertMessage">Empty Alert Message</span>
<br />
<div style="float: right;">
<button id="ButtonOKAlertMessage" jsid="ButtonOKAlertMessage" dojotype="dijit.form.Button">
OK</button></div>
</div>
</div>
<div jsid="DialogConfirmMessage" id="DialogConfirmMessage" dojotype="dijit.Dialog"
title="Confirmation" title="Alert Box" style="padding: 0px 0px 0px 0px;">
<div style="width: 300px">
<span id="spanConfirmMessage">Empty Alert Message</span>
<br />
<div style="float: right">
<button id="ButtonConfirmMessageYES" jsid="ButtonConfirmMessageYES" dojotype="dijit.form.Button">
YES</button>
<button id="ButtonConfirmMessageNO" jsid="ButtonConfirmMessageNO" dojotype="dijit.form.Button">
NO</button>
</div>
<br />
</div>
</div>
<div jsid="DialogReportPreview" id="DialogReportPreview" dojotype="dijit.Dialog"
aria-describedby="intro" title="Required" autofocus="true">
<iframe id="iframeReportPreview" onload="StandbyPreview.hide()" frameborder="0" style="width: 900px;
height: 500px;"></iframe>
</div>
<div jsid="StandbyPreview" id="StandbyPreview" dojotype="dojox.widget.Standby" color="#E4F4FC"
target="TabContainerMain" zindex="9000" slidefrom="bottom" image="Styles/Images/Progress/loadingSmall.gif">
</div>
<div jsid="DialogChangePassword" id="DialogChangePassword" dojotype="dijit.Dialog"
aria-describedby="intro" title="Change Password" autofocus="false">
<div style="height: 200px; width: 520px;">
<div style="width: 150px; padding: 15px 0px 10px 20px; height: 180px; float: left;">
<div style="height: 165px; width: 140px; border: 1px solid gray; padding: 3px 3px 3px 3px;">
To ensure system security, do not use familiar words for password initials, favorite
expressions and names of love ones or popular persons. We suggest to change passwords
regularly or once a month.</div>
</div>
<div style="width: 100px; padding: 50px 0px 10px 10px; float: left; font-family: 'Segoe UI';">
<div style="height: 18px; padding-top: 3px;">
User Name:</div>
<div style="height: 18px; padding-top: 3px;">
Old Password:</div>
<div style="height: 18px; padding-top: 3px;">
New Password:</div>
<div style="height: 18px; padding-top: 3px;">
Confirm Password:</div>
</div>
<div style="width: 200px; padding: 50px 0px 10px 10px; float: left;">
<div style="height: 18px; padding-top: 3px;">
<input jsid="TextBoxCurrentUserName" id="TextBoxCurrentUserName" dojotype="dijit.form.TextBox"
type="text" style="width: 100%;" selectonclick="true" readonly="true" /></div>
<div style="height: 18px; padding-top: 3px;">
<input jsid="TextBoxOldPassword" id="TextBoxOldPassword" dojotype="dijit.form.TextBox"
type="password" style="width: 100%;" selectonclick="true" /></div>
<div style="height: 18px; padding-top: 3px;">
<input jsid="TextBoxNewPassword" id="TextBoxNewPassword" dojotype="dijit.form.TextBox"
type="password" style="width: 100%;" selectonclick="true" /></div>
<div style="height: 18px; padding-top: 3px;">
<input jsid="TextBoxConfirmPassword" id="TextBoxConfirmPassword" dojotype="dijit.form.TextBox"
type="password" style="width: 100%;" selectonclick="true" /></div>
</div>
<div style="float: right; padding-right: 25px;">
<button jsid="ButtonChangePassword" id="ButtonChangePassword" dojotype="dijit.form.Button">
Proceed</button>
</div>
</div>
</div>
i use this to display the value of the retrieve data on screen.
Response.Write("<p>");
Response.Write("<strong>" + rdr["news"].ToString() + "</strong><br />");
Response.Write(rdr["news_date"].ToString() + "</p>");
Normally you would write something like this :
TextBox1.Text = rdr["news"].ToString();
However it looks like your query is likely to return more than 1 row (and more than 1 column). The TextBox can only hold 1 value, so if you do that, you will only see the content of the last row.
In your case it is probably better to use a control that can display the value(s) of several rows, such as the GridView, the ListView, the Repeater or the DataList.
It's using a dojo framework dude. So try how to use the controls here: http://dojotoolkit.org/.
for the dojo textbox, setting the value is dijit.byId('TextBox1').set('value', 'sampleValue');
I created that project from scratch. But I guess you were the one continued it. Goodluck. :)
Related
I'm using bootstrap-tempus-dominus for Datetimepickers in my application.
How can I change the color of the displayed month and day's names with css
Just add the custom style below in your page it will work as desired:
.bootstrap-datetimepicker-widget table th.picker-switch{
color:#000 !important;
}
.bootstrap-datetimepicker-widget table th{
color:#000 !important;
}
Check this example:
$(function() {
$('#datetimepicker1').datetimepicker();
});
.bootstrap-datetimepicker-widget table th.picker-switch{
color:#0f0 !important;
}
.bootstrap-datetimepicker-widget table th{
color:#0f0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.js"></script>
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
<span class="input-group-addon" data-target="#datetimepicker1" data-toggle="datetimepicker">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
I want to use Summernote WYSIWYG Editor in Google Material Design.
It works, but if you try to open a popup, everything gets grey and you can't click anywhere:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="miniHUB. Das Portal für Ministranten!">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<title>TestPage</title>
<meta name="theme-color" content="#3372DF">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-light_blue.min.css">
<link rel="stylesheet" href="styles.css">
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
<!-- Summernote -->
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
</head>
<body>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">miniHUB</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<!--<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>-->
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search">
<label class="mdl-textfield__label" for="search">Suche...</label>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
<li class="mdl-menu__item" onclick="loadPage('about.html')"><a>Über/Kontakt</a></li>
<li class="mdl-menu__item">WhatEver</li>
</ul>
</div>
</header>
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" style="width: 100%;">
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric" style="width: 0px;">ℹ</td>
<td class="mdl-data-table__cell--non-numeric" style="width: 0px;">Beschreibung:</td>
<td class="mdl-data-table__cell--non-numeric"><textarea style="overflow-y: auto; width: 100%; border: none;" name="beschreibung" id="beschreibung"></textarea></td>
</tr>
</table>
</main>
</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script>
function loadPage(page) {
document.location = page;
};
</script>
<script>
$('#adminedit').click(function () {
document.location = "admin.html";
});
function summernoteInit(){
$('#beschreibung').summernote('code', "");
$('#beschreibung').summernote({
height: 300,
popover: {
image: [],
link: [],
air: []
}
})
}
$(document).ready(function(){
summernoteInit();
});
</script>
</body>
</html>
If I only use pure HTML, it's working very good.
I already tried to use z-index and different divs, but i can't get it working.
Thanks for your Help!
I found a way to correct the problem:
function deleteProblems (){
$('.modal-backdrop').remove();
window.setTimeout(deleteProblems, 200);
}
function summernoteInit(){
$('#beschreibung').summernote('code', "");
$('#beschreibung').summernote({
height: 300,
popover: {
image: [],
link: [],
air: []
}
})
}
$(document).ready(function(){
summernoteInit();
window.setTimeout(deleteProblems, 500)
});
Hopefully it helps you!
Philipp
Hi everyone , I'm working on angularjs which preforms a form filling with validation ,after the submission the data goes into the table . I have an option to edit it . To edit i have used bootstrap modal to edit . Everything is going fine in plunker but the problem is , when i try to run the same code in local browser it is not working . Please help me with it
Let me show you the code :
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Tables with Borders</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js'></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.1.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="script.js"></script>
<script src="controller/listCtrl.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<style type="text/css">
.bs-example {
margin: 20px;
}
</style>
</head>
<body>
<div ng-app="app" ng-controller="CustomerController">
<div class="main-content">
<!-- You only need this form and the form-basic.css -->
<form name="exampleForm" class="elegant-aero" ng-submit="addNew(personalDetails); form.$setPristine()">
<label>Name:</label>
<input type="text" name="userFirstName" ng-model="personalDetails.name" required />
<div ng-messages="exampleForm.userFirstName.$error">
<div ng-message="required">This field is required</div>
</div>
<label>Email Address:</label>
<input type="email" name="userEmail" ng-model="personalDetails.email" required />
<div ng-messages="exampleForm.userEmail.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>
<label>Phone Number:</label>
<input type="text" name="userPhoneNumber" ng-model="personalDetails.phone" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
<div ng-messages="exampleForm.userPhoneNumber.$error">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>
<label>User Address:</label>
<textarea type="text" name="userMessage" class="form-control" rows="4" ng-model="personalDetails.address" ng-minlength="10" ng-maxlength="100" required></textarea>
<div ng-messages="exampleForm.userMessage.$error">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Message must be over 10 characters</div>
<div ng-message="maxlength">Message must not exceed 100 characters</div>
</div>
<br>
<div class="form-row">
<button type="submit" class="btn btn-primary" ng-click="submit()">Submit Form</button>
</div>
</form>
</div>
<div>
<div class="row" ng-hide="!personalDetails.length">
<div class="bs-example">
<table id="example" class="table table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name
</th>
<th>Email
</th>
<th>Phone Number
</th>
<th>Address
</th>
<th>Editing
</th>
<th>Delete
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>{{personalDetail.name}}</td>
<td>{{personalDetail.email}}</td>
<td>{{personalDetail.phone}}</td>
<td>{{personalDetail.address}}</td>
<td>
<button class="btn btn-default" ng-click="open(personalDetail)">Edit {{ personalDetail.name }}</button>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>The Customer Name is: {{ personalDetail.name }}</h3>
</div>
<div class="model-body">
This is where the Customer Details Goes
<br />
<form name="exampleForm" class="elegant-aero" ng-submit="addNew(customer); form.$setPristine()">
<label>Name:</label>
<input type="text" name="userFirstName" ng-model="customer.name" required />
<div ng-messages="exampleForm.userFirstName.$error">
<div ng-message="required">This field is required</div>
</div>
<label>Email Address:</label>
<input type="email" name="userEmail" ng-model="customer.email" required />
<div ng-messages="exampleForm.userEmail.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>
<label>Phone Number:</label>
<input type="text" name="userPhoneNumber" ng-model="customer.phone" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
<div ng-messages="exampleForm.userPhoneNumber.$error">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>
<label>User Address:</label>
<textarea type="text" name="userMessage" class="form-control" rows="4" ng-model="customer.address" ng-minlength="10" ng-maxlength="100" required></textarea>
<div ng-messages="exampleForm.userMessage.$error">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Message must be over 10 characters</div>
<div ng-message="maxlength">Message must not exceed 100 characters</div>
</div>
<br>
<div class="form-row">
<button class="btn btn-primary" ng-click="ok(personalDetail)">Update Customer</button>
</div>
</form>
</div>
</script>
</td>
<td>
<input type="button" class="btn btn-danger pull-right" data-ng-click="remove(personalDetail.name)" value="Remove">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
script.js
var app = angular.module('app', ['ui.bootstrap', 'ngMessages']);
app.controller('CustomerController', function($scope, $timeout, $modal, $log) {
var taskData = localStorage['tasksList'];
if (taskData !== undefined) {
$scope.personalDetails = JSON.parse(taskData);
}
$scope.personalDetails = [{
'name': 'Muhammed',
'email': 'shanid#shanid.com',
'phone': '8095187009',
'address': 'Bangalore'
}, {
'name': 'Muhammed',
'email': 'shanid#shanid.com',
'phone': '8095187009',
'address': 'Bangalore'
}, {
'name': 'Muhammed',
'email': 'shanid#shanid.com',
'phone': '8095187009',
'address': 'Bangalore'
}];
$scope.addNew = function(personalDetails) {
$scope.personalDetails.push({
'name': personalDetails.name,
'email': personalDetails.email,
'phone': personalDetails.phone,
'address': personalDetails.address,
});
$scope.PD = {};
localStorage['tasksList'] = JSON.stringify($scope.personalDetails);
$scope.personalDetails = angular.copy($scope.personalDetails);
};
$scope.remove = function(name) {
var index = -1;
var comArr = eval($scope.personalDetails);
for (var i = 0; i < comArr.length; i++) {
if (comArr[i].name === name) {
index = i;
break;
}
}
if (index === -1) {
alert("Something gone wrong");
}
$scope.personalDetails.splice(index, 1);
};
// MODAL WINDOW
$scope.open = function(customer) {
var modalInstance = $modal.open({
controller: "ModalInstanceCtrl",
templateUrl: 'myModalContent.html',
resolve: {
customer: function() {
return customer;
}
}
});
};
});
app.controller('ModalInstanceCtrl', function($scope, $modalInstance, customer) {
$scope.customer = customer;
$scope.ok = function(customer) {
$modalInstance.close($scope.customer);
};
});
//]]>
style.css
/*
Credit: http://www.sanwebe.com/2013/10/css-html-form-styles
*/
.elegant-aero {
margin-left:auto;
margin-right:auto;
margin-top: 25px;
max-width: 600px;
background: #D2E9FF;
padding: 20px 20px 20px 20px;
font: 12px Arial, Helvetica, sans-serif;
color: #666;
}
.elegant-aero label {
display: block;
margin: 0px 0px 5px;
}
.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea {
color: #888;
width: 60%;
padding: 0px 0px 0px 5px;
border: 1px solid #C5E2FF;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
box-shadow: inset 0px 1px 6px #ECF3F5;
font: 200 12px/25px Arial, Helvetica, sans-serif;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
}
.elegant-aero textarea{
height:100px;
padding: 5px 0px 0px 5px;
width: 60%;
}
.elegant-aero div {
display:inline-block;
vertical-align:top;
color: red;
margin-top: 5px;
}
And let me show you my plunker which works fine :https://plnkr.co/edit/zHzQU09RI6bKcDtC8bzy?p=preview
Please help me with this . It will be grateful if somebody help me with this .
There are some references which won't load when you run it on your machine, change them as below,
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="sample.js"></script>
I've got three items on the top of my web page. I expect them to be located left, center, and right. However, that one in the center is a bugger (partially because it's created late in the game). I've tried the auto margin tricks with no luck. I've tried relative positioning but can't get it perfectly centered (and it draws on its neighbors). In the full code below, can you get the "showInMiddle" centered? You need to click the login button for that item to show up. Ideally, the items would wrap if the page was too narrow but still maintain their alignment (rather than drawing on top of each other or all on the left).
<!DOCTYPE html>
<html>
<head>
<title>This is dumb</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">
<header style="width: 100%">
<h4 id="showOnLeft" style="font-size: 1.1em; display: inline;">I'm the title</h4>
<span id="showInMiddle" data-bind="visible: LoggedIn">
I'm supposed to be in the middle with my two buttons.
<button>B1</button>
<button>B2</button>
</span>
<div id="showOnRight" style="display: inline; float: right">
<form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<input type="submit" value="Login" />
</form>
<form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
<span>Howdy</span>
<input type="submit" value="Logout" />
</form>
</div>
<nav><hr/></nav>
</header>
<script type="text/javascript">
function LoginViewModel() {
var self = this;
self.LoggedIn = ko.observable(false);
self.login = function (formElement) { self.LoggedIn(true); };
self.logout = function (formElement) { self.LoggedIn(false); };
}
ko.applyBindings(new LoginViewModel());
</script>
</body>
</html>
You cannot center a span because it's an inline element which doesn't know its width by default.
You can simply replace span with div like this (watch the inline CSS):
<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center ">
I'm supposed to be in the middle with my two buttons.
<button>B1</button>
<button>B2</button>
</div>
This is quick - I am off to go home. Try adjusting the width where the login form is concerned. You need to be aware that the total of floatdiv should never exceed the total of container or it will go wrong.
<!DOCTYPE html>
<html>
<head>
<title>
This is dumb
</title>
<style>
#container {
width:900px;
margin: auto 0;
overflow: auto;
}
.floatdiv {
float:left;
margin:0;
}
</style>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">
<div id="container">
<div class="floatdiv" style="font-size: 1.1em; width:200px">
I'm the title
</div>
<div class="floatdiv" id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center; width:300px ">
<button>
B1
</button>
<button>
B2
</button>
</div>
<div class="floatdiv" id="showOnRight" style="width:300px; float:right; text-align:right">
<form id="someLoginForm" style="" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<input type="submit" value="Login" />
</form>
<form id="someLogoutForm" style="" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
<span>
Howdy
</span>
<input type="submit" value="Logout" />
</form>
</div>
</header>
</div>
</body>
</html>
It ends up that this works flawlessly when you use a table. Who knew?
<!DOCTYPE html>
<html>
<head>
<title>This is dumb</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script>
<style type="text/css">
table, tr, td, h4, div { margin: 0px; padding: 0px; }
</style>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">
<header style="width: 100%">
<table style="width: 100%; border-width: 0px;">
<tr>
<td><h4 id="showOnLeft" style="font-size: 1.1em;">I'm the title</h4></td>
<td>
<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align: center;">
I'm supposed to be in the middle with my two buttons.
<button>B1</button>
<button>B2</button>
</div>
</td>
<td>
<div id="showOnRight" style="text-align: right;">
<form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<input type="submit" value="Login" />
</form>
<form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
<span>Howdy</span>
<input type="submit" value="Logout" />
</form>
</div>
</td>
</tr>
</table>
<nav><hr/></nav>
</header>
<script type="text/javascript">
function LoginViewModel() {
var self = this;
self.LoggedIn = ko.observable(false);
self.login = function (formElement) { self.LoggedIn(true); };
self.logout = function (formElement) { self.LoggedIn(false); };
}
ko.applyBindings(new LoginViewModel());
</script>
</body>
</html>
Heres the link to the page In question....
http://team2648.com/OTIS2/DivTest.html
So If you look at that page, If your browser is small enough, you see that below the box with the red background, there is a bit of space, Why doesn't the box below float up?
The HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OTIS v1.5</title>
<!-- Javascript - Fix the flash of unstyled content -->
<script type="text/javascript"></script>
<!-- Stylesheets -->
<link href="css/reset.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/styling.css" rel="stylesheet" type="text/css" media="screen" />
<!--Validation-->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/common.js" type="text/javascript"></script>
<!-- Meta Information -->
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Techplex Engineer" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-10899272-10']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="header-in">
<h2>Online Team Information System</h2>
<h6>A Web Database Application for Team Profile Management</h6>
</div> <!-- end #header-in -->
</div> <!-- end #header -->
<div id="content-wrap" class="clear lcol"> <!-- Navigation Column-->
<div class="column">
<div class="column-in">
<ul>
<li> My </li>
<ul>
<li> Dashboard </li>
<li> Profile</li>
<li> Information</li>
<li> Emergency Contact</li>
</ul>
<li> Management </li>
<ul>
<li> Users </li>
<li> Email </li><li> Blog </li>
</ul>
<li> Report a Bug </li>
<li> Logout </li>
</ul>
<br />
Logged in as:
<br />
Blake
</div>
</div>
<div class="content">
<div class="content-in">
<h5>Welcome to your personal dashboard Blake </h5><hr id="hr1"/>
<div id="bio" style="display: none;">
Your current Bio: <br/><textarea rows="10" cols="50"> </textarea>
</div>
<div id="profilestats" class="widget">
<strong>IMPORTANT</strong><br/>
<ul style="padding-left: 10px;">
<li>Your Public Profile is pending moderation.</li>
</ul>
</div>
<div id="cal" class="widget">
<!-- <iframe src="https://www.google.com/calendar/hosted/team2648.com/embed?showTitle=0&showNav=0&showPrint=0&showTabs=0&showCalendars=0&mode=AGENDA&height=200&wkst=1&bgcolor=%23FFFFFF&src=team2648.com_a1ur39fpp2cn076ak2q06o8hhc%40group.calendar.google.com&color=%235229A3&ctz=America%2FNew_York" style=" border-width:0 " width="400" height="200" frameborder="0" scrolling="no"></iframe>-->
<iframe src="https://www.google.com/calendar/hosted/team2648.com/embed?showNav=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&mode=AGENDA&height=200&wkst=1&bgcolor=%23FFFFFF&src=team2648.com_a1ur39fpp2cn076ak2q06o8hhc%40group.calendar.google.com&color=%235229A3&ctz=America%2FNew_York" style=" border-width:0 " width="400" height="200" frameborder="0" scrolling="no"></iframe>
</div>
<div id="stats" class="widget"><!-- and finally output the information formated for the widget-->
<strong>You have:</strong><br/>
<ul style="padding-left: 10px;">
<li> <strong>42</strong> of 30 fundraising hours<br/></li>
<li>fundraised $<strong>160</strong> of $300<br/></li>
<li> <strong>3</strong> of 5 community service hours<br/></li>
<li> <strong>0</strong> of 40 build hours <br/></li>
</ul>
</div>
<div id="logins" class="widget">
<form name="controlsForm">
<input id="cblogin" type="checkbox" name="loginbox" onClick=""/> Disable Login<br />
<input id="cbreg" type="checkbox" name="regbox" onClick=""/> Disable Registration<br />
</form>
</div>
<div class="clear"></div>
</div><!-- end .content-in -->
</div> <!-- end .content -->
</div> <!-- end #content-wrap -->
<div id="footer">
<div id="footer-in">
This system was designed, built and is maintained by Blake for Infinite Loop Robotics <br>OTIS(Online Team Information System) © 2010 Techplex Labs </div> <!-- end #footer-in -->
</div> <!-- end #footer -->
</div> <!-- end div#container -->
</body>
</html>
You can view the css here:
http://team2648.com/OTIS2/css/styling.css
but the relevant part is this:
div.widget{
width: 200px;
float: left;
/* text-align: center;*/
border: 1px solid black;
padding: 8px;
margin: 8px;
/* margin-left:8px;
font-weight:400;*/
-moz-border-radius:11px;
-khtml-border-radius:11px;
-webkit-border-radius:11px;
border-radius:5px;
background:#fff;
border:2px solid #e5e5e5;
-moz-box-shadow:rgba(200,200,200,1) 0 4px 18px;
-webkit-box-shadow:rgba(200,200,200,1) 0 4px 18px;
-khtml-box-shadow:rgba(200,200,200,1) 0 4px 18px;
box-shadow:rgba(200,200,200,1) 0 4px 18px;
/* padding:16px 16px 40px;*/
}
div#disclaimer
{
margin-top: 10px;
border: 1px dotted black;
font-size:10px;
background-color: #D7D7D7;
}
div.clear
{
clear: both;
}
div#profilestats
{
border:2px solid #FF9999;
}
div#cal
{
width: 400px;
padding-bottom: 0px;
}
I don't know if you have this as you like, but with the comments, I see when you make the full window smaller, the box with the calendar in it (cal) moves below the red Important box (profilestats).
IF you wish this to be closer (close the gap between these) what is causing the space is the DIV.widget in styling.css, margin:8px; besides that, I see nothing causing space at this point with that change - I tested this in IE8 and removing that CSS element setting did indeed push them directly conjunctual with no space between.
Now if what you mean is moving the "stats" up directly below the "profilestats" then that is another matter which can be resolved a couple of different ways.
put "profilestats" and "stats" in a div together (with "cal" and "logins" in
another div together, and float both "container" divs left.
Use the float:left and float: right on the left and right
elements, but that will introduce a space between if the width is
extended (browser width) unless addressed through additional css.
In this case, I would opt for #1 as the css is easier to control.
NOTE: be cautious of margins on IE6 in float left elements at times it can be inconsistent.
The reason why this happening is because both profilestats div and cal div are float:left. Try a float:right; on cal div so that the next div which is floated left(stats) can take the available space below profilestats.