Here is a simple code of web component I tried to had inside a summernote.js :
This is just an example of using js files of components and using them inside a web component, but for some reason its not working at all. Like the script is not being loaded inside the DOM or its there but can't be used. I alo tried this without shadow dom and got the same result. What am I missing?
class MyEditor extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.isOpen = false;
this.shadowRoot.innerHTML = `
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.js"></script>
<style>
</style>
<div id="summernote">
<span style="color:red;background-color: yellow;">example</span>
</div>
`;
const summernote = this.shadowRoot.querySelectorAll('#summernote');
summernote.summernote({
placeholder: 'Hello stand alone ui',
tabsize: 2,
height: 600,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
],
disableResizeEditor: true
});
}
customElements.define('my-editor', MyEditor);
None of the import Files is loaded, so nothing can't be used. How to solve this issue?
BTW, a static html page its working:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>without bootstrap</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.js"></script>
</head>
<body>
<div id="summernote">
<span style="color:red;background-color: yellow;">1234</span>
</div>
<script>
$('#summernote').summernote({
placeholder: 'Hello stand alone ui',
tabsize: 2,
height: 600,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
],
disableResizeEditor: true
});
</script>
</body>
</html>
InnerHTML doesn't parse script tag.
index.html
<template id="test_template">
<h1>Template script function</h1>
<script src="./test.js"></script>
</template>
test.js
console.log({ current_time: Date.now() });
my-script.js
const testTemplate = document.getElementById("test_template");
const testContent = testTemplate.content.cloneNode(true);
document.body.appendChild(testContent);
Related
I installed Tailwind CSS and Elements on my Laravel project.
I'm doing the responsive part, but the "height" is not working when I use breakpoints (i.e "md:xxx").
I tried with other things like background color, width or flex, it's working.
<div class="bg-pink-500 md:bg-black h-16 md:h-64"></div>
The only change I made on Tailwind is to set my application color palette.
I see someone having the same issue and talking about a file missing (postcss.config.js).
I have postcss installed (v8.4.6) in my package.
I tried to manually create the file and fill with this (doesn't work) :
postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
}
Here is my code :
HTML CSS links
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
{{-- Tailwind Components --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght#300;400;500;600;700&display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
mix.sass('resources/scss/style.scss', 'public/css');
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/**/*js'
],
theme: {
extend: {
fontFamily: {
'montserrat': ['Montserrat'],
sans: ['Montserrat'],
serif: ['Montserrat'],
mono: ['Montserrat'],
display: ['Montserrat'],
body: ['Montserrat']
// sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
colors: {
'black1': '#181818',
'black2': '#323232',
'white0': '#F9F9F9',
'white1': '#F1F1F1',
'white2': '#E4E4E4',
'red1': '#8E0000',
'red2': '#BA0000',
'red3': '#D62323'
},
},
},
variants: {
extend: {
opacity: ['disabled']
},
},
plugins: [
require('#tailwindcss/forms')
]
};
Thank you
UPDATE:
The css keeps default settings instead of using my breakpoint settings.
Screenshot of CSS in dev tool
Has you can see on the post's screenshot, the CSS file (index.min.css) coming from Tailwind CDN overwritte app.css, just call Tailwind CDN first:
{{-- Tailwind Components --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght#300;400;500;600;700&display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
I cannot figure out why my css file is not working. I added my css, html and settings.py files. Can anyone help? I've tried collectstatic but get an error:
FileNotFoundError: [WinError 3] The system cannot find the path specified: 'D:\\mysite\\dreamboard\\static\\dreamboard\\style.css'
I tried replacing my path in the STATICFILES_DIRS but it still does not work. I'm not sure what to do. It could be the bootstrap? Or something. I want to have a style sheet so I can my form to a popup button. Everything is titled and spelled correctly. Any ideas?
Here are my files:
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load crispy_forms_tags %}
<link rel="stylesheet" type="text/css" href="{% static 'dreamboard/style.css' %}">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/73cead4581.js" crossorigin="anonymous"></script>
<title>Hello, world!</title>
</head>
<body class="bg-light">
<h1>Hello, world!</h1>
<div class="container">
<div class="row bg-dark">
<div class=" col-sm">
<h1 style="color:white">Dreamboard</h1>
</div>
<div class="col-sm">
<button class="btn-lg btn-primary" type="submit">Add Dream</button>
</div>
</div>
</div>
</div>
<form class="" action="" method="post" autocomplete="off">
{% csrf_token %}
<div class="row">
<div class="col-md-6">
{{form.first_name|as_crispy_field}}
</div>
<div class="col-md-6">
{{form.last_name|as_crispy_field}}
</div>
</div>
{{form.dreamItem|as_crispy_field}}
<br>
<button type="submit" class="d-grid gap-2 col-12 btn btn-success">Submit</button>
</form>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>
css
.body {
background-color: blue;
}
.title {
color: blue;
}
settings.py
from pathlib import Path
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'wpx1d9%a4(9-c%+$=or6ez+9*d7&)lo!d5(8cu3##3votm)!72'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'dreamboard',
'crispy_forms',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
CRISPY_TEMPLATE_PACK = 'bootstrap4'
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'mysite.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'mysite.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': 'dreams',
'USER': 'postgres',
'PASSWORD': 'password',
'HOST': '127.0.0.1',
'PORT': '5432',
}
}
# Password validation
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
"/mysite/dreamboard/static/dreamboard/style.css",
]
I am not sure because I don't think many people use an absolute path to connect to static files. Try creating a new folder named "static", In the same folder where you have the manage.py file. and add this into your settings.py.
BASE_DIR = Path(__file__).resolve().parent.parent
STATIC_DIR = os.path.join(BASE_DIR,"static")
check the settings.py code here
Add the below code directing django to the static file location
# Static files (CSS, JavaScript, Images) #https://docs.djangoproject.com/en/3.1/howto/static-files/
> STATIC_URL = '/static/'
> STATICFILES_DIRS = [
> STATIC_DIR,
> ]
Now link it in the HTML using ,
<link rel="stylesheet" href="{% static 'css/base.css' %}">
(create a folder called css inside the static folder in your base directory)
You have named your class "bg-light", but in your css code it looks like you are trying to target a class in your css file named "body" when you don't have a class name body. If you are tying to access the body tag which it looks like your trying to do then you have to get rid of the "." you have in your ".body{}". You have also done the same thing for your title tag which is ".title". Your not targeting what you think your trying to target.
#Your HTML Code
<body class="bg-light">
#Your css code >>> pay close attention to the "."
.body {
background-color: blue;
}
Try This:
body{
background-color: blue;
}
title{
background-color:blue;
}
I am using bootstrap table to display some data in my web application. https://bootstrap-table.com/ and I want to put an export feature in. The docs say to use https://github.com/hhurz/tableExport.jquery.plugin so I have added this to my imports and made the necessary code changes. Within the docs for this it says you can specify a format for the cells you are exporting by applying optional html data attributes while generating the table but how do I do this if my table is generated using bootstrap-table. I can't seem to work it out.. I basically need to the html data attribute data-tableexport-msonumberformat="0" to a set of td's generated by my bootstrap-table javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="/webjars/bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/webjars/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script type="text/javascript" src="/webjars/bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link href="/webjars/bootstrap-table/1.16.0/bootstrap-table.css" rel="stylesheet"></script>
</head>
<body class="bg-light">
<button id="exportExcelBtn" class="btn btn-sm btn-success" type="button">
Export
</button>
<table id="table"></table>
<script src="/webjars/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
<script src="/webjars/bootstrap-table/1.16.0/extensions/export/bootstrap-table-export.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('#exportExcelBtn').on('click', function () {
$('#table').tableExport({
type: 'excel',
fileName: "Order Summary"
});
});
$('#table').bootstrapTable({
url: '/getTableData',
columns: [
{
field: 'orderNo',
title: 'Order No',
sortable: true
},
{
field: 'itemNo',
title: 'Item No',
sortable: true,
**tableExport: {msoNumberFormat: '0'}**
}
})
});
</script>
</body>
</html>
https://github.com/himingby/tableExport.jquery.plugin/blob/master/test/index.html
could you try this below?
<script type="text/javascript">
function DoOnMsoNumberFormat(cell, row, col) {
var result = "";
if (row > 0 && col === 0)
result = "\\#";
else if (row > 0 && col === 2)
result = "0"; // #issue 327: Preserve long numbers
return result;
};
$( document ).ready(function() {
$('#exportExcelBtn').on('click', function () {
$('#table').tableExport({
type: 'excel',
fileName: "Order Summary"，
mso:{onMsoNumberFormat: DoOnMsoNumberFormat},
});
});
$('#table').bootstrapTable({
url: '/getTableData',
columns: [
{
field: 'orderNo',
title: 'Order No',
sortable: true
},
{
field: 'itemNo',
title: 'Item No',
sortable: true
}
})
});
Creating a simple KendoUI drop down list using AngularJS. Not seeing the drop down with the correct styling.
Here's the html...
<div ng-controller="welcome2 as vm">
<select kendo-drop-down-list k-options="vm.phoneOptions"></select>
</div>
The js file:
(function () {
'use strict';
angular.module('app')
.controller('welcome3',
[welcome3]);
function welcome3() {
var vm = this;
vm.activate = activate;
activate();
function activate() {
vm.phoneOptions = {
dataSource: {
data: [
{name: "iPhone"},
{name: "Droid"},
{name: "Windows"}
]
},
dataTextField: "name",
dataValueField: "id",
optionLabel: "Select a phone..."
};
}
}
})();
Inside the index.js file I have (among other things) the following:
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<link href="content/bootstrap.css" rel="stylesheet" />
<link href="content/kendo.common.min.css" rel="stylesheet" />
<link href="content/kendo.default.min.css" rel="stylesheet.css" />
</head>
<body>
// ...
<div ng-view></div>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/kendo.all.min.js"></script>
<script src="scripts/angular-kendo.js"></script>
//....
<script src="app/welcome/welcome3.js"></script>
</body>
</html>
The drop down looks like this:
As opposed to this:
Thanks!!
Usually when you have an unstyled control like that, it's because you have a wrong stylesheet link. It looks like the common file is linked right, but check the other. Also, when using Bootstrap, make sure to use the common-bootstrap CSS file.
http://trykendoui.telerik.com/#burkeholland/UXav
I'm trying to run the treegrid example but it only gives me the grid with no data in it!
this is my default.aspx:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My tree grid</title>
<!-- Ext -->
<link rel="stylesheet" type="text/css" href="ExtJs4/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJs4/bootstrap.js"></script>
<script type="text/javascript" src="ExtJs4/ext-all.js"></script>
<!-- example code -->
<script type="text/javascript" src="Scripts/treepanel.js"></script>
</head>
<body>
<h1>My tree grid</h1>
<div id="tree-div"> </div>
this is my treepanel.js
Ext.Loader.setConfig({ enabled: true }); //
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.tip.QuickTipManager',
'Ext.container.Viewport',
'Ext.layout.*',
'Ext.form.Panel',
'Ext.form.Label',
'Ext.grid.*',
'Ext.data.*',
'Ext.tree.*',
'Ext.selection.*',
'Ext.tab.Panel'
]);
Ext.onReady(function ()
{
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', type: 'string'},
{name: 'user', type: 'string'},
{name: 'duration', type: 'string'}
]
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
url: 'treegrid.json'////
},
folderSort: true
});
//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: 'tree-div',
rootVisible:true,
store: store,
autoload:true,
columns: [{xtype: 'treecolumn', text: 'Task', dataIndex: 'task' },{text: 'Assigned To', dataIndex: 'user'}]
});
});
am I doing something wrong here?
I have no error msg from my firebug...so why isn't it working?
if I can't run an example how am I going to do more..I'm frustrated with this.
not sure, but the "autoLoad: true" is now on the panel, but shouldn't it be on the store?
Install PHP and do the following in IIS:
click on the new site
click on MIME types
right click in open space > Add > File name extension: "json" ... MIME Type: "application/x-javascript"
Adding more details:
http://www.sencha.com/forum/showthread.php?33266-Some-Problem-with-JSON&p=229858&viewfull=1#post229858