I have a problem with printing from HTML.
First of all I create a print preview page. Everything works well.
When I go to print only the part that interests me (sequence of A4 pages), only the first page is divided into two, it seems that a 'padding-top' is imposed higher than the imposed one. Basically the first footer is moved to the next page.
Here are two images, screen and print.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Report</title>
<script src="//code.jquery.com/jquery-1.12.1.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
#*librerie per abilitare la selezione delle righe*#
<link href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
#*libreria per stilizzare una select*#
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
#*<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>*#
<style type="text/css">
##Media print {
#ScreenDiv {
visibility: hidden;
display: none;
}
#PrintDiv {
visibility: visible;
display: normal;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-top: 0px;
margin-bottom: 0cm;
padding-left: 2cm;
padding-top: 1cm;
padding-right: 2cm;
padding-bottom: 0cm;
/*https://github.com/delight-im/HTML-Sheets-of-Paper/blob/gh-pages/css/sheets-of-paper-a4.css*/
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
.panel-footer {
page-break-after: always;
}
}
##media screen{
#ScreenDiv {
visibility: visible;
display: normal;
}
#PrintDiv {
visibility: hidden;
display: none;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-top: 80px;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
padding-left: 2cm;
padding-top: 1cm;
padding-right: 2cm;
padding-bottom: 0cm;
/*https://github.com/delight-im/HTML-Sheets-of-Paper/blob/gh-pages/css/sheets-of-paper-a4.css*/
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
}
h3 {
margin-top: 0px;
color: dodgerblue !important;
text-align: center;
}
.col-fixed-30 {
width: 30%;
position: fixed;
background-color: white;
height: 100%;
z-index: 1;
}
.row-fixed-70 {
height: 70px;
position: fixed;
background-color: white;
width: 70%;
z-index: 1;
}
.col-offset-30 {
padding-left: 30%;
z-index: 0;
}
</style>
</head>
<body>
<div id="ScreenDiv">
<div class="container-fluid">
<div class="row">
<div class="col-fixed-30" style="padding:2px">
<h3 style="margin-top:30px; color:dodgerblue">Lista Report<span class="badge badge-default"></span></h3>
<div class="form-group">
<select id="AnnoSelect" name="AnnoSelect" class="selectpicker form-control" multiple title="Selezionare Anno"></select>
</div>
<div class="form-group">
<select id="TipoIspezioneSelect" name="AnnoSelect" class="selectpicker form-control" multiple data-actions-box="true" title="Selezionare Tipo Ispezione">
<option value="Ispezione Corrente">Ispezione Corrente</option>
<option value="Ispezione Corrente Straordinaria">Ispezione Corrente Straordinaria</option>
<option value="Ispezione Qualitativa">Ispezione Qualitativa</option>
<option value="Ispezione Dettagliata">Ispezione Dettagliata</option>
<option value="Ispezione Dettagliata Eccezionale">Ispezione Dettagliata Eccezionale</option>
<option value="Sorveglianza Speciale">Sorveglianza Speciale</option>
<option value="Sorveglianza Intensificata">Sorveglianza Intensificata</option>
<option value="Alta Sorveglianza">Alta Sorveglianza</option>
</select>
</div>
<div class="form-group">
<select id="TipoOperaSelect" name="TipoOperaSelect" class="selectpicker form-control" multiple data-actions-box="true" title="Selezionare Tipo Opera">
<option value="null">Da Gestire</option>
<option value="true">Approvate</option>
<option value="false">Rifiutate</option>
</select>
</div>
<div class="form-group">
<select id="ElementoSelect" name="ElementoSelect" class="selectpicker form-control" multiple data-actions-box="true" title="Selezionare Tipo Elemento">
<option value="null">Da Gestire</option>
<option value="true">Approvate</option>
<option value="false">Rifiutate</option>
</select>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#Stampa1">
Collapsible Group 1
</a>
</h4>
</div>
<div id="Stampa1" class="panel-collapse collapse in">
<div class="panel-body">
<button id="StampaReport" class="btn btn-primary" type="button" style="margin-bottom:20px; margin-top:20px;"><i class="glyphicon glyphicon-print"></i> Stampa Report </button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#Stampa2">
Collapsible Group 2
</a>
</h4>
</div>
<div id="Stampa2" class="panel-collapse collapse">
<div class="panel-body">
seconda Stampa
</div>
</div>
</div>
</div>
</div>
</div>
<div id="LayoutArea" class="col-md-12 col-offset-30" style="background-color:lightgray">
<div class="row row-fixed-70">
<h3 style="margin-top:30px; color:dodgerblue; text-align:center">Anteprima Report</h3>
</div>
<div class="row" id="LayoutStampa">
<page size="A4" id="page0">
<div class="panel-heading" style="height:45px">
<div class="table-responsive">
<table class="table table-condensed" style="border-bottom: .2em solid #aaaaaa;border-top: .2em hidden">
<tr><td id="headerLeft" style="width:30%" align="left">left</td><td id="headerCenter" align="center">center</td><td id="headerRight" style="width:30%" align="right">right</td></tr>
</table>
</div>
</div>
<div class="panel-body">
<h3 id="TitoloPagina">Anteprima Report</h3>
<div class="table-responsive" style="height:24cm;background-color:red">
<table class="table table-striped table-condensed" border=0 cellpadding=20 cellspacing=0 style="border-bottom: .13em solid #aaaaaa;font-size:10px">
#*<tr><th style="width:30%">#</th><th>name</th></tr>*#
<tr align="center"><td style="width:30%">1</td><td>100</td><td style="width:30%">DONALD TRUMP</td></tr>
<tr align="center"><td style="width:30%">2</td><td>100</td><td style="width:30%">BARACK OBAMA</td></tr>
<tr align="center"><td style="width:30%">3</td><td>100</td><td style="width:30%">BARACK OBAMA</td></tr>
</table>
</div>
</div>
<div class="panel-footer" style="height:45px">
<table class="table table-condensed" style="border-bottom: .2em solid #aaaaaa;border-top: .2em hidden">
<tr><td id="footerLeft" style="width:30%" align="left">left</td><td id="footerCenter" align="center">center</td><td id="footerRight" style="width:30%" align="right">right</td></tr>
</table>
</div>
</page>
</div>
</div>
</div>
</div>
<div id="PrintDiv">
</div>
<script>
var ListaOpere;
$(document).ready(function () {
var d = new Date();
var anno = d.getFullYear();
for (var i = anno; i >= 1990; i--) {
$("#AnnoSelect").append('<option value=' + i + '>' + i + '</option>');
}
$('#StampaReport').on('click', function () {
var clone = $('#LayoutStampa').clone();
$("#PrintDiv").append(clone);
$('#LayoutStampa').remove();
window.print();
$("#LayoutStampa").remove();
$('#LayoutArea').append(clone);
})
var testo = '<div class="panel-heading" style="height:45px">' +
'< div class="table-responsive" >' +
'<table class="table" style="border-bottom: .2em solid #aaaaaa;border-top: .2em hidden">' +
'<tr><td align=left> left</td><td align=right> right</td></tr>' +
'</table> </div > </div >'
var cloneCount = 1;
for (var i = cloneCount; i <= 10; i++) {
var clone = $('#page0').clone();
clone.attr('id', 'page' + i);
clone.find('h3[id=TitoloPagina]').text('Titolo' + i);
clone.find('td[id=headerLeft]').text('Macerata');
$("#LayoutStampa").append(clone);
//alert(i);
}
});
</script>
</body>
</html >
Where is the error?
Thanks
I found a solution. If imposed -60px on 'media print page margin-top', it adjusts everything.
But I realized that, all the solution, it does not work well on edge and explorer.
Related
Im working on carousel but buttons are not working and it has border. Tried to remove border with css but this time buttons also dissappered.
buttons are working on codeply: bootstrap carousel buttons
/* html tags */
body {
font-family: "Montserrat";
font-weight: 900;
}
h2 {
font-family: "Montserrat";
font-size: 3rem;
line-height: 1.5;
}
.testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20px;
}
/* Testimonials Sections */
#testimonials {
padding: 7% 15%;
text-align: center;
background-color: #ef8172;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!--Bootstrap-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
rel="stylesheet">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/4c02f86903.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img src="images/dog-img.jpg" class="testimonial-image" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img src="images/lady-img.jpg" class="testimonial-image" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</section>
</body>
is it necessary to add some extras in head section?
I cant figure out the solutions
The problem is with the imports of Bootstrap. You have included Bootstrap version 4.3.1, but used the html syntax for Bootstrap 5+. You also included the js twice.
Corrected code (including your custom CSS):
body {
font-family: "Montserrat";
font-weight: 900;
}
h2 {
font-family: "Montserrat";
font-size: 3rem;
line-height: 1.5;
}
.testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20px;
}
/* Testimonials Sections */
#testimonials {
padding: 7% 15%;
text-align: center;
background-color: #ef8172;
color: #fff;
}
.carousel-item {
height: 500px;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color:blue;">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img src="images/dog-img.jpg" class="testimonial-image" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item" style="background-color:red;">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img src="images/lady-img.jpg" class="testimonial-image" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
You'd need to add your stylesheet here, otherwise this should work fine.
we are creating a table structure using html div, inside that we need to drag and drag and drop the columns and rows , but the row head should be fixed. ie, Drag and drop Div columns and Div rows without moving row head
anybody knows how to solve this.
I need to create this using JQuery , html and css.
$(function() {
$("#tblcols").sortable({
items: '.rtab:not(.rtab:first-child)',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function(e, ui) {
ui.item.addClass("selected");
},
stop: function(e, ui) {
ui.item.removeClass("selected");
$(this).find(".rtab").each(function(index) {
if (index > 0) {
$(this).find(".ctab").eq(2).html(index);
}
});
}
});
});
.Table {
display: table;
}
.Title {
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading {
display: table-row;
font-weight: bold;
text-align: center;
}
.rtab {
display: table-row;
}
.ctab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
.htab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div class="Table">
<div class="Title">
<p>Drag table rows and columns</p>
</div>
<div class="Heading">
<div class="htab">
<p>Sl</p>
</div>
<div class="htab">
<p>Name</p>
</div>
<div class="htab">
<p>Designation</p>
</div>
<div class="htab">
<p>Salary</p>
</div>
<div class="htab">
<p>Location</p>
</div>
</div>
<div class="rtab" id="tblcols">
<div class="ctab">
<p>1</p>
</div>
<div class="ctab">
<p>Athira</p>
</div>
<div class="ctab">
<p>Developer</p>
</div>
<div class="ctab">
<p>6l</p>
</div>
<div class="ctab">
<p>Kottayam</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>2</p>
</div>
<div class="ctab">
<p>Timy</p>
</div>
<div class="ctab">
<p>Designer</p>
</div>
<div class="ctab">
<p>5l</p>
</div>
<div class="ctab">
<p>wayanad</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>3</p>
</div>
<div class="ctab">
<p>Liya</p>
</div>
<div class="ctab">
<p>Team Lead</p>
</div>
<div class="ctab">
<p>7l</p>
</div>
<div class="ctab">
<p>Kollam</p>
</div>
</div>
</div>
I'm a little unsure what you mean. I hope I captured the main idea, that you want the first cell in each row to remain in order after items are sorted. Here is an example that might work for you.
$(function() {
$(".Table .Heading").sortable({
items: '> .htab:not(:eq(0))',
cursor: 'pointer',
axis: 'x',
dropOnEmpty: false,
placeholder: "htab placeholder",
start: function(e, ui) {
var ind = ui.item.index();
$(".Table .rtab").each(function() {
$(".ctab", this).eq(ind).css("opacity", "0.25");
});
ui.item.data("orig-index", ind);
},
stop: function() {
$(".Table .rtab .ctab").css("opacity", "");
},
update: function(e, ui) {
var oInd = ui.item.data("orig-index");
var cInd = ui.item.index();
var cols = $(".Table .htab").length;
$(".Table .rtab").each(function() {
var cell = $(".ctab", this).eq(oInd).detach();
if (cInd < (cols - 1)) {
// Mid Col
cell.insertBefore($(".ctab", this).eq(cInd));
} else {
// Last Col
$(this).append(cell);
}
})
}
});
$(".Table").sortable({
items: '> .rtab',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function(e, ui) {
$(".ctab", ui.item).eq(0).html(" ");
},
stop: function(e, ui) {
$(".Table .rtab").each(function(ind, el) {
$(".ctab", el).eq(0).html((ind + 1));
});
}
});
});
.Table {
display: table;
}
.Title {
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading {
display: table-row;
font-weight: bold;
text-align: center;
}
.rtab {
display: table-row;
}
.ctab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
.htab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
.htab.placeholder {
background: #ccc;
width: 20px;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Table">
<div class="Title">
<p>Drag table rows and columns</p>
</div>
<div class="Heading">
<div class="htab">
<p>Sl</p>
</div>
<div class="htab">
<p>Name</p>
</div>
<div class="htab">
<p>Designation</p>
</div>
<div class="htab">
<p>Salary</p>
</div>
<div class="htab">
<p>Location</p>
</div>
</div>
<div class="rtab" id="tblcols">
<div class="ctab">
<p>1</p>
</div>
<div class="ctab">
<p>Athira</p>
</div>
<div class="ctab">
<p>Developer</p>
</div>
<div class="ctab">
<p>6l</p>
</div>
<div class="ctab">
<p>Kottayam</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>2</p>
</div>
<div class="ctab">
<p>Timy</p>
</div>
<div class="ctab">
<p>Designer</p>
</div>
<div class="ctab">
<p>5l</p>
</div>
<div class="ctab">
<p>wayanad</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>3</p>
</div>
<div class="ctab">
<p>Liya</p>
</div>
<div class="ctab">
<p>Team Lead</p>
</div>
<div class="ctab">
<p>7l</p>
</div>
<div class="ctab">
<p>Kollam</p>
</div>
</div>
</div>
For the Header, we can sort the header items and then move the cells that correspond with it. Due to the relationship of the elements in Rows, there is not an element that contains all the column items. It effectively does what is needed, yet looks a little weird in doing it. With items we can exclude the first header.
When using Sortable for the Rows, you want to target the parent and then using items option, you can target the rows that you want to sort and those you want to exclude. Since we're sorting the rows and not the items inside, there is not a good way to exclude an item in the row.
When Sort starts, cell 0 is change to so it does not shrink too much. Once sort is stopped, it re-indexes the rows back into order. If we use update it will only fire when a change is performed. So if the user grabs a row and doesn't move it, there is not update. To address this, we can use stop to re-index.
Hope that helps.
This is the main page
then after loading the page , it automatically scroll to this position.
This is layout page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("My Dashboard", "Index", "Client")</li>
<li>#Html.ActionLink("Domain Registration", "ClientRegistration", "User")</li>
<li>#Html.ActionLink("Employee", "EmployeeList", "Client")</li>
<li>#Html.ActionLink("Work Hour Manage", "WorkHourManage", "Client")</li>
<li>#Html.ActionLink("Department", "DepartmentList", "Client")</li>
<li>#Html.ActionLink("Company", "CompanyList", "Client")</li>
<li>#Html.ActionLink("Logout", "UserLogout", "Login")</li>
</ul>
<div style="color: #ada8a8;float: right;margin-top: 10px;">
#{
var UserType = Request.Cookies["UserType"];
var UserName = Request.Cookies["UserName"];
if (UserName != null && UserType !=null)
{
<text>#(UserType.Value+"-"+UserName.Value)</text>
}
}
</div>
</div>
</div>
</div>
<div class="container-fluid body-content">
#RenderBody()
<hr />
<footer>
<p>© #CommonFunction.GetCurrentDateTime().Year - Employee Tracking & Management Information System.</p>
</footer>
</div>
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
This is the index page, not only index moves, but all pages scroll up automatically
#{
ViewBag.Title = "My Dashboard";
}
#Html.Raw(TempData["Status"])
<div class="HeadingSite">
My Dashboard <div style="float:right;font-weight:normal;">#(Session["DaysLeft"]) Days Left</div>
</div>
<style>
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.box {
cursor: pointer;
}
.box > .icon {
text-align: center;
position: relative;
}
.box > .icon > .image {
position: relative;
z-index: 2;
margin: auto;
width: 88px;
height: 88px;
border: 8px solid white;
line-height: 88px;
border-radius: 50%;
background: #63B76C;
vertical-align: middle;
}
.box > .icon:hover > .image {
background: #333;
}
.box > .icon > .image > i {
font-size: 36px !important;
color: #fff !important;
}
.box > .icon:hover > .image > i {
color: white !important;
}
.box > .icon > .info {
margin-top: -24px;
background: rgba(0, 0, 0, 0.04);
border: 1px solid #e0e0e0;
padding: 15px 0 10px 0;
}
.box > .icon:hover > .info {
background: rgba(0, 0, 0, 0.04);
border-color: #e0e0e0;
color: white;
}
.box > .icon > .info > h4.title {
font-family: "Roboto",sans-serif !important;
font-size: 16px;
color: #222;
font-weight: 500;
}
.box > .icon > .info > p {
font-family: "Roboto",sans-serif !important;
font-size: 13px;
color: #666;
line-height: 1.5em;
margin: 20px;
}
.box > .icon:hover > .info > h4.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a {
color: #222;
}
.box > .icon > .info > .more a {
font-family: "Roboto",sans-serif !important;
font-size: 12px;
color: #222;
line-height: 12px;
text-transform: uppercase;
text-decoration: none;
}
.box > .icon:hover > .info > .more > a {
color: #fff;
padding: 6px 8px;
background-color: #63B76C;
}
.box .space {
height: 30px;
}
</style>
<div class="row">
<div onclick="location.href = '../Client/WorkHourManage';" class="col-sm-4 col-lg-2">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-cog"></i></div>
<div class="info">
<h4 class="title">Manage Work Hour</h4>
<p>
Manage and view work hours of the company..
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/CompanyList';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-industry"></i></div>
<div class="info">
<h4 class="title">Manage Company List</h4>
<p>
Manage or view Company List of this company..
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/EmployeeList';" class="col-sm-4 col-lg-2">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-users"></i></div>
<div class="info">
<h4 class="title">Manage Employees</h4>
<p>
Manage or view Employee of this company..
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/DepartmentList';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-tag"></i></div>
<div class="info">
<h4 class="title">Manage Department</h4>
<p>
Departments are added to employee details..
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/EmployeeBackgroundTrackHistory';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-street-view"></i></div>
<div class="info">
<h4 class="title">Employee Background Tracking</h4>
<p>
Details of Employee presence on different days.
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/EmployeeTrackRouteEstimateList';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-map-marker"></i></div>
<div class="info">
<h4 class="title">Employee Track Route & Estimate</h4>
<p>
Details regarding traveling details, traveling report and conveyance calculation.
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/TravelCostManage';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-money"></i></div>
<div class="info">
<h4 class="title">Manage Base Travelling Cost</h4>
<p>
Details regarding traveling cost of the company. This is a rough calculation and different employees are assigned different amounts for travelling modes.
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/EmployeeEnquiryReport';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-book"></i></div>
<div class="info">
<h4 class="title">Employee Visit Report</h4>
<p>
Reports of employee visits.
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/ChatWithEmployee';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-comments"></i></div>
<div class="info">
<h4 class="title">Chat with Employee</h4>
<p>
You can send messages and view replies from you Employees.
</p>
</div>
</div>
</div>
</div>
<div onclick="location.href = '../Client/UnlockModules';" class="col-sm-4 col-lg-2 noselect">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-unlock-alt"></i></div>
<div class="info">
<h4 class="title">Unlock Modules</h4>
<p>
Unlock or Activate modules. Also can temporarily turn of unwanted modules.
</p>
</div>
</div>
</div>
</div>
</div>
I had this same issue, and disabling Browser Link in Visual Studio fixed it for me. From what I observed on the console, Browser Link runs some Javascript which shifts the page. Hope this helps!
I think it is something wrong with my system. Works perfectly in other pcs.
I used Webessential with autoreload on change options like that. May be my debugger problem.
I'm trying to place two Kendo UI widgets side-by-side within an Angular-UI modal window.
My problem is that they are getting place one below the other as in the embedded screen shot.
Note the Dimensions List on top (<li ng-repeat), and the Dimension Grid on the bottom. I'd like these to be side-by-side :
Here's the HTML template, which is part of the Angular Bootstrap modal :
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>User Dimensions</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="radios-0">Choose One</label>
<div class="col-md-4">
<div class="radio">
<label for="radios-0">
<input name="radios" id="radio1" value="1" type="radio">
Defined Portfolios
</label>
</div>
<div class="radio">
<label for="radios-1">
<input name="radios" id="radio2" value="2" checked="checked" type="radio">
Specify Dimensions
</label>
</div>
</div>
<label class="col-md-4 control-label" for="radios-0">Dimensions</label>
<!-- *** KENDO SORTABLE *** -->
<div class="col-md-4">
<ul class="dim-list" kendo-sortable k-placeholder="settings.placeholder" k-hint="settings.hint">
<li ng-repeat="dim in settings.dimenDS">{{dim.name}}</li>
</ul>
</div>
<!-- *** KENDO GRID *** -->
<div class="col-md-8">
<span id="userDimenGrid" kendo-grid="settings.userDimenGrid"
k-data-source="settings.userDimenGridDS"
k-options="settings.userDimenGridOptions"
k-rebind="settings.userDimenGridOptions" />
</div>
</div>
</fieldset>
</form>
<style scoped>
.dim-list li{
list-style-type:none;
background-color:silver;
font-size:12px;
font-weight:bold;
width: 180px;
margin: 5px;
line-height: 30px;
text-align: center;
border-radius: 3px;
cursor:move;
}
li.hint {
display: block;
padding: 10px;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
</style>
I would like this to be side by side, but having much trouble formatting it as such within this <form> .
final solution :
I ended up spending more time working with bootstrap classes row and/or row-fluid, as well as col-lg-4.
It turns out the standard "form-group" class won't exactly work with what I want to do. Of course, since it's not exactly a form. Rather I'm placing Kendo UI widgets side by side.
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>User Dimensions</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="radios-0">Choose One</label>
<div class="row">
<div class="col-lg-4">
<div class="radio">
<label for="radios-0">
<input name="radios" id="radio1" value="1" type="radio">
Defined Portfolios
</label>
</div>
<div class="radio">
<label for="radios-1">
<input name="radios" id="radio2" value="2" checked="checked" type="radio">
Specify Dimensions
</label>
</div>
</div>
<div class="col-lg-8"></div>
</div>
<div class="row-fluid">
<div class="col-lg-3">
<ul class="dim-list" kendo-sortable k-hint="settings.hint" k-move="settings.move" k-end="settings.end" k-placeholder="settings.placeholder">
<li ng-repeat="dim in settings.dimenDS">{{dim.name}}</li>
</ul>
</div>
<div class="col-lg-8">
<span id="userDimenGrid" kendo-grid="settings.userDimenGrid"
k-data-source="settings.userDimenGridDS"
k-options="settings.userDimenGridOptions"
k-rebind="settings.userDimenGridOptions" />
</div>
</div>
</div>
</fieldset>
</form>
<style scoped>
.dim-list li{
list-style-type:none;
display: inline-block;
background-color:silver;
font-size:12px;
font-weight:bold;
width: 180px;
margin: 5px;
line-height: 30px;
text-align: center;
border-radius: 3px;
cursor:move;
}
li.hint {
display: block;
padding: 10px;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
Is it possible to set a checkbox instead of a split button in a split-button-list in jquery-mobile??
It seems to be easy to change it to be another button, but checkbox..
I want my checkbox to appear on a RIGHT side INSTEAD of a split button, not instead of a picture
Thanks for help..
Here is a DEMO FIDDLE
The UL does not use split icon, but instead an absolutely positioned DIV on the right with a checkbox inside. The CSS is used to position everything correctly:
<ul class="has-right-radio" data-role="listview" data-inset="true">
<li data-icon="false">
<a href="#">
<img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg" />
<h3>Picture</h3>
<p>List item with thumbnail and right radio</p>
</a>
<div class="right-radio">
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="" />
<label for="checkbox-1a"></label>
</div>
</li>
</ul>
.has-right-radio .ui-link-inherit {
margin-right: 48px !important;
}
.right-radio {
position: absolute;
top: 0px; bottom: 0px; right: 0px;
width: 48px;
border-left: 1px solid rgb(204, 204, 204);
}
.right-radio .ui-checkbox input {
visibility: hidden;
}
.right-radio .ui-checkbox, .right-radio .ui-checkbox label {
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px;
}
.right-radio .ui-checkbox label {
background-image: none;
background-color: transparent;
border: 0;
}
.right-radio .ui-checkbox label .ui-btn-inner {
position: absolute;
top: 50%;
margin-top: -10px;
}
If you do not need the thumbnail, just leave out the IMG tag like the second LI in the fiddle.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style>
.ui-btn-up-c{border:none;}
.ui-btn-hover-c{border:none;}
.ui-btn-hover-c:visited, .ui-btn-hover-c:hover, .ui-btn-hover-c a.ui-link-inherit { color:none;background:none;border:0px; }
</style>
</head>
<body>
<div data-role="page" id="myPage1">
<ul data-role="listview">
<li>
<div class="ui-grid-b">
<div class="ui-block-a" style="width: 30%;">
<div data-role="fieldcontain">
<img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg">
</div>
</div>
<div class="ui-block-b" style="width: 60%;">
<div data-role="fieldcontain">
<h2>Phoenix</h2>
<p>Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix</p>
</div>
</div>
<div class="ui-block-c" style="width: 6%; padding-top: 55px; float: right;">
<div style="float: right;">
<label>
<input name="checkbox-0 " type="checkbox">
</label>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>