I am using jquery UI's sortable to sort a list with 16 items. I am using jQuery UI inside a Polymer custom element on Chrome but I am unable to drag elements around in Chrome. This works fine in Edge and FF. Can this be related to the native implementation on web components in Chrome (shadow-dom to be specific?). I am using a template to stamp out the draggable items. Here is the code snippet.
<link rel="import" href="../shared-libs.html" />
<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="import" href="../shared-styles/shared-w3css.html">
<dom-module id="nn-grid">
<template>
<style include="shared-w3css"></style>
<style type="text/css">
/* styles go here */
</style>
<ul id="sortable">
<template is="dom-repeat" items="{{tiles}}">
<li class$="ui-state-default w3-col s3 {{item.color}}"><span>{{item.number}}</span></li>
</template>
</ul>
</template>
<script>
Polymer({
is: "nn-grid",
ready : function() {
this.tiles = [
{moving: '', color: 'tile-pink', number: 1},
{moving: '', color: 'tile-blue', number: 2},
{moving: '', color: 'tile-green', number: 3},
{moving: '', color: 'tile-yellow', number: 4},
{moving: '', color: 'tile-blue', number: 5},
{moving: '', color: 'tile-green', number: 6},
{moving: '', color: 'tile-yellow', number: 7},
{moving: '', color: 'tile-pink', number: 8},
{moving: '', color: 'tile-green', number: 9},
{moving: '', color: 'tile-yellow', number: 10},
{moving: '', color: 'tile-pink', number: 11},
{moving: '', color: 'tile-blue', number: 12},
{moving: '', color: 'tile-pink', number: 13},
{moving: '', color: 'tile-blue', number: 14},
{moving: '', color: 'tile-blank ui-state-moving', number: ''},
{moving: '', color: 'tile-green', number: 16}
];
},
attached : function () {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
}
});
</script>
</dom-module>
I referred to this link but no luck. Thanks in advance for your help
Related
Here is a design pic for reference, note the 2px of space. The axisLine > lineStyle doesn't offer a padding property. Any suggestions? Chart design example
As I know this is not possible by default but you can try to simulate this option. Something like that:
var myChart = echarts.init(document.getElementById('chart'));
var option = {
tooltip: {},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
lineStyle: {
width: 1,
color: 'white',
shadowColor: 'black',
shadowOffsetY: 2
}
},
axisLabel: {
color: 'black'
},
axisTick: {
lineStyle: {
color: 'black'
}
}
}],
yAxis: [{
type: 'value',
}],
series: [{
type: 'bar',
data: [1, 34, 12, 23, 43, 64, 45]
}]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#5.2.2/dist/echarts.min.js"></script>
<div id="chart" style="width: 600px;height:400px;"></div>
The code for installing Horsey plugin is simple but it is not work. What I do wrong?
<header>
<div class='parent'>
<input id='ig'/>
<pre>
<code>
horsey(document.querySelector('input'), {
source: [{ list: [
{ value: 'banana', text: 'Bananas from Amazon Rainforest' },
{ value: 'apple', text: 'Red apples from New Zealand' },
{ value: 'orange', text: 'Oranges from Moscow' },
{ value: 'lemon', text: 'Juicy lemons from the rich Amalfitan Coast' }
]}],
getText: 'text',
getValue: 'value'
});
</code>
</pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/horsey/4.0.1/horsey.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/horsey/4.0.1/horsey.min.css" media="all">
</header>
I see only standard input on page.
You must write code like below:
<script src="https://www.malketiya.com/listgrid/horsey.min.js"></script>
<input id='ig'/>
<script>
horsey(document.getElementById('ig'), {
source: [{ list: [
{ value: 'banana', text: 'Bananas from Amazon Rainforest' },
{ value: 'apple', text: 'Red apples from New Zealand' },
{ value: 'orange', text: 'Oranges from Moscow' },
{ value: 'lemon', text: 'Juicy lemons from Amalfitan Coast' }
]}],
getText: 'text',
getValue: 'value'
});
</script>
<link rel="stylesheet" href="https://www.malketiya.com/listgrid/horsey.min.css" media="all">
Running sails 1.0 app with Vuejs front end with bootstrap and trying to show a selected "option" in a dropdown but it doesn't show as selected when the page renders. I have tried both <option selected>ounces</option> and <option selected="selected">ounces</option>
HTML:
<!-- ... -->
<div class="col">
<div class="form-group">
<select v-bind:id="'ingredient' + index + 'Units'" class="form-control" v-model="newRecipeFormData.ingredients[index].units">
<option selected>ounces</option> <!-- not showing as selected -->
<option>grams</option>
<option>pounds</option>
<option>kilograms</option>
</select>
</div>
</div>
Screenshot 1:
Where should I look for the issue?
The solution was to set the "selected" value in the Vue model, since it is binded by v-model
In my js:
data: {
recipes: {},
newRecipeFormData: {
recipeName: '',
recipeNotes: '',
ingredients: [
{ name: '', weight: '', units: 'ounces' },
{ name: '', weight: '', units: 'ounces' },
{ name: '', weight: '', units: 'ounces' },
{ name: '', weight: '', units: 'ounces' },
{ name: '', weight: '', units: 'ounces' },
{ name: '', weight: '', units: 'ounces' }
]
},
//…
syncing: false,
cloudError: '',
//…
recipesModalVisible: false,
},
Now it's showing correctly:
I am developing a polymer component so:
<dom-module id="form-list">
<template>
<div>{{title}}</div>
<form>
<template is="dom-repeat" items="{{inputAndLabel}}">
<div>
<label>{{item.tag}}</label>
<input type="{{item.type}}" value="{{item.defaultValue}}">
</div>
</template>
</form>
</template>
<script>
Polymer({
is: 'form-list',
ready: function() {
this.title = 'Formulario: Usuario',
this.inputAndLabel = [
{defaultValue: '', type:'text', tag:'Nombre' },
{defaultValue: '', type:'text', tag: 'Apellido' },
{defaultValue: '', type:'text', tag:'Email' },
{defaultValue: '', type:'text', tag: 'Dirección' },
];
}
});
</script>
</dom-module>
This portion of code, I am adding that inside element,
this.inputAndLabel = [
{defaultValue: '', type:'text', tag:'Nombre' },
{defaultValue: '', type:'text', tag: 'Apellido' },
{defaultValue: '', type:'text', tag:'Email' },
{defaultValue: '', type:'text', tag: 'Dirección' },
];
How to load the data from another file? Or from file that is using this component <form-list>
I am trying to create a Form using ExtJS . The files are placed properly but no rendering is happening :
index.html
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/ext-debug.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div id="aa"></div>
</body>
</html>
app.js
Ext.create('Ext.form.Panel', {
renderTo: document.getElementById('aa'),
title: 'User Form',
height: 130,
width: 280,
bodyPadding: 10,
defaultType: 'textfield',
items: [
{
fieldLabel: 'First Name',
name: 'firstName'
},
{
fieldLabel: 'Last Name',
name: 'lastName'
},
{
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}
]
});
Anybody any idea what am I missing ?
Thanks
In your app.js, try running that code when the onReady event has been fired e.g.
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
renderTo: document.getElementById('aa'),
title: 'User Form',
height: 130,
width: 280,
bodyPadding: 10,
defaultType: 'textfield',
items: [
{
fieldLabel: 'First Name',
name: 'firstName'
},
{
fieldLabel: 'Last Name',
name: 'lastName'
},
{
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}
]
});
});
Just use Ext.onReady():
Adds a function to be called when the DOM is ready, and all required
classes have been loaded.
If the DOM is ready and all classes are loaded, the passed function is
executed immediately.
Working example: http://jsfiddle.net/Ld5e6/