How do I remove a splitter from a dijit tabContainer programmatically?
I have the layout which includes the tabContainer written decoratively in the mark up like so http://jsfiddle.net/kagant15/4o0sfdzd/
I need a js solution that will allow me to remove the an existing splitter,
I've tried the following:
tabContainer.set({splitter : false});
and despite seeing the value set as false after inspecting the element I can still see and use the splitter in the web browser.
Thanks in advance for any help
I see you are talking about removing the splitter from a child of a BorderContainer. It doesn't matter if the child is a TabContainer or some other widget.
Unfortunately the splitter property is const so it's not as simple as tabContainer.set({splitter : false});.
But I think you can do it by calling myBorderContainer.removeChild(tabContainer), then set tabContainer.splitter to false, and finally myBorderContainer.addChild(tabContainer).
If the layout changes after the removeChild()/addChild() you will need to specify a position to addChild(), or specify layoutPriority on all your BorderContainer children.
Related
I am using the external component v-image-input in Vuetify. For some reason, the component creates this extra padding/margin on the right and bottom side. I have been unable to find any attribute that can change this. Any ideas?
There are some hidden elements in the HTML.
If you go to https://seregpie.github.io/VuetifyImageInput/ and click on 'hide actions' the elements disappear.
So I am struggling to get this simple thing done
I need to read the width of a dom element as soon as my app starts and set it as the width of another element.
Basically its like this I have some Tabs which are nothing but a bunch of div elements. A selected tab will have an underline for which I am using a span to get the underline done. My question is how can I read the width of a particular dom element as soon as the dom loads and then set the width of the another element
I believe the proper approach to that would be to use Flags. In that case, you use JavaScript to read the DOM, parse the information and then send it to the Elm app via Flags:
var app = Elm.Main.init({
node: document.getElementById('elm'),
flags: document.getElementById('my-other-element').offfsetWidth,
});
I have 2 components. I have some checkboxes in first component.It resides in left side of the Web Page like Nav bar. In second component I would like to load some HTML Div element on the basis of those checkbox. Now I can load the divs while clicking on those checkboxes using below code.
mounted () {
EventBus.$on('change',this.formated);
},
But when I am clicking on a new checkboxes the loaded divs of previous checkboxes will not disappear. I can see both output of current and previous checkboxes as like output of .append() of jQuery.
How can I clear/disappear previous HTML outputs ?
You need use jQuery's clear() on the elements innerHTML which you're appending too. A better approach would be to instead of appending content, use a v-for directive and maintain an array in the data property with the content you want visible. That would be leveraging vue's reactivity for its intended purposes and offer a more flexible implementation.
When I use this in Textarea (template String)
`data-dojo-props='intermediateChanges:true' data-dojo-attach-event='onChange : update'`
The onChange event - fires on blur event to Textarea. My requirement is detect the changes once it was made from textarea.
Thanks a lot!
I am not sure how you are creating the Textarea. But, one thing you could try is to make sure the parseOnLoad is set to true or you are using parser.parse();
UPDATE: If the templateString is what you have mentioned in the comments then it wont work. Textarea is a HTML node and not a dijit, so the property intermediateChanges does not apply to it.
Also, dojoAttachPoint and dojoAttachEvent should be data-dojo-attach-point and data-dojo-attach-event. I am surprised that its working for you, may be due to backward compatibility.
The events are case-sensitive for dijits, so you need to make sure it matchs in the template string.
I have working JsBin with TextArea dijit used within a templateString.
https://jsbin.com/cuyigizuji/edit?html,console,output
Hope this was helpful.
I have set up in Javascript my preferred dijit.Menu which is that far so good.
How am I able to display the dijit.Menu directly after the page starts up in the (with it's position) without any mouse interaction?! I have looked in the API so far and don't find the answers. Will I have to "overwrite" a method?
If yes, which one is it? And what do I have todo???
The widget will not show up until it is parsed by dojo.
You should place fake menu markup inside its dom node:
<div dojoType="dijit.Menu">
<h1>This text is shown after the dom is loaded
and until the menu is parsed and renered</h1>
</div>
As soon as menu is ready, everything you've placed inside menu's dom node will be replaced by actual widget's html.
NON-AMD Version:
dojo.ready(function(){
// The code for all items!
})
DOJO-AMD Version, put the parameters of the modules you like to add, in require as well give them a name in the functions parameters list:
require(["dojo/domReady!"],function(){
//natve code
});