I tried to do a layout using dijit in dojo (1.7.2), but the result did not looks like the way I intended.
My first attempted is trying a declarative style from some example (here http://pastebin.com/Uy0pFmn3), which worked fine. Then I tried to convert it to programatic style (here http://pastebin.com/qRWUQsQN ), but it only showed the layout that created last.
Did I do misunderstanding how the dijit's layout works or just some minimal overlook here ?
thanks
You must add CSS styles:
html, body {
height: 100%;
width: 100%;
}
and for BorderContainer:
style="height:100%; width:100%"
EDIT: ok I got it. I guess I cannot use new ContentPane but instead, new dijit.layout.ContentPane (So here the finalize version http://pastebin.com/eYfeQUd8). The weird, "show only last layout" cause by my weird CSS stuff.
One thing that puzzled me is that why new ContentPane did not work ? As far as I recall, some example did like this
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane"], function(BorderContainer) {new BorderContainer //STUFF//}
I see the problem here..
In your pastebin code you are missing do declare the function paramter like the below example...
Your modified code:
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane"], function(BorderContainer, TabContainer, ContentPane ) {
var appLayout = new BorderContainer({"design": "headline"}, 'appLayout');
Also the order of the require paramters should match inside the function parameters also ..
Waseem Ahmed V
Related
I would like to change the style of the clear input icon, but can not change it.
<a-input placeholder="Basic usage" allowClear />
In my css, I use the classname ant-input-suffix and write
.ant-input-suffix{
background-color: #ffa;
}
Classname ant-input-clear-icon doesn't work either.
What can I do to change it?
What you are running to is probably a specificity (what is specificity in css) problem.
To fix your problem (if it is specificity) you can do:
span.ant-input-suffix {
background-color: #ffa;
}
To better target your elements we would need to see more HTML before giving a concrete answer
in ckeditor5 by cdn to include ckeditor.js
I would like to change entermode that instead of ?
is it possible?
Thanks
If you wnat to use <BR> as change line code in CKeditor 5, then just use "Shift+Enter" can make it happen.
Here is the code if you still want to make <P> display likes <BR> one's:
p {
margin: 0;
}
Seriously, I got same problem like your's......then I found Shift+Enter.
You could handle the enter event and make it trigger shiftEnter instead.
editor.editing.view.document.on(
'enter',
( evt, data ) => {
editor.execute('shiftEnter');
//Cancel existing event
data.preventDefault();
evt.stop();
}, {priority: 'high' });
source: https://github.com/ckeditor/ckeditor5/issues/1141#issuecomment-403403526
What I did in PHP is the following:
$replaceClosingTag = str_replace('</p>', '<br>', $_POST['message']);
$emailMessageText = str_replace('<p>', '', $replaceClosingTag);
I replaced the closing tag with a <br> and the opening tag with an empty space.
It is dirty but it worked for me. Probally with javascript you can do something similar.
And for the editor margin style I used this:
.ck.ck-editor__editable_inline p {
margin-bottom: 0;
}
Because I use a CDN and this overrides that class.
The question is 2 years old but hopefully this helps for someone in the future.
For anyone using Vue looking to achieve this, adding Ramast's solution as a plugin to editorConfig worked for me (following the instructions here: https://github.com/ckeditor/ckeditor5-vue/issues/58)
I'm using the dojo mobile scrollable view.
The view scrolls,, but when I release it, the view goes back to top and I can not know why.
Here is an extract of my code :
var node = domConstruct.create("div", {
id: "dtm-dialog-summary-scrollableView",
style: "padding-top: 40px;"
});
var refNode2 = dom.byId("dtm-dialog-summary");
domConstruct.place(node, refNode2);
var view = new dojox.mobile.ScrollableView(null, "dtm-dialog-summary-scrollableView");
view.startup();
//add a component (and many others in the scrollable view)
var divDetailledPlot1 = domConstruct.create("div", {
"class":"div-detailled-plot",
"id":"detailled-display-1"
}, view.containerNode);
Thanks for your help
I've put here:
http://jsfiddle.net/adrian_vasiliu/yjuWz/2/
a modified variant of your code which works for me.
Although I don't think this can have caused the trouble you describe, I removed the padding-top that you set on the ScrollableView, because this (unfortunately) forbids the scrolling to go completely to the bottom. I think this limitation will be removed in Dojo 2. Instead, as you can see in the jsfidle, I have put inside the ScrollableView an intermediate div with the needed padding-top:
var divDetailledPlot1Top = domConstruct.create("div", {
...
style: "padding-top: 40px;"
}, view.containerNode);
If it still does not work for you, please tell the Dojo and browser/OS version, and provide a runnable sample to reproduce.
Edit: alternatively, just style the padding directly on the containerNode of the ScrollableView:
.mblScrollableViewContainer {
padding-top: 40px;
}
This is implemented in http://jsfiddle.net/adrian_vasiliu/yjuWz/3/.
I have an dojo enhanced grid inside a title pane which inturn in Tabcontainer. I am creating a tab container dynamically and painting the title pane which contains grid. For the first time the grid is painted properly but if i close the tab and again try it to open a tabcontainer title pane is painted but grid inside the titlepane is not painted (or rather its not visible) until i do a browser resize.
So anybody have faced similar kind of issue? Please let me know the solution for this.
I tried resize(), update() & startup() methods on grid nothing worked out.
I am kind of stuck please share your thoughts on this.
Thanks,
Vikram
I had the same problem and found a workaround by doing a dojo connect like:
dojo.connect(Datagrid,"_onFetchComplete",DataGrid,"_resize");
So it should automatically be resized, when DataGrid finished loading data.
Hope I could help.
Greeting, Simon
Have you tried setting an absolute height on the Grid?
Which browsers did you try? (I experienced various problems with DataGrid in TabCointainer using IE)
You must call the TabContainer.layout() each time its container is changing size. For doing this, you could 1) monitor DOMEvents onunderflow and onoverflow on containing DOMNode or 2) when container becomes visible (once-n-forall).
Reason why a window.onresize event fixes it is, that the TabContainer hooks on said event and calls its own layout.
In your situation, where the TabController fiddles with TabContainer's panes, there may be missing a 'layoutChildren' somewhere. Optimally, you should place the grid as the first on only child to tab.
After the grid is deployed, it will take an absolute, calculated height - 'inherited' from the TabContainer. This is fired once the TabContainer chooses to resize or instructed to do so.
Manually, you should be able to implement these lines - after re-opening a tab. The script is taken from _Grid.js to illustrate
var grid = dijit.byId('MYGRIDID');
require(["dijit/layout/utils"], function(layerUtils) {
layoutUtils.layoutChildren(grid.domNode,
grid._contentBox,
[grid.tablist, {
domNode: grid.tablistSpacer,
layoutAlign: titleAlign
}, {
domNode: grid.containerNode,
layoutAlign: "client"
}]);
grid._containerContentBox = layoutUtils.marginBox2contentBox(grid.containerNode,
{
domNode: grid.containerNode,
layoutAlign: "client"
});
// note this line in particular
grid.selectedChildWidget.resize(grid._containerContentBox);
}
My issue
I had a similar situation as yours:
Grid is in a titlepane (closed by default).
Grid can be destroyed and re-created on the fly.
Issue appears when user:
opens the pane.
closes the pane.
re-creates the grid.
re-opens the pane.
grid is not visible, until browser window is resized!
My solution
My approach was to force a resize() on my grid whenever the title pane was being opened.
I used code like this, in a place where I had access to both the grid and the panes:
var titlePane = registry.byId("title-pane-id");
var handle = aspect.after(titlePane, "toggle", function(deferred) {
if (titlePane.open) {
grid.resize();
}
});
The dojo/aspect doc
Don't forget to remove the aspect from your grid if you destroy it.
I did this on dojo v1.8.1
My solution is too easy: define on declaration of grid the bold parameter write here:
grid = new EnhancedGrid({id: 'MyIDgrid',
store: dataStore = new ObjectStore({objectStore: myStore}),
structure: structureGrid,
plugins: pluginGrid,
style : 'width: 725px; height: 350px',
autoWidth : true,
**autoHeight : false,height:'200px',**
elasticView : '2'
}, document.createElement('div'));
this resolve all!
Enjoy!
style="height: auto;" will fit the purpose.
I want to add dijit.Editor after clicking on element.
dojo.ready( function() {
var handle = dojo.connect(dojo.byId("k"),"onclick",
function(){
dojo.byId("k").innerHTML +=
"<div data-dojo-type=\"dijit.Editor\" id=\"editor\" style=\"width:400px;min-height:100px;background-color:white;border-style:solid;border-width:1px\" > </div>";
dojo.disconnect(handle);
}
);
});
In general this code works but dijit.Editor is malformed, one cannot write in it and there are no default plugins. How can I fix this?
Is this for inline editing ? Because if so, you should follow the examples on this page.
Othewise, you should do something like this rather than creating html in javascript.
I believe inlineEditBox is better fit to your need.
Also more generally, you add declarative code, in an onClick, after dojo.ready.
Basically it means that the html is "probably" parsed, then you get dojo.ready, do your connect, when the onClick happens, you add declarative markup in your html code, but you are not calling the parser.
I would recommand using programmatic approach for these kind of cases and keep declarative for templated widgets, or html string you will "parse" calling the parser.
Hope this also helps a little ;)
<script>function(ready, Editor, AlwaysShowToolbar, dom, query){
this.createEditor = function(){
new Editor({
height: '40px',},dom.byId('programmatic2'));autosave:false,
query('#create2').orphan();
}
});
</script>
try this.. u might get a solution..