Ext.dataview.Dataview unlike Ext.dataview.List does not have a striped attribute.
Is there a straightforward way of simulating that?
I've tried using itemTpl in my DataView, but no luck.
itemTpl: '<tpl for=".">' +
'<div class="{[xindex % 2 === 0 ? "even" : "odd"]}"></div>' +
'</tpl>'
Maybe my "for clause" is wrong. Maybe I shouldn't be iterating through the root node...
If you are using the itemTpl in the DataView the xindex value will be always one. Since it will create the xtemplate for each dataview item.
You can try using the css:
dataviewItemCls:nth-child(even) {background: #CCC}
dataviewItemCls:nth-child(odd) {background: #FFF}
ref :- http://www.w3.org/Style/Examples/007/evenodd.en.html
Related
I am trying to divide my CKEditor 5 toolbar in two pieces, far apart from each other. Here's my actual toolbar :
With the following html rendered code :
What I would like to is something like this :
toolbar: [
'heading',
'bold',
'italic',
'underline',
'=', // this is the delimiter
'alignment:left',
'alignment:right',
'alignment:center'
],
And I want to generate this code based on that delimiter :
<div style="display: flex; flex-direction: row; justify-content: space-between;">
<div>
<!-- part 1 before the = -->
</div>
<div>
<!-- part 2 after the = -->
</div>
</div>
I can't figure out how to achieve this. Anyone has an idea ?
The current ToolbarView doesn't support splitting into multiple lines.
I can think of two quite straightforward choices:
Extend ToolbarView so it can do something like this and either use it directly in your own Editor class or inject it instead of the original ToolarView just like you can inject your own icons.
Fill two separate toolbar instances and use them in your own editor class.
BTW, the simplest editor implementation you can use as a base is the DecoupledEditor which you can for instance see here: https://docs.ckeditor.com/ckeditor5/latest/examples/builds/document-editor.html
This issue is tracked in https://github.com/ckeditor/ckeditor5/issues/6146 add thumbs up to the ticket if you would like this feature to be implemented.
I have a Svg and would like to make some parts of the viewbox attribute dynamic.
svg :viewBox="0 0 {{x}} {{y}}" :width="x" :height="y">
</svg>
What is the right syntax to implement this
You can't use interpolation, you will need a computed:
computed:{
viewbox(){
return "0 0 " + this.x + " " + this.y;
}
}
Then in your markup:
<svg :viewBox="viewbox" :width="x" :height="y"></svg>
The accepted solution does not work appropriately due to how svg handles viewBox.
You need to bind it as follows:
<svg :view-box.camel="viewbox" :width="x" :height="y"></svg>
With the other answer Vue converts the camel case of viewBox to all lowercase and the component does not render correctly. This will keep the correct camel case on viewBox
I would like to customize typeahead / bloodhound's display of the results list by adding a clickable font awesome icon. The use case is to allow users to initiate editing of one of the result items, rather than selecting it.
Is this possible?
I have added this suggestion template:
suggestion: function(el){
return '<div><strong>' + el.value + '</strong>' +
'<span style=display:inline-block; float:right;">
<i class="fa fa-minus-circle"></i><span></div>'},
}
This displays the icon and makes it clickable, but the icon is displayed right next to the el.value.
The answer is to not use inline styles, instead add a new class definition:
.tt-suggestion span {
display: : inline-block;
float: right;
}
and the icon is displayed correctly, aligned at the end of the suggestion row.
I need to show title/caption for video popup. In image type there is option for this, but none for video/iframe.
In docs (http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe_type) I found example of templating markup but I don't understand how to make title visible.
Would you please help me to setup iframe markup to show title in popup window from link like
<a class="popup" title="This is caption" href="http://vimeo.com/41128754"></a>
JS code
$('a.popup').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: true,
titleSrc: 'title'
});
Thank you.
A bit late, but it may be helpful to anyone else looking for the answer.
The "titleSrc" attribute only applies to type: image, it doesn't work for iframes.
The developer of Magnific Popup has an example of how to add a title to an iframe popup here: http://codepen.io/dimsemenov/pen/zjtbr
This is the JS:
$('.popup').magnificPopup({
type: 'iframe',
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'<div class="mfp-title">Some caption</div>'+
'</div>'
},
callbacks: {
markupParse: function(template, values, item) {
values.title = item.el.attr('title');
}
},
// your other settings
});
To make the title appear, you must include this CSS:
.mfp-title {
position:absolute;
/* other formatting */
}
What this is doing:
markup is adding a new div with class mfp-title to the frame wrapper, that will be used to display the caption.
The markupParse callback gets the title attribute from the link if there is one, and adds it to the new div.
That this adds the title to the bottom of the video, regardless of where the .mfp-title div is included, as it uses absolute positioning. You need to use CSS to position it at the top, e.g. top: -20px; left:0; (you'll need a negative value for the top to move it above the iframe)
.
The developer has a collection of examples here that might help anyone looking for how to do things not covered in the documentation.
http://codepen.io/collection/nLcqo/
Fo iFrame you have to use vimeo embed code. In my project I used following one. May be its being useful to you. If you have any question regarding to this please let me know.
<iframe height="100" width="100" title="Vimeo Video" class="vimeo" src="http://player.vimeo.com/video/41128754" ></iframe>
I have a templated custom widget that inherits from dijit.layout._LayoutWidget, dijit._Container, and dijit._Templated which gives my widget native Widget support for resizing, etc. All I need is a TabContainer, which is sized to the size of widget. Here is my widget.
<div dojoAttachPoint="containerNode">
<div dojoType="dijit.layout.TabContainer" tabPosition="top" style="width:100%;height:100%" >
<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">
hello
</div>
</div>
</div>
Everything looks fine but I get a weird TabList.
I looked into the problem. All the pieces of the widget and TabContainer have the correct width and height values. Only The tablist has a loooong width (50'000 something pixels wide): I have read about similar issues such as this one: http://bugs.dojotoolkit.org/ticket/10495, but in my case all the elements have correct width and length. I have no idea how does tablist get this long width.
I have also tried many ways of adding and removing style="width:100%;height:100;" for the parent container and its parents. But none of the configurations fixed the problem.
Is there a way to fix this problem?
Just in case someone is looking for the solution, I had the same problem, and came to this question. Though I looked at the bug reports, it didn't apply in my case, I was not embedding tabcontainer inside table or setting doLayout to false. I tried setting tabcontroller but that didn't work either. Finally after debuggin, turns out you have to provide 'resize' method in your widget and resize tabcontainer inside it in the following way
widgetTemplate = '... ' + //Our tabcontainer declaration
'<div dojoAttachPoint="containerNode">' +
'<div dojoAttachPoint="widgetTab" dojoType="dijit.layout.TabContainer"' + 'style="width:100%;height:100%" >' +
'<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">hello</div></div></div>' +
'...' //Rest Of template declaration
//Since we are embedding widget inside template we need _WidgetsInTemplateMixin
dojo.declare("MyWidget", [dijit._Widget, dijit._TemplatedMixin,dijit._WidgetsInTemplateMixin], {
templateString: widgetTemplate,
.... //Rest of functions
resize: function(){
this.containerNode.widgetTab.resize() //Resize tabcontainer
}
});
Hope this helps
Try to add attribute to your TabContainer:
<div dojoType="dijit.layout.TabContainer" controllerWidget="dijit.layout.TabController" ... >
http://bugs.dojotoolkit.org/ticket/10113#comment:11
Just rewrite your css like this:
div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
height: 30px !important;
}
#-moz-document url-prefix() {
div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
height: 31px !important;
}
}
If you want to remove the first one : "useMenu : false"
If you want to remove the second and the third : "useSlider : false"