I have a 10 column blueprint setup and having trouble with havingtwo divs each be 5 columns wide. The second one always jumps down under the first one, even though I have "last" in the second div.
Here's the code:
<div class="container">
<div class="span-5">
<ul><li><p><strong>Discounts on professional development programs that protect your interests.</strong> We monitor state and national policy issues that affect our industry and take action on our members' behalf. These efforts ensure that our members have a powerful voice and strong representation on the issues that matter.</p></li></ul>
</div>
<div class="span-5 last">
<ul><li><p><strong>Marketing and promotional opportunities and management and operational resources.</strong> You get access to useful tools as well as valuable insights and expert perspectives on industry issues and trends that will help your business succeed.</p></li></ul>
</div>
</div>
Here's part of the CSS:
== STRUCTURE: ========================
* Page width: 640 px
* Number of columns: 10
* Column width: 55 px
* Margin width: 10 px
======================================
By default, the grid is 640px wide, with 10 columns
spanning 55px, and a 10px margin between columns.
If you need fewer or more columns, use this formula to calculate
the new total width:
Total width = (number_of_columns * column_width) - margin_width
-------------------------------------------------------------- */
/* A container should group all your columns. */
.container {
width: 640px;
margin: 0 auto;
}
/* Use this class on any div.span / container to see the grid. */
.showgrid {
background: url(src/grid.png);
}
/* Body margin for a sensile default look. */
body {
margin:1.5em 0;
}
/* Columns
-------------------------------------------------------------- */
/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10 {float:left;margin-right: 10px;}
/* The last column in a row needs this class. */
div.last { margin-right: 0; }
/* Use these classes to set the width of a column. */
.span-1 { width: 55px;}
.span-2 { width: 120px;}
.span-3 { width: 185px;}
.span-4 { width: 250px;}
.span-5 { width: 315px;}
.span-6 { width: 380px;}
.span-7 { width: 445px;}
.span-8 { width: 510px;}
.span-9 { width: 575px;}
.span-10, div.span-10 { width: 640px; margin: 0; }
Related
I am new to angular gridster 2
Could you please let me know if we are able to display the already developed charts using angular gridster 2 , I am also looking to see the same approach . As my UI has 5 different div blocks and inside there is a card being displayed in each div block ..
How can I use angular gridster to disaply these 5 cards with draggable and resizable features after loading the page..
<gridster [options]="options">
<div class="col-md-12 ml-auto mr-auto" >
<div class="row" > <!--[item]="item" *ngFor="let item of dashboard" gridster-item-->
<gridster-item class="col-lg-3 col-md-6 col-sm-6" [item]="item" *ngFor="let item of dashboard" >
<card1></card1>
<card2></card2>
</gridster-item>
</gridster>
export class dashboard implements oninit{
options={
draggable: {
enabled: true},
resizable: {
enabled: true
}
};
dashboard = [
{cols: 1, rows: 1, y: 0, x: 0}
];
}
Please explain what does the rows,columns, x and y represents .. How does it effect the UI if these values are changed..
Cols and Rows are your gridster layout design to allow gridster-items. If cols = 1 and rows = 1, you can put one gridster item only except maxItemRows and maxItemCols set greater than 1. The y and x are col and row index for gridster-item.
Example, cols = 5, rows = 5, and x = 3, y = 2, gridster-item will display start from column 3 and row 2.
Here are some articles about gridster.
https://medium.com/javascript-in-plain-english/drag-and-drop-dashboard-builder-with-angular-and-gridster-a07592e54ce2
https://developer.aliyun.com/mirror/npm/package/helio-angular-gridster
I have a page that allows a user to drag/drop images into pre-defined DIVs, then I tally up the total value of the images based on their class name. What I am trying to do is get vue to read the values from each outer div.answer and get the class names of the child images.
My source code is:
<div
is="box-answers"
v-for="box in boxes.slice().reverse()"
v-bind:key="box.id"
v-bind:level="box.level"
v-bind:hint="box.hint"
></div>
<script>
Vue.component('box-answers', {
props: ['level','hint'],
template: '<div class="droppable answer :id="level" :title="hint"></div>'
});
new Vue({
el: '#mainapp',
data: {
boxes: [
{ id: 1, level: 'baselevel-1', hint: 'x 1' },
{ id: 2, level: 'baselevel-2', hint: 'x 20' },
{ id: 3, level: 'baselevel-3', hint: 'x 400' },
{ id: 4, level: 'baselevel-4', hint: 'x 8,000' },
{ id: 5, level: 'baselevel-5', hint: 'x 160,000' }
]
}
</script>
This converts to the follow HTML (the nested DIVs and SPANs are user-possible entries by dragging):
<div id="baselevel-5" class="droppable answer" title="x 160,000">
<div><img src="images/line.gif" alt="Five" class="imgfive"></div>
<span><img src="images/dot.gif" alt="One" class="imgone"></span>
</div>
...
<div id="baselevel-1" class="droppable answer" title="x 1">
<span><img src="images/line.gif" alt="One" class="imgone"></span>
</div>
Currently, I have jQuery/JavaScript calculating the point values using the following:
$(function(j) {
var arAnswers = Array(1);
count = 0; //
j("div.answer").each(function( idx ) {
currentId = j(this).attr('id');
ones = 0;
fives = 0;
if ( j("#" + currentId).children().length > 0 ) {
ones = j("#" + currentId).children().find("img.imgone").length * 1;
fives = j("#" + currentId).children().find("img.imgfive").length * 5;
arAnswers[count] = ones + fives; //Tally box value
count++;
}
});
});
I would like Vue to perform similar iteration and addition to return total value of ones and fives found based on the image classname.
Currently, you are approaching this problem as a pure-play DOM operation. If that is what you need then you can simply use $refs:
<!-- NOTICE ref -->
<div ref="boxAnswers"
is="box-answers"
v-for="box in boxes.slice().reverse()"
v-bind:key="box.id"
v-bind:level="box.level"
v-bind:hint="box.hint">
</div>
Inside your high-level component, you will have a function like:
function calculate() {
// NOTICE $refs
const arAnswers = this.$refs.boxAnswers.map((x) => {
// $el is the DOM element
const once = x.$el.querySelectorAll('img.imgone').length * 1;
const fives = x.$el.querySelectorAll('img.imgfive').length * 5;
return once + fives
});
return arAnswers;
}
But this is not the correct Vue way of doing things. You have to think in terms of events and data model (MVVM - don't touch DOM. DOM is just a representation of your data model). Since, you have a drag-n-drop based application, you have to listen for drag, dragstart, dragend and other drag events. For example:
<!-- NOTICE drop event -->
<div #drop="onDropEnd(box, $event)"
is="box-answers"
v-for="box in boxes.slice().reverse()"
v-bind:key="box.id"
v-bind:level="box.level"
v-bind:hint="box.hint">
</div>
Your onDropEnd event handler will look like:
function onDrop(box, $event) {
// box - on which box drop is happening
// $event.data - which image is being dropped
// Verify $event.data is actually the image you are intending
if ($event.data === 'some-type-image') {
// Do the counting manipulations here
// ... remaining code
}
}
This is not a complete code as I don't know other components. But it should help you with the required direction.
Folks, trying to follow example here http://jsfiddle.net/yF45N/. I have JADE file below, which should open up a modal once a table item is clicked. What am I missing?
Thanks!!!!
block Content
if (pendingArray)
legend Pending Requests
table.table-hover.table-condensed
thead
tr
th id
th Email
th foo
th bar
tbody
- each val in pendingArray
tr
data-toggle="modal"
data-id="#{val.id}"
data-target="#orderModal"
href='someModal'
td #{val.id}
td #{val.Email}
td #{val.foo}
td #{val.bar}
orderModal.modal.fade
.modal-dialog
.modal-content
.modal-header
button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
h4.modal-title Title
.modal-body
p body
.modal-footer
button.btn.btn-default(type='button', data-dismiss='modal') Close
button.btn.btn-primary(type='button') Save changes
body
script.
$(function(){
$('#orderModal').modal({
keyboard: true,
backdrop: "static",
show:false,
}).on('show', function(){
var getIdFromRow = $(event.target).closest('tr').data('id');
//make your ajax call populate items or what even you need
$(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>'))
});
});
Very Simple, even for a front-end idiot like myself:
tbody
- each val in pendingArray
tr(data-toggle='modal', href='#mvrDisplayModal', data-target="#foo")
td #{val.email}
td #{val.blah}
#mvrDisplayModal.modal.fade
.modal-dialog
.modal-content
.modal-header
button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
h4.modal-title Title
.modal-body
p body
p #{foo}
.modal-footer
button.btn.btn-default(type='button', data-dismiss='modal') Close
button.btn.btn-primary(type='button') Save changes
I have a text field (or time/date field) with mask. __:__:__ I have to change the color of "_" from black to white. Has Extjs 4 any solution to change input to (editable) div?
Have you tried overriding the base fieldSubTpl property for your field? I.e, adding the property with a as a div element instead of input:
fieldSubTpl: [ // note: {id} here is really {inputId}, but {cmpId} is available
'<div id="{id}" type="{type}" {inputAttrTpl}',
' size="1"', // allows inputs to fully respect CSS widths across all browsers
'<tpl if="name"> name="{name}"</tpl>',
'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
'{%if (values.maxLength !== undefined){%} maxlength="{maxLength}"{%}%}',
'<tpl if="readOnly"> readonly="readonly"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' class="{fieldCls} {typeCls} {editableCls}" autocomplete="off"/>',
{
disableFormats: true
}
],
Now I am here, using this tpl:
fieldSubTpl: [
'<div stlye="position: inherit; top: 0px; left: 0px" id="{id}-div" contentEditable='+!this.disableSel+' type="{type}" {inputAttrTpl}',
' size="1"',
'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' class="{fieldCls} {typeCls} {editableCls}" autocomplete="off">{[Ext.util.Format.htmlEncode(values.value)]}</div>' +
'<input type="text" id="{id}" value="{[Ext.util.Format.htmlEncode(values.value)]}" ' +
'style="visibility: hidden; height: 0px; width: 0px; " />',
{
disableFormats: true
}
]
And I made a new plugin extended the original, change all this.inputTextElement.value to get or set HTML
this.getPicker().on('select', function (p, r, o){
Ext.get(this.id + '-inputEl-div').setHTML(r.data.disp);
}, this);
And on some other event the hidden input and div change their values, but it's not the ultimate version of my sollution. Now I have lots of work yet... Huh... :)
And if you know other idea, please post it!
An other solution I'm trying:
buildDivsByFormat: function () {
// 12: 'h:i A', '03:15 PM'. 'h:i:s.u A' 24: 'H:i' 'H:i:s.u' instead.
var w = 8;
var divs = {};
if(this.format.indexOf("i") > -1)
divs.i = '<div style="padding:0px 0px 1px 0px;width:'+w*2+'px;min-width:'+w*2+'px;max-width:'+w*2+'px;float:left;display:inline-block;"' +
contentEditable="'+!this.disableSel+'" id="'+this.id+'-div-i'+'"> </div>';
... // making this with other format elements
var d = '';
var formatArray = this.format.split('');
for(var i = 0; i < formatArray.length; i = i + 1){
var currentChar = formatArray[i];
if(formatArray[i] === ":") currentChar = 'dp';
if(formatArray[i] === ".") currentChar = 'p';
if(formatArray[i] === " ") currentChar = 'sp';
d = d + divs[currentChar];
}
this.divs = d;
return d;
}
Making divs by format and inserting them to this tpl's div:
fieldSubTpl: [
'<div stlye="position: inherit; top: 0px; left: 0px" id="{id}-div" type="{type}" {inputAttrTpl}',
' size="1"',
'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' class="{fieldCls} {typeCls} {editableCls}" autocomplete="off">' +
'</div>' +
'<input type="text" id="{id}" value="{[Ext.util.Format.htmlEncode(values.value)]}" ' +
'style="visibility: hidden; height: 10px; width: 0px; " />',
{
disableFormats: true
}
]
Then I do some changing function... I have some problems: I can't coloring this version, but... bigger problem is: if input is visibility: hidden;, it makes space after my tpl's div... on display: none makes time picker to absolute 0 0 position of window, not to the field (div)... Has anybody an idea about this?
I have a list (xtype: 'list') and I use an XTemplate to customize it. It looks like this:
itemTpl: new Ext.XTemplate('<div>',
'<span style="display: inline-block; width: 100px">{itemName}</span>',
'<span style="display: inline-block; width: 100px">{price}</span>','</div>')
I would like to change the color of {price} (using css I guess) based on the previous and current value:
If [current value] > [previous value] color it green.
If [previous value] > [current value] color it red.
The price value is updated like this:
var itemList = Ext.getCmp('itemList');
var store = itemList.getStore();
store.getAt(i).set('price', currentPrice);
While i is the number of item (or row in the list) that is updated and currentPrice is the new value. This code is executed by a function that is called once every second.
I know there is an option to have conditions inside an XTemplate, but all the examples I saw compare the new value with a constant. How can I change the color of {price} by comparing the new value to the old one?
You may add 'color' property to store when the store has loaded/created or while it is filling/creating.
store.each(function(item, i) {
var previousItem = store.getAt(i-1);
if (previousItem) {
var previousPrice = previousItem.get('price');
var price = item.get('price');
item.set('color', (price > previousPrice) ? 'green' : 'red');
}
})
Then you can use property in template
itemTpl: new Ext.XTemplate('<div>', '<span style="display: inline-block; width: 100px; color: {color}">{itemName}</span>', '<span style="display: inline-block; width: 100px">{price}</span>','</div>')