ckeditor + hide & show of contenteditable + unable to edit - webkit

crosspost:
http://ckeditor.com/forums/Support/inline-editor-div-contenteditable-when-loaded-hidden-doesnt-work.
when you try to attach ckeditor to hidden contenteditable and then make it visible the ckeditor is disabled & the div is contenteditable=false
adding below css did not help much
-webkit-user-modify: read-write;
any suggestions?

Could you show what you already tried? If contenteditable=false then editor is in readonly mode. Change the value of this attribute and editor will be editable if it can be initialised on hidden elements (I'm not sure about that).
If it cannot be initialised on hidden container - initialise it after showing it and destroy before hiding it. But again - contenteditable needs to be set to true.

Related

How to align dropdown under parent control and set width as per parent control in bootstrap?

I tried to add dropdown-menu-left class but still it displayed outside the control area.
I want to show that dropdownlist under txtbox and button control, and also width as per
above control. How to do that?
Here is a demo link DEMO
I guess you misunderstood dropdown-menu-right for dropdown-menu-left. Replace dropdown-menu-left with dropdown-menu-right. As for the width, you could manually set it to a fixed value (using CSS) or you could use javascript / jquery to resize it dynamically.
Using CSS: https://jsfiddle.net/7w9wkr64/
Using JQuery: https://jsfiddle.net/Lyrzt8tu/

Programmatically remove splitter from a Dojo tabContainer

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.

Struts 1.2 : How to disable onDrag and onDrop option in html:text element

I am working with a legacy application in which we have used Strtus1.2.
Now I want to make a change in the UI. I want to disable Drag and Drop option on a text box.
Note that : HTML text box has attributes line onDrag and onDrop.
But here we have used Struts Tag Library and in that TLD file, there is no declaration for
onDrag and onDrop option. It gives exception when I use those attributes.
It says "Attribute onDrop invalid for tag text according to TLD"
Can anyone suggest me what is the best way to solve this problem.
Here I can use simple HTML text but for that I need to change Struts action class as well.
Can I change the TLD file ?
Do struts provides TLD file updation as per the new HTML standards ?
Regards,
Gunjan Shah.
I changed the html:text tag to simple HTML tag. There are built in HTML support for disabling onDrag and onDrop.
You can use the attributes ondrag = false and ondrop = false to disable drag and droop in browser elements.
<input type="text" name="card" id="idCard" onkeypress="timeMsg(event);" maxlength="18" onmousedown="return noCopyMouse(event);"
onkeydown="return nocopypaste(event)" ondrag="return false" ondrop="return false"/>
If you dont want to change struts action class then you can create a duplicate copy of the element with simple HTML tag and reset the value in original tag while submitting the form.
Regards,
Gunjan.

Click DIV doesn't make a “real” click operation in IE

Browser: Internet Explorer 8 with compatibility view turned on (the tested application was written for IE7). I have a div element, which looks like a checkbox in the browser. When I manually click it the checkbox ticks itself. Here is how this looks like: http://img593.imageshack.us/g/divunchecked.jpg/ When clicked manually the div element also changes it's class attribute from "x-grid3-check-col" to "x-grid3-check-col-on". When I run a Watin test and make a Div.Click() operation the element doesn't check itself. Html of that element:
<DIV class=x-grid3-check-col onclick=booleanInterviewColumnRender_OnClick(this);> </DIV>
I have tried to:
- click 2 of the div's parents (it is placed in 2 other divs)
- Div.MouseDown();
Div.MouseUp();
- Div.Firevent("onclick");
- NameValueCollection eventProperties = new NameValueCollection();
eventProperties.Add("button", "0");
Div.FireEvent("onmousedown", eventProperties); //left mouse click
- Div.SetAttributeValue("class", "x-grid3-check-col-on");
Div.Refresh();
without luck.
Any ideas how to workaround this would be great.
The last workaround is to run directly the javascript call.
if you put an id on your div element: elementID
then you call
div.Document.Eval("document.getElementById(\"elementID\").fireEvent(\"onclick\")");
And it will call the onclick call back you put in your attribute (you can first try in the console to be sure that the javascript call your callback).
However, I think that the WatiN mehod .FireEvent on the Element does the same thing, so I don't understand why you need this workaround.

dijit.Menu to be displayed after DOM had been set up

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
});