onselect event: when I click on this, this will change the class of element I inside, if I click on another, class of element I previous will change to the original.This is my code, but it does not work.
<ul id="type_list">
<li> <i class="fa fa-file-text-o" aria-hidden="true"></i> file 1</li>
<li> <i class="fa fa-file-text-o" aria-hidden="true"></i> file 2</li>
</ul>
// onselect
function onSelect(e)
{
$(e.item).find("> .k-link i.fa.fa-file-text-o").attr("class","fa fa-check");
$(this).find("> .k-link i.fa.fa-check").attr("class","fa fa-file-text-o");
In the onSelect, first reset all panelbar items to the original class, then set the class of the selected item (you can use jQuery functions removeClass and addClass):
function onSelect(e)
{
$("#type_list i.fa").removeClass("fa-check").addClass("fa-file-text-o");
$(e.item).find("i.fa").removeClass("fa-file-text-o").addClass("fa-check");
}
DEMO
header:
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
Body:
<ul id="panelbar">
<li>
SECTION1
<div>sdfsd sfjsdkfsd</div>
</li>
<li class="servicetable" id="side-by-side1">
ENGINE
<div>asdas asdasd</div>
</li>
<li class="servicetable" id="side-by-side2">
TRANSMISSION
<div>asdasdas asdasd</div>
</li>
<li>
PERFORMANCE
<div>There are three types of lists you can use, and this quick guide will show you how to use each. ... However, to create an ordered list, the ol tag is used rather than the ul tag. By ....</div>
</li>
</ul>
script:
$(document).ready(function() {
$("#panelbar").kendoPanelBar({
expandMode: "single"
});
});
Style:
.servicetable
{
vertical-align:top;
border:1px solid #000;
list-style:none;
padding:2px;
width:49.2%;
display:inline-block !important;
}
div.k-content{
width: 95vw;
padding:5px !important;
}
#side-by-side2 div.k-content{
margin-left: -49vw;
}
Related
I am using barryvdh/laravel-dompdf to generate pdf.
I'm trying generate one pdf file with multiple pages from data collection the problem is that I get only first element and one page. Using foreach loop to generate pages. Also I was trying to use foreach in my blade, but then I get only the last page.
Controller:
public function multiplePagesPdf(Request $request)
{
$kuponai = Kuponas::all();
//dd($kuponas);
$html = '';
foreach($kuponai as $kuponas)
{
$view = view('pdf.multiple')->with(compact('kuponas'));
$html .= $view->render();
}
$pdf = PDF::loadHTML($html);
$sheet = $pdf->setPaper('a4', 'landscape');
return $sheet->stream('sugeneruoti.pdf');
}
Maybe problem in my blade file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dovanų kuponas</title>
</head>
<body>
<div class="coupon">
<div class="page">
<div class="subpage">
<div class="container" style="
width: 21cm;
height: 16cm;
position: absolute;
top: 6.8cm;
font-family: DejaVu Sans;
background: white;
">
<h2>{{!! $kuponas->kupono_nr !!}}</h2>
<h3 style="margin-left: 3.2cm">
Dovanų kupono numeris:
<span style="color: black"></span>
</h3>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
#page {
size: A4;
margin: 0;
}
#media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
</style>
There are certain things that are wrong in the code snippet you have provided, I will explain those first then provide correct way of doing it(for which I get results).
Firstly
you have used with & compact together, I don't know if it gets correct results but you should use any one of them or use array syntax of view method.
Secondly
what you are doing it you are rendering the view to html & then concating it, so , your html would look like,
<html>
.... content
</html>
<html>
.... content
</html>
& so on.
Thirdly
You css is messed up & not working as you want because of inline css you have added.
Solution
I would have used View Components to create similar views with different data.
So we would create a component in resources/views/components/single.blade.php (here I have named it single).
I have added your repeative code in the component single from your view. Now your coupon div class is in the component single.
<div class="coupon">
<div class="page">
<div class="subpage">
<div>
<h2>{{ $kuponas->kupono_nr }}</h2>
<h3>
Dovanų kupono numeris:
<span></span>
</h3>
</div>
</div>
</div>
</div>
Then in your view,
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>Dovanų kuponas</title>
<style>
.page-break {
page-break-after: always;
}
</style>
</head>
<body>
#php $count = 0;#endphp
#foreach ($kuponai as $kuponas)
#php $count++ #endphp
<div class="container {{ (count($kuponai)-1 >= $count) ? 'page-break' : '' }}">
#component('pdf.components.single', ['kuponas' => $kuponas])
#endcomponent
</div>
#endforeach
</body>
</html>
use page-break class to create breaks, I have used count condition to remove one extra page break. I am passing the data of kuponas to the component.
Finally change your controller,
public function multiplePagesPdf(Request $request)
{
$kuponai = Kuponas::all();
//dd($kuponas);
$view = view('pdf.multiple', ['kuponai' => $kuponai]);
$html = $view->render();
$pdf = PDF::loadHTML($html)->setPaper('a4', 'landscape');
return $pdf->stream('sugeneruoti.pdf');
}
I want to create a sticky footer using Laravel 6 and Bootstrap 4. I tried to create it but I failed.
These are my files:
layout.blade.php:
<body>
#auth
#include('../inc/navbar')
#endauth
<div class="container" id="app">
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
#yield('content')
</div>
#auth
#include('../inc/footer')
#endauth
</body>
footer.blade.php:
<nav class="navbar fixed-bottom bg-custom justify-content-end">
<b>Powered by Me</b>
</nav>
app.scss
body {
background-color: rgb(241, 230, 131);
}
nav {
height: 50px;
background-color: rgb(131, 215, 241);
}
I tried using the fixed-bottom class but in this way the footer remains always in the same position at the bottom of the screen even if the user scrolls a page with a lot of content. Can someone help me?
See the code below! Happy 2020!
//style
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
padding-top: 100px;
}
footer {
margin: auto auto 0 auto;
}
//html
<html>
<body>
<header>
<nav>..</nav>
</header>
<main>
<p>Lorem ipsum dolor sit amet!</p>
</main>
<footer></footer>
</body>
</html>
According to the docs the markup should be like below. See example here. The mt-auto class (margin-top:auto) in the example below sticks the element to the bottom of the page.
You've added both nav and fixed-bottom classes which aren't required, although you could probably achieve it with the fixed-bottom if you wanted to.
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
If you're still having problems, make sure your markup validates to make sure you don't have faulty html
I'm adding a custom form for blog Post with Django. The Post model I defined has ManytoManyField, and when trying to create a Post in django admin.ModelAdmin, it has '+' button that a user can add it. However, when I create a custom form view, it didn't appear. Is there any way that I can create the '+' button so that a user can create a new item and add it by clicking it?
When adding a Post Model with django admin.ModelAdmin, it has the screenshot like below (keywords = ... in classPostForm was commented out to get this)
Creating with django admin.ModelAdmin
However, in custom view (source code included below), the '+' button does not exist.
Creating with custom form
# models.py
class Post(models.Model):
title = models.CharField(max_length=255)
slug = models.SlugField(max_length=200, unique=True)
keywords = models.ManyToManyField(Keyword, blank=True)
# forms.py
class PostForm(forms.ModelForm):
keywords = forms.ModelMultipleChoiceField(
Keyword.objects.all(),
widget=widgets.FilteredSelectMultiple('Keywords', False),
required=False,
)
def __init__(self, *args, **kwargs):
super(PostForm, self).__init__(*args, **kwargs)
class Meta:
model = Post
fields = ('title', 'keywords')
querysets = {
'keywords': Keyword.objects.all()
}
class Media:
css = {'all': ('/admin/css/widgets.css',
'admin/css/overrides.css'), }
js = ('/admin/jquery.js', '/admin/jsi18n/')
# views.py
class CreatePost(generic.CreateView):
model = Post
form_class = PostForm
template_name = 'post_create.html'
<!---base.html---!>
<!DOCTYPE html>
<html>
<head>
<title>Doc Flow</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet">
<meta content="notranslate" name="google"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link
crossorigin="anonymous"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
rel="stylesheet"
/>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<span class="glyphicon glyphicon-plus"></span>
{{ form.media }}
<meta charset="utf-8">
{% block extra_head %}
{% endblock %}
</head>
<body>
<style>
body {
font-family: "Roboto", sans-serif;
font-size: 17px;
background-color: #fdfdfd;
}
.shadow{
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1);
}
.btn-danger {
color: #fff;
background-color: #f00000;
border-color: #dc281e;
}
.masthead {
background:#3398E1;
height: auto;
padding-bottom: 15px;
box-shadow: 0 16px 48px #E3E7EB;
padding-top: 10px;
}
.div_slide {
width: 30%;
float: left;
}
.slide-container {
overflow: auto;
white-space: nowrap;
}
</style>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow" id="mainNav">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}">Front</a>
<button
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
class="navbar-toggler navbar-toggler-right"
data-target="#navbarResponsive"
data-toggle="collapse"
type="button"
>
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
{% block content %}
<!-- Content Goes here -->
{% endblock content %}
<!-- Footer -->
<footer class="py-3 bg-grey">
<p class="m-0 text-dark text-center ">Copyright © Workhorse</p>
</footer>
</body>
</html>
<!---post_create.html---!>
{% extends 'base.html' %}
{% block extra_head %}
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/responsive.css">
{% endblock %}
{% block content %}
<form method="post" autocomplete="off" novalidate>
{% csrf_token %}
{{ form|crispy }}
<button type="submit" class="btn btn-success">Create event</button>
</form>
{% endblock %}
RelatedFieldWidgetWrapper is responsible for adding the "+" sign to your widget. So you need to wrap FilteredSelectMultiple in it, for this to work.
keywords = forms.ModelMultipleChoiceField(
Keyword.objects.all(),
widget=admin.widgets.RelatedFieldWidgetWrapper(
widget=admin.widgets.FilteredSelectMultiple('Keywords', False),
rel=Post.keywords.rel,
admin_site=admin.site
),
required=False,
)
That's not easy to find in the docs though, I had to search in the Django codebase to get to it.
I am using setParent() to show a particular folder only in Google picker but searching lists all the files and folders. I want search results restricted to parent folder.
Is this possible?
As far as I can tell there is no way to do this with the picker API. One hack is to filter for starred files but that is usually not helpful because you probably just want to set one directory/folder to search inside.
In the end I had to use the Google Drive API instead and create my own interface
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js" integrity="sha512-RNLkV3d+aLtfcpEyFG8jRbnWHxUqVZozacROI4J2F1sTaDqo1dPQYs01OMi1t1w9Y2FdbSCDSQ2ZVdAC8bzgAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body style="background-color: rgb(221, 238, 232);">
<div style="max-width: 1100px; margin: auto;" class="conainer mt-5">
<div class="row text-center mt-5">
<div class="col-10 ms-5">
<div class="d-flex">
<input type="search" class="form-control me-2" id="search_input" oninput="search(event)" placeholder="Search" aria-label="Search">
<button type="button" class="btn btn-primary" oninput="search(event)">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="row text-center mt-5 ">
<div class="col-10 ms-5" style="background-color: white; border-radius: 5px;">
<template type="text/x-handlebars-template" id="documentsTemplate">
<div class="row mt-2 mb-2">
{{#if documents.length}}
{{#each documents}}
<div class="col-2 mt-2">
<div style="height: 200px; width:150px; background-color: white; border-radius: 5px; border: solid 1px; border-color: lightblue;">
<img style="height: 150px; width:150px;" src="{{thumbnailLink}}" />
<input class="form-check-input" type="checkbox" value="">
{{name}}
</div>
</div>
{{/each}}
{{else}}
<div style="height: 200px; width:100%; background-color: white; text-align: center; font-size: 2vw; margin: 0 auto;">
No Results
</div>
{{/if}}
</div>
</template>
<div id="documentsList"></div>
</div>
</div>
</div>
</div>
<script type="module" src="script.js"></script>
<!-- <script src="https://apis.google.com/js/platform.js"></script> -->
<script src="https://apis.google.com/js/api.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
//script.js
//import { google_client_id } from "./utils/configs.js"
// get this from 'APIs and Services'>credentials>Oauth app
const google_client_id=XXXXX
(function() {
// Use the API Loader script to load google.picker and gapi.auth.
function onApiLoad() {
gapi.load('auth2', onAuthApiLoad);
gapi.load('picker', onPickerApiLoad);
}
globalThis.search = (event) => {
clearTimeout(globalThis.searchTimeout);
globalThis.searchTimeout = setTimeout(() => {
getTemplateFolder()
.then(searchFiles)
}, 1000)
}
document.getElementById('search_input').addEventListener("keyup", function(event) {
// Number 13 is the "Enter" key on the keyboard
var key = event.key || event.keyCode;
if (key === 13) {
// Cancel the default action, if needed
event.preventDefault();
search(event);
}
});
gapi.load('client:auth2', (aa) => {
gapi.client.init({
client_id: google_client_id,
scope: 'https://www.googleapis.com/auth/drive',
discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
})
.then(checkSession)
.then(function() {
return getTemplateFolder();
})
.then(function(folder) {
return getFiles(folder);
});
});
function checkSession() {
if (!gapi.auth2.getAuthInstance().isSignedIn.get()) {
return gapi.auth2.getAuthInstance().signIn();
}
}
function getTemplateFolder() {
return gapi.client.drive.files.list({
q: "mimeType = 'application/vnd.google-apps.folder' and name = 'XXXXXX' and trashed = false",
pageSize: 10,
fields: 'nextPageToken, files(id, name)',
}).then(function(response) {
console.log(response);
return response.result.files[0];
});
}
function getFiles(templateFolder) {
return gapi.client.drive.files.list({
q: `'${templateFolder.id}' in parents and trashed = false`,
pageSize: 10,
fields: 'nextPageToken, files(id, name, mimeType, thumbnailLink)',
}).then(function(response) {
console.log(response);
var template = Handlebars.compile(document.querySelector("#documentsTemplate").innerHTML);
document.querySelector("#documentsList").innerHTML = template({ documents: response.result.files });
return response.result.files;
});
}
function searchFiles(templateFolder) {
return gapi.client.drive.files.list({
q: `'${templateFolder.id}' in parents and fullText contains '${document.getElementById("search_input").value}' and trashed = false`,
pageSize: 10,
fields: 'nextPageToken, files(id, name, mimeType, thumbnailLink)',
}).then(function(response) {
console.log(response);
var template = Handlebars.compile(document.querySelector("#documentsTemplate").innerHTML);
document.querySelector("#documentsList").innerHTML = template({ documents: response.result.files });
return response.result.files;
});
}
})();
Make sure to add the google_client_id and the directory name you want to filter by.
i have a onsenui sliding menu. when i click one of the menu option (electronics), it takes me to page 1. from page 1 i use the navigator push method to navigate to page 2. In page 2 i do see the sliding menu, but nothing happens when i click or swipe the sliding menu. But when i navigate back to page 1, it works.
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/onsenui.css">
<link rel="stylesheet" href="./css/onsen-css-components.css">
<script src="./js/angular/angular.js"></script>
<script src="./js/onsenui.js"></script>
<script src="./js/main.js"></script>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<ons-navigator var="myNavigator">
<ons-page>
<ons-sliding-menu main-page="main.html" menu-page="menu.html" var="menu" swipeable=true max-slide-distance="200px">
</ons-sliding-menu>
</ons-page>
</ons-navigator>
<ons-template id="main.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Navigator - Main Page</div>
</ons-toolbar>
<div style="text-align: center">
<br>
<ons-button modifier="light"
ng-click="myNavigator.pushPage('page1.html', {hoge: 'hoge'})">
Push Page 1
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-page>
<ons-list>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('main.html', {closeMenu: true})">Clothes</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('page1.html', {closeMenu: true})">Electronics</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Page 1</div>
</ons-toolbar>
<div style="text-align: center">
<h1>Page 1</h1>
<ons-button modifier="light"
ng-click="myNavigator.pushPage('page2.html', {title: 'Page'})">
Push Page
</ons-button>
<ons-button modifier="light"
ng-click="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<div style="text-align: center">
<h1>Page 2</h1>
<ons-button modifier="light"
ng-click="myNavigator.pushPage('page2.html', {title: 'Page'})">
Push Page
</ons-button>
<ons-button modifier="light"
ng-click="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
</body>
The parent element in your code is an ons-navigator and you have a sliding-menu as its direct child. You can see the navigator as a frame that change its content every time you push or pop a page. Therefore, with its default content, the sliding menu, you are able to use it normally. Actually this sliding menu is another frame that contains your main.html. The problem is that, when you push to "page 2", you are using the navigator's method to change all its content, including that sliding menu.
You can invert the order of your navigator and sliding menu, so when you change the content of the navigator, the sliding menu will remain as the outer frame.
Hope it helps.