After more than a month of coding I though I'm already finish it that's why I put it on hosting already, but after I check it on my mobile phone it shock me of the result :(
This is the result in mobile
Form image
Form image with table
anyone can give me an idea on what should I do? i dont want to make from scratch again this is my css, this is two column in 1 page with form in the left and table in the right
body {
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h3 {
position:relative;
text-align: center;
margin: 0;
font-size: 32px;
color: #fff;
z-index: 2;
}
.column {
float: left;
padding: 10px;
}
.left {
padding: 25px;
margin: 25px;
width: 40%;
border-radius: 5px;
box-shadow: 1 2px 5px #f5f5f5;
background: white;
border: solid 1px #ccc;
border: 2px solid dodgerblue;
}
.right {
padding: 25px;
margin: 25px;
width: 50%;
border-radius: 5px;
box-shadow: 1 2px 5px #f5f5f5;
background: white;
border: 2px solid dodgerblue;
}
.row:after {
content: "";
display: table;
clear: both;
}
input[type="text"]
{
display: inline-block;
float: left;
padding: 12px; line-height: 5px;
margin: 5px;
height: 40px;
}
label {
display: inline-block;
width: 150px;
padding-left: 5px
}
.main-block {
display: flex;
justify-content: center;
min-height: 100vh;
background-color: #85C1E9;
}
.btn-block {
margin-top: 10px;
text-align: center;
}
button {
outline: none;
font-family: Roboto, Arial, sans-serif;
border: none;
border-radius: 5px;
background: #00BFFF;
font-size: 50px;
color: #fff;
cursor: pointer;
}
button:hover {
background: cyan;
}
.msg {
margin: 30px auto;
padding: 10px;
border-radius: 5px;
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
width: 50%;
text-align: center;
}
.mix3 {
margin: 0px;
width: 100%;
border-width: strong;
padding: 10px 10px;;
}
This is the form
<div class="main-block">
<div class="column left">
<i class="fa fa-window-restore"></i>
<div class="mix3">
<h5 style="text-align: center; margin-bottom:-10px"><b style="color:red"> STATUS:<a style="color:blue"> <?php echo $status; ?></a></b></h5>
</div>
<form name="frmUser" method="post">
<div><?php if(isset($message)) { echo $message; } ?>
</div>
<div >
<h3><b>Payment Voucher Form </b></h3>
</div>
<div style="margin-bottom:10px; margin-top:20px; " class="bootstrap-demo">
<label style="margin-left: 20px; font-weight: bold;" class="checkbox-inline"> <!-- class checkbox-inline to display checkbox inline -->
<!-- input type checkbox -->
<input type="checkbox" id="cashbox" value="Cash"> Cash
</label>
<label style="margin-left: -50px; font-weight: bold;" class="checkbox-inline">
<input type="checkbox" id="chequebox" value="Cheque"> Cheque
</label>
<label style="margin-left: -50px; margin-right: -30px; font-weight: bold;" class="checkbox-inline">
<input type="checkbox" id="banktransferbox" value="BankTransfer"> Bank Transfer
</label>
</div>
<input type="hidden" name="userid" class="txtField" value="<?php echo $row['ID']; ?>">
<div class="form-row">
<input type="hidden" name="id" class="txtField" value="<?php echo $row['ID']; ?>">
<div class="col-md-7 mb-2">
<label>Payment Voucher ID</label>
<input placeholder="Payment Voucher ID" id ="pv_no" type="text" name="pvid" class="form-control" value="<?php echo $row['PViD']; ?>">
</div>
<div class="col-md-5 mb-2">
<label>Date</label>
<input placeholder="Date" type="text" id="pvdate" name="pvdate" class="form-control" value="<?php echo $row['PVDate']; ?>">
</div>
<div class="col-md-7 mb-2">
<label>Paid to</label>
<input placeholder="Paid to" type="text" name="pvname" class="form-control" value="<?php echo $row['Name']; ?>">
</div>
<div class="col-md-5 mb-2">
<label>Contact No.</label>
<input placeholder="Contact #" type="text" name="contactnumber" class="form-control" value="<?php echo $row['ContactNumber']; ?>">
</div>
<div class="mb-2" style="padding-left: 20px">
<label>The Sum of</label>
<textarea placeholder="The Sum of" name="suminwords" class="form-control"><?php echo $row['SumInWords']; ?></textarea>
</div>
<div class="mb-2" style="padding-left: 20px">
<label>In Respect of</label>
<textarea placeholder="Respectof" name="respectof" class="form-control"><?php echo $row['RespectOf']; ?></textarea>
</div>
<div class="col-md-6 mb-2">
<label>Price</label>
<input placeholder="Total" type="text" name="price" class="form-control" value="<?php echo $row['Price']; ?>">
</div>
<div class="col-md-6 mb-2" >
<label>Cash</label>
<input placeholder="Cash" type="text" name="cash" class="form-control" value="<?php echo $row['Cash']; ?>">
</div>
<div class="col-md-6 mb-2" style="float:right">
<label>Bank Name</label>
<input placeholder="Bank Name" type="text" name="bankname" class="form-control" value="<?php echo $row['BankName']; ?>">
</div>
<div class="col-md-6 mb-2">
<label>VAT 5%</label>
<input placeholder="VAT" type="text" name="vat" class="form-control" value="<?php echo $row['VAT']; ?>">
</div>
<div class="col-md-6 mb-2">
<label>Total</label>
<input placeholder="Total" type="text" name="total" class="form-control" value="<?php echo $row['Total']; ?>">
</div>
<div class="col-md-6 mb-2">
<label>Cheque No</label>
<input placeholder="Cheque No" type="text" name="chequenumber" class="form-control" value="<?php echo $row['ChequeNumber']; ?>">
</div>
<div class="col-md-6 mb-2" style="float:right">
<label>Cheque Date</label>
<input placeholder="Cheque Date" type="text" id="cheque_date" name="chequedate" class="form-control" value="<?php echo $row['ChequeDate']; ?>">
</div>
<div style="margin-bottom: 150px"> </div>
<label class="col-md-8"> Remarks</label>
<div class="mb-2" style="padding-left: 20px">
<textarea placeholder="Remarks" name="remarks" class="form-control"><?php echo $row['Remarks']; ?></textarea>
</div>
<br>
<div class="col-md-6 mb-2" style="float:right">
<label>Prepared By </label>
<input placeholder="Cheque No." type="text" name="preparedby" class="form-control" value="<?php echo $row['PreparedBy']; ?>">
</div>
<div class="col-md-6 mb-2" style="float:right">
<label>Approved By </label>
<input placeholder="Cheque No." type="text" name="approvedby" class="form-control" value="<?php echo $row['ApprovedBy']; ?>">
</div>
<br><br><br><br><br>
<div class="col-md-6 mb-2" style="float:right">
<label>Received By </label>
<input placeholder="Received By" type="text" name="receivedby" class="form-control" value="<?php echo $row['ReceivedBy']; ?>">
</div>
</div>
<div class="col-md-10 mb-1">
<div class="btn-block">
<button style="width:40%; padding: 10px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); color:black; margin-left: 20px" type="submit" name="submit" value="Submit"><b>Update / Add Record</b></button>
</div>
</div>
</form>
<button onclick="location.href='/payment-voucher'" type="button" style="width:30%; color:white; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); background-color:red; font-size: 15px; float:right; padding: 15px;"><b>Clear</b></button>
</div>
<div class="column right">
<i class="fa fa-window-restore"></i>
<div>
<h3><b>Payment Voucher List </b></h3>
</div>
<div class="col-md-6">
<input size="50" type="text" name="search" id="search" class="form-control" placeholder="Search name.." />
</div>
<br><br><br>
<div class="col-md-4">
<input type="text" name="from_date" id="from_date" class="form-control" placeholder="From Date" />
</div>
<div class="col-md-4">
<input type="text" name="to_date" id="to_date" class="form-control" placeholder="To Date" />
</div>
<div class="col-md-5">
<input type="button" name="filter" id="filter" value="Search" class="btn btn-info" />
</div>
<div style="clear:both"></div>
<br>
<div id="pvoucher">
<table class="table table-bordered">
<tr style="background-color: #85C1E9; color:white; ">
<th>ID</th>
<th>PVID</th>
<th>PVDate</th>
<th>Name</th>
<th>Update</th>
<th>Delete</th>
<th>Print</th>
</tr>
</table>
<?php if (isset($_SESSION['message'])):
$e = $_SESSION['message'];
?>
<div class="msg">
<?php
$e = $_SESSION['message'];
echo '<tr>';
echo '<td colspan="5">'. $e . '</td>';
echo '</tr>';
unset($_SESSION['message']);
?>
</div>
<?php endif
?>
</div>
</div>
</div>
You should use #media and for example when width of window is smaller than 700px set one column. You should also add meta tag to your html to give browser tips how should scal your website on mobile phones.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I am across a little bit confusing problem. I want to display an alert message on the top of the screen when the account is activated. but problem is that when messages shows, the welcome blue box moves down which I don't want. When I close the alert message the content comes in their real position.
This is the html code
<!DOCTYPE html>
<html>
<head>
<?php include_once('head.php'); ?>
<title>Sign Up</title>
</head>
<body>
<?php
if(isset($_SESSION['act'])) ?>
<div class="text-center alert alert-primary alert-dismissible fade show" role="alert">
<?php echo $_SESSION['act']; ?>
<button type="button" class="close" data-dismiss="alert" aria-label="close">
×
</button>
</div> <?php
?>
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="message-container">
<div class="message-inner-box">
<div class="title-container clearfix">
<p class="heading"> Welcome back, </p>
<p class="subheading"> Log In!</p>
</div>
</div>
</div>
<div class="image-header">
<img src="../image/sign up.png" alt="file not found" class="signUp-image">
</div>
</div>
<div class="col-md-5">
<div class="signuUp-header">
<div class="signUp-inner">
<form>
<div class="form-header">
<input type="text" class="input-field" placeholder="Enter Email">
</div>
<div class="form-header">
<div class="input-group">
<input type="password" id="password" class="input-field" placeholder="Password" />
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-lock" id="passwordSeen"> </i></span>
</div>
</div>
</div>
<div class="form-header">
<div class="forgetPassword text-right">
forget Password
</div>
</div>
<div class="form-header rememberMe">
<input type="checkbox" class="" />
<label class="form-check-label"> Remember me </label>
</div>
<div class="form-header">
<input type="submit" class="signUpButton" name="submit"/>
</div>
</form>
<div class="signUpFooter text-center">
<span> I'm a new member Sign Up</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../javascript/app.js"> </script>
</body>
</html>
This is the css code
/*Message box*/
.message-inner-box{
height: 300px;
width: 300px;
border-radius: 50%;
margin-top: -3.2em;
margin-left: -5em;
background-color: var(--message-box-color);
display: flex;
justify-content: center;
align-items: center;
}
.title-container {
margin-top: 50px;
color: var(--message-color);
}
.title-container p {
margin: 0;
}
.heading {
font-size: 1.3em;
font-weight: 600;
}
.subheading {
font-size: 2em;
font-weight: 800;
}
/*Sign Up page*/
.signUp-image {
height: 60%;
width: 60%;
}
.signuUp-header {
padding-top: 5rem;
}
.form-header {
margin-bottom: 2.5em;
}
.input-field {
height: 3em;
width: 80%;
padding: .3rem 2rem;
font-size: 14px;
font-weight: 700;
border: 1px solid var(--input-field-color);
border-radius: 5px;
}
You can add the style property to the alert div to include a negative bottom margin that repositions the element under this alert box.
<div style="margin-bottom: -50px" class="text-center alert alert-primary alert-dismissible fade show" role="alert">
code:
<style>
.center {
float: left;
text-align: center;
}
.center h3 {
color: #000;
font-weight: 600;
}
.left {
font-size: 14px;
float: left;
width: 30%;
color: #000;
}
.right {
font-size: 14px;
float: right;
width: 70%;
color: #000;
}
#bot {
margin-bottom: 2em;
}
#left {
font-size: 14px;
float: left;
width: 42%;
color: #000;
}
#right {
font-size: 14px;
float: right;
width: 58%;
color: #000;
}
table, td, th {
border: 1px solid #000;
text-align: left;
font-size: 14px;
font-weight: inherit;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
#pp {
font-size:14px;
color:#000;
}
.table-responsive {
overflow-x: hidden!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding:0px!important;
}
</style>
<div class="col-md-12">
<a href="javascript:void(0)" class="btn btn-success" style="float: right;" onclick='printDiv();'>Print Sheet</a>
</div>
<div id="print_wrapp">
<div class="col-md-12" id="bot">
<div class="col-md-2">
<img src="<?php echo base_url(); ?>uploads/images/Lingayas Vidyapeeth Logo.png" class="img-responsive" style="width: 110px;">
</div>
<div class="col-md-10">
<div class="center">
<h3>
Lingaya's Vidyapeeth, Fraidabad<br>
Award Sheet<br>
End Semester Examination<br>
(May-June, 2019)
</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" id="bot">
<div class="col-md-6">
<div class="left">
<p>Department: </p>
</div>
<div class="right">
<p><?php echo $award[0]['department_name']?></p>
</div>
<div class="left">
<p>Program/Course: </p>
</div>
<div class="right">
<p><?php echo $award[0]['classes']?></p>
</div>
<div class="left">
<p>Subject Name: </p>
</div>
<div class="right">
<p><?php echo $award[0]['subject']?></p>
</div>
<div class="left">
<p>Session: </p>
</div>
<div class="right">
<p><?php echo $award[0]['session']?></p>
</div>
</div>
<div class="col-md-6">
<div class="left">
<p>Semester: </p>
</div>
<div class="right">
<p><?php echo $award[0]['yearsOrSemester']?></p>
</div>
<div class="left">
<p>Subject Code: </p>
</div>
<div class="right">
<p><?php echo $award[0]['subject_code']?></p>
</div>
<div class="left">
<p>Maximum Marks: </p>
</div>
<div class="right">
<p></p>
</div>
</div>
</div>
<div class="col-md-12" id="bot">
<div class="col-md-12">
<div class="table-responsive">
<table id="example1" class="table table-striped table-bordered table-hover dataTable no-footer">
<thead>
<th>S.No.</th>
<th>Roll No.</th>
<th>Marks(In Figure)</th>
<th>Marks(in Words)</th>
</thead>
<tbody>
<?php
$i=1;
foreach($award as $row)
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $row['roll']; ?></td>
<td></td>
<td></td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12" id="bot">
<div class="col-md-6">
<div id="left">
<p>Total No. of Student Pass: </p>
</div>
<div id="right">
<p></p>
</div>
</div>
<div class="col-md-6">
<div id="left">
<p>Total No. of Student Fail: </p>
</div>
<div id="right">
<p></p>
</div>
</div>
</div>
</div>
</div>
<script>
function printDiv()
{
var divToPrint=document.getElementById('print_wrapp');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/bootstrap/css/bootstrap.css" type="text/css" /><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
</script>
In this code I am simply run print content inside div <div id="print_wrapp"> by click function i.e printDiv and its working properly but the problem is that print preview css not showing div content properly and an image is mention below:
and my original page look like:
So, How can I fix this problem? Please help me.
Thank You
You can apply the style sheet too both print and screen using media='screen,print'
<link ../bootstrap.min.css' rel='stylesheet' media='screen,print'>
or
<link ../bootstrap.min.css' rel='stylesheet' media='all'>
When we want to apply some style when printing a page, we need to apply the styles using #media print. Then only the style will apply for windows print function.
Style.css
#media print
{
.center {
float: left;
text-align: center;
}
.center h3 {
color: #000;
font-weight: 600;
}
.left {
font-size: 14px;
float: left;
width: 30%;
color: #000;
}
.right {
font-size: 14px;
float: right;
width: 70%;
color: #000;
}
}
Then link the css file where you want to print the page with style.
<link rel="stylesheet" type="text/css" href="Style.css">
Call the Print Function on Button Click
<button onclick="printPage()" class="center">Print</button>
<script>
function printPage()
{
print();
}
</script>
I want to add some space before the text which is in 'content' div tag.
Now all my text are stick to left side.all text in content are sticked into left.
I added margin-left style for p tag. fiddle
I tried
margin-left:10px;
But till having problem.
.sidemenu {
float: left;
margin-top: 150px;
width: 100%;
}
.content {
}
hr {
margin: 0;
width: 1px;
height: 660px;
border: 0;
background: #fff;
float: left;
}
.side{
width: 24%;
float: left;
display: inline-block;
}
.rest {
height: 685px;
background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
background: -o-linear-gradient(top, #e5e3e3, ffffff);
background-color: #e5e3e3;
border: 1px solid #f9f2f2;
border-width: 0px 0px 0px 0px;
border-radius: 0px 0px 10px 10px;
padding: 0px 7px;
}
.outer {
margin-left: 20%;
margin-top: 3%;
margin-bottom: 3%;
height: 737px;
width: 60%;
box-shadow: 10px 10px 5px #888888;
border: 1px solid #f9f2f2;
border-radius: 10px;
}
p{
margin-left:100px;
}
<div class="outer">
<div class="log">
<h1>Profile</h1>
<form method="post" class="lout" > <button class="logout" name="logout" >Logout</button></form>
</div> <!--End of log div -->
<div class="rest">
<div class="side">
<div class="sidemenu">
<div class="1 menu">
Profile
</div> <!--End of menu1 -->
<div class="2 menu">
Clients
</div> <!--End of menu 2-->
<div class="3 menu">
Employees
</div> <!--End of menu 3-->
<div class="menu 4">
Documents
</div> <!--End of menu 4-->
</div> <!--End of side menu -->
</div> <!--End of side div -->
<hr>
<!-- <div class="heading" >
<h1>Profile</h1>
</div> End of heading div -->
<div class="content">
<?php
include "config.php";
if($ses!='')
{
$sql="select * from register where id=$ses";
$sql1=mysql_query($sql);
$fet=mysql_fetch_assoc($sql1);
$name=$fet['name'];
$email=$fet['email'];
$phone=$fet['phone'];
$cname=$fet['company_name'];
$street=$fet['street'];
$add=$fet['address'];
$city=$fet['city'];
$state=$fet['state'];
$ein=$fet['ein'];
$id=$fet['id'];
}
?>
<form name="profile" method="post">
<p>Name<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $name; ?>"</p>
<p>Email<input type="text" size=20 name="mail" maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $email; ?>"</p>
<p>Phone<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $phone; ?>"></p>
<p>Company name<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $cname;?>"></p>
<p>Street<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $street;?>"></p>
<p>Address<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $add; ?>"></p>
<p>City<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $city;?>"></p>
<p>State<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $state; ?>"></p>
<p>EIN<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $ein;?>"></p>
<a class="change">Change Password</a><br>
<div class="pass">
<br><input type="password" class="textbox" placeholder="Current Password" name="old" id="old" size="20"/><br><br>
<input type="password" class="textbox" placeholder="New Password" name="new" id="new" size="20"><br>
<br><br><br><br><button class="add" name="go" id="go">Go</button><a style="padding-right:2ex;"></a><a class="change"><button class="add" name="cancel" id="cancel">Cancel</button></a>
</div>
<br>
<div class="tri"><button name="edit" class=add>  Edit </button><button name="add" class="upload" onclick="admin()">Add New</button></div></form>
</div> <!--End of content -->
</div> <!--End of rest div -->
</div> <!--End of outer div-->
you can see the demo here
demo
i have made change in form{padding-left:31%;}
Try the new with top margin
See Demo
in this i modified .rest{margin-top:15%;}
see demo i can add some css
http://jsfiddle.net/Lrh19c50/1/
form[name=profile] p{
padding-left:30%;
}
You want to add some spaces to a div into content class, so you can use .content div as a css selector. That means each div under content class, you can give padding as you want.
.content div { padding-left : 30px; }
I am trying to add a toggle switch to allow the data to update to either yes or no on the table without actually clicking on the edit button. I am not sure how to go about this. I need it on the $e->Complete section. If it cant't be done in the admin_view then I will settle it in the edit_view page section but I need it so when they click on the yes or no that it automatically updates the post.
Admin_View.php page
<link href="<?php echo base_url();?>assets/css/bootstrap.min.css" rel="stylesheet">
<?php
$msg = $this->session->flashdata('msg');
if ( (isset($msg)) && (!empty($msg)) ) {
?>
<div class="alert alert-warning" >
×
<?php print_r($msg); ?>
</div>
<?php
}
$msg = $this->session->flashdata('msg1');
if ( (isset($msg)) && (!empty($msg)) ) {
?>
<div class="alert alert-danger" >
×
<?php print_r($msg); ?>
</div>
<?php
}
?>
<script>
$(document).ready(function(){
$('#table').dataTable();
});
$(document).ready(function(){
$('#date').trigger('click');
});
</script>
<div class="row-fluid" >
<div class="span10" style="margin-left:100px">
<div class="widget">
<div class="widget-header">
<i class="icon-truck"></i>
<h3>Admin Callins Edit View</h3>
</div>
<div class="widget-content" align="center">
<table class="table table-bordered" id="table">
<thead>
<tr>
<th id="date" style="text-align:center; background-color:#4C9ED9; color: #fff;">Date Scheduled</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Employee Name</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Employee Number</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Date Time Reported</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Reason</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Scheduled_Area</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Contact</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Approval Name</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Complete</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Edit</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Delete</th>
</tr>
</thead>
<tr>
<?php $i=1; foreach($callin as $e ):?>
<td style="text-align:center;"><?php echo $e->Date_Scheduled;?></td>
<td style="text-align:center;"><?php echo $e->Employee_Name;?></td>
<td style="text-align:center;"><?php echo $e->Employee_Number;?></td>
<td style="text-align:center;"><?php echo $e->Time_Reported;?></td>
<td style="text-align:center;"><?php echo $e->Reason;?></td>
<td style="text-align:center;"><?php echo $e->Scheduled_Area;?></td>
<td style="text-align:center;"><?php echo $e->Contact;?></td>
<td style="text-align:center;"><?php echo $e->Approval;?></td>
<td style="text-align:center;"><?php echo $e->Complete;?></td>
<td style="text-align:center;" >
Edit
</td>
<td style="text-align:center;">
<a class="btn btn-default" href="#del_<?php echo $e->id?>" data-toggle="modal">Delete</a>
</td>
</tr>
<?php endforeach ;?>
</table>
<!--Modal Start here-->
<?php foreach($callin as $d):?>
<div class="modal fade" id="del_<?php echo $d->id;?>" tabindex="-1" role="dialog" aria-labelledby="addModal" aria-hidden="true" >
<form action="<?php echo base_url();?>callin/delete_callin" method="post" data-parsley-validate>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title" id="myAddLabel">Warning!</h4>
</div>
<div class="modal-body">
<div class="box-body">
<div align="center" class="alert alert-error">
<h4>Are You Sure to Delete this Details</h4>
</div><br>
</div><br><br>
<div align="center">
<input type="hidden" name="id" value="<?php echo $d->id;?>">
<button type="submit" class="btn btn-primary">Yes</button>
<button class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</form>
</div>
<?php endforeach;?>
edit_view.php page
<DOCTYPE!>
<html>
<head>
<title>Edit Page</title>
<link href="<?php echo base_url();?>assets/css/bootstrap.min.css" rel="stylesheet">
<link href="<?php echo base_url();?>assets/css/custom.css" rel="stylesheet">
</head>
<body>
<div class"col-lg-6">
<div class="alert alert-warning">
<br><br>
<h4>Edit Call-IN</h4>
<?php $msg = $this->session->flashdata('msg'); if((isset($msg)) && (!empty($msg))) { ?>
<div class="alert alert-success" >
×
<?php print_r($msg); ?>
</div>
<?php } ?>
<?php $msg = $this->session->flashdata('msg1'); if((isset($msg)) && (!empty($msg))) { ?>
<div class="alert alert-error" >
×
<?php print_r($msg); ?>
</div>
<?php } ?>
<form class="form-horizontal" action="<?php echo base_url();?>callin/update_callin" method="post">
<?php foreach($callin as $e):?>
<div class="pull-left">
<div class="form-group">
<label class="col-sm-5 control-label">Date Scheduled:</label>
<div class="btn btn-default" >
<input type="text" class="default" name="Date_Scheduled" value="<?php echo $e->Date_Scheduled;?>">
</div>
</div>
<div class="pull-left">
<div class="form-group">
<label class="col-sm-5 control-label">Employee Name:</label>
<div class="btn btn-default" >
<input type="text" class="default" name="Employee_Name" value="<?php echo $e->Employee_Name;?>">
</div>
</div>
<div class="pull-left">
<div class="form-group">
<label class="col-sm-5 control-label">Employee Number:</label>
<div class="btn btn-default" >
<input type="text" class="default" name="Employee_Number" value="<?php echo $e->Employee_Number;?>">
</div>
</div>
<div class="pull-left">
<div class="form-group">
<label class="col-sm-5 control-label"> Time Reported:</label>
<div class="btn btn-default" >
<input type="text" class="default" name="Time_Reported" value="<?php echo $e->Time_Reported;?>">
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label"> Reason:</label>
<?php
$Reason = $e->Reason;
$options = array("Bereavement","Clinic","FMLA","ILL","ILL 2nd Day","Jury Duty",
"ILL/PTO","IOW","Late","Late???","Layoff","Leave Early",
"LeaveEarly FMLA","LeaveEarly ILL","LeaveEarly Personal","LeaveEarly FMLA","LNTB5H",
"MIA","NCI","NCIBOD","NCIFL","NCOFL","Other","Personal","SAC","STO","VLO");
?>
<div class="btn btn-default">
<select name="Reason" class="default">
<?php
// Define $Reason here or the 'selected' attribute will not work
foreach($options as $option){
if($Reason == $option){
echo "<option value='".$option."' selected='selected'>".$option."</option>";
}
else{
echo "<option value='".$option."'>".$option."</option>";
}
}
?>
</select>
</div>
</div>
<?php
$Scheduled_Area = $e->Scheduled_Area;
$options = array("CLAIMS","TELECOM","CLEAN", "FLAT","HG SORT ",
"HG TOTE","HANG 1","HANG 2", "INBOUND", "LP","MAINT","OUTBOUND",
"PEP","QA/II","RACK SHOES", "REGIONAL DELIVERY","IT");
?>
<div class="form-group">
<label class="col-sm-5 control-label">Scheduled Area:</label>
<div class="btn btn-default">
<select name="Scheduled_Area" class="default">
<?php
// Define $department here or the 'selected' attribute will not work
foreach($options as $option){
if($Scheduled_Area == $option){
echo "<option value='".$option."' selected='selected'>".$option."</option>";
}
else{
echo "<option value='".$option."'>".$option."</option>";
}
}
?>
</select>
</div>
</div>
<div class="pull-left">
<div class="form-group">
<label class="col-sm-5 control-label">Contact:</label>
<div class="btn btn-default" >
<input type="text" class="default" name="Contact" value="<?php echo $e->Contact;?>">
</div>
</div>
<div class="pull-left">
<div class="form-group">
<label class="col-sm-5 control-label">Approval Name: </label>
<div class="btn btn-default" >
<input type="text" class="default" name="Approval" value="<?php echo $e->Approval;?>">
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Complete:</label>
<?php
$Complete = $e->Complete;
$options = array("NO","Yes");
?>
<div class="btn btn-default">
<select name="Complete" class="default">
<?php
// Define $Complete here or the 'selected' attribute will not work
foreach($options as $option){
if($Complete == $option){
echo "<option value='".$option."' selected='selected'>".$option."</option>";
}
else{
echo "<option value='".$option."'>".$option."</option>";
}
}
?>
</select>
</div>
</div>
<br>
<div class="footer" align="center">
<input type="hidden" value="<?php echo $e->id;?>" name="id">
<input type="submit" value="Update" class="btn btn-default">
<!--<input type="reset" value="Cancel" class="btn btn-default"> not working for some reason-->
<button class= "btn btn-default" onclick="location.href='<?php echo base_url();?>callin/list_callins'">Cancel</button>
</div>
</div>
</div>
<?php endforeach;?>
</form>
</body>
</html>
I put this in the edit_view page
<div class="form-group">
<div class="switch_options">
<label class="col-sm-5 control-label">Complete: </label>
<span class="switch_enable"> Yes </span>
<span class="switch_disable"> NO </span>
<input type="hidden" class="default"value="<?php echo $e->Complete;?>">
<input type="hidden" name="Complete" class="switch_val" value=""/>
</div>
In replace of this:
<div class="form-group">
<label class="col-sm-5 control-label">Complete:</label>
<?php
$Complete = $e->Complete;
$options = array("NO","Yes");
?>
<div class="btn btn-default">
<select name="Complete" class="default">
<?php
// Define $Complete here or the 'selected' attribute will not work
foreach($options as $option){
if($Complete == $option){
echo "<option value='".$option."' selected='selected'>".$option."</option>";
}
else{
echo "<option value='".$option."'>".$option."</option>";
}
}
?>
</select>
</div>
</div>
<br>
My jQuery code is this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.switch_options').each(function() {
//This object
var obj = jQuery(this);
var enb = obj.children('.switch_enable'); //cache first element, this is equal to Yes
var dsb = obj.children('.switch_disable'); //cache first element, this is equal to NO
var input = obj.children('input'); //cache the element where we must set the value
var input_val = obj.children('input').val(); //cache the element where we must set the value
/* Check selected */
if( 'NO' == input_val ){
dsb.addClass('selected');
}
else if( 'Yes' == input_val ){
enb.addClass('selected');
}
//Action on user's click(Yes)
enb.on('click', function(){
$(dsb).removeClass('selected'); //remove "selected" from other elements in this object class(NO)
$(this).addClass('selected'); //add "selected" to the element which was just clicked in this object class(Yes)
$(input).val('Yes').change(); //Finally change the value to Yes
});
//Action on user's click(NO)
dsb.on('click', function(){
$(enb).removeClass('selected'); //remove "selected" from other elements in this object class(Yes)
$(this).addClass('selected'); //add "selected" to the element which was just clicked in this object class(NO)
$(input).val('NO').change(); // //Finally change the value to NO
});
});
});
</script>
my CSS code is this:
<style type="text/css">
/* Main block */
.switch_options{
display: block;
font-family: "Helvetica", Arial, Sans-serif;
margin-bottom: 10px;
}
/* Main block clearfix */
.switch_options:before,
.switch_options:after{
content:'.';
display:block;
overflow:hidden;
visibility:hidden;
font-size:0;
line-height:0;
width:0;
height:0;
}
.switch_options:after{clear:both;}
/*Options*/
.switch_options span{
display: inline-block;
float: left;
padding: 4px 9px;
margin: 0;
cursor: pointer;
font-size: 12px;
font-weight: 700;
color: #555;
border: 1px solid #aaa;
text-transform: uppercase;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}
.switch_options span:first-of-type{
border-radius: 2px 0 0 2px;
border-right: 0;
}
.switch_options span:last-of-type{
border-radius: 0 2px 2px 0;
border-left: 0;
}
.switch_options span:hover{
background: #fafafa;
}
/* Active option */
.switch_options span.selected{
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(to bottom, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
border-color: #0082A3;
color: #fff;
}
</style>
The first problem I see is on Admin_View.php, your table has some errors. you need to start the foreach loop before the <tr> tag. I would also try to place this inside <tbody> tags.
You have this:
<tr>
<?php $i=1; foreach($callin as $e ):?>
<td>..</td>
<!-- more tds -->
<td>..</td>
</tr>
<?php endforeach ;?>
Change it to this:
<tbody>
<?php $i=1; foreach($callin as $e ):?>
<tr>
<td>..</td>
<!-- more tds -->
<td>..</td>
</tr>
<?php endforeach ;?>
</tbody>