I have a Kendo Editor defined as below:
#(Html.Kendo().Editor()
.Name("myEditor")
.Tag("div")
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough()
.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
.CreateLink().Unlink()
.InsertImage()
.TableEditing()
.FontColor().BackColor()
)
.Value(#<text><p>Some content here</p></text>)
)
When I run my code, a horizontal scrollbar appears at the bottom of the editor.
I want to remove the horizontal scrollbar. How can I achieve that?
Thanks!
I got an answer to my own question. Adding class = "container-fluid" to my div helped.
Thanks!
Related
In my application we have a RadGrid on which we can double click and have a row in the editable mode in the table. There are bunch of controls in the row and one of the column has checkbox and other has few links ( tag) when I jump from one control to other by tabbing.. the other controls like text and combo gets the focus... however the check box and links despite havig the focus do not show the Focus Ring around it
This code works perfectly in Chrome where as not in IE8.
Anyone has any suggestions or pointers.
Kind regards,
Prashant
Finally after lots of trial and error I figured out the issue is with the positioning of the control in the telerik grid. When I added the CSS "position : absolute" to control it started to work.
Simple question : how can I make the inline CKEditor toolbar float top right (or bottom right) of my editable element instead of the default top left position ?
Have been googling it but no luck so far :(
Thank you
It does not have a configuration option for this. There are only four options for the X,Y offset in pinned and docked modes - e.g. config.floatSpacePinnedOffsetY.
The only idea that I have is implementing your own plugin like Floating Space, or modifying the current implementation.
And as the last resort, you can use the Shared Space plugin to place the toolbar in a container chosen by you and then position it as you wish. Check the second demo (Inline Editor with Shared Toolbar and Bottom Bar) on the SDK sample page for an example.
we can do it with floatSpacePreferRight config
only we need to set
config.floatSpacePreferRight = true;
default value of floatSpacePreferRight is false;
so with this configuration, we can align inline toolbar position to right
I have a long text in a gas TextArea and I want to scroll a line of text into view. I tried several solutions (setCursorPos, setSelectionRange), but the text is always displayed at the top; i.e. it never scrolls down to the position I want...
I did notice that the doc says: "This will only work when the TextArea is attached to the document and not hidden.". That shouldn't really apply in my case (I want the app to pop up at the specific position...), but I tried to set it before and after the app is displayed.
Here is the code.
....
var cursorPos=15;//just a test...
var fileString = "a very long text that I'm not putting in here....";
var mytextArea=myapp.createTextArea().setValue(fileString).setSize("100%","100%").setName("TextArea").setId("TextArea");
myapp.add(mytextArea.setCursorPos(cursorPos));
var doc=SpreadsheetApp.getActive();
doc.show(myapp);
myapp.getElementById("TextArea").setFocus().setCursorPos(cursorPos);
I must be doing something obviously wrong. Any suggestions?
Issue is here: http://code.google.com/p/google-apps-script-issues/issues/detail?id=1635
The issue response was: "Unfortunately this is a limitation of the underlying GWT technology" :( So no fix any time soon... : i.e setCursorPos(cursorPos) does nothing...
Have you tried wrapping the text area in a scroll panel and setting the position of the scroll panel?
As visible in the image, i have a "Hide" button. On click of the Hide button i want the left panel to be hidden and the right panel to cover 100% of the screen. On doing so, the "hide" button will change to show where the panel comes back to its original position.
For doing the same
xtype:'toolbar',
docked:'top',
items:[
{
cls:'hide',
xtype:'button',
text:"Hide",
iconMask:true,
ui:'back',
id:'hide',
handler:function () {
var viewWidth = Ext.Viewport.getWindowWidth();
alert(viewWidth);
desiredWidth = Math.min(viewWidth, 400) - 10;
Ext.fly('protocol').setStyle('width', desiredWidth); ;
}
},
I tried the above code to change the width of the panel dynamically but Ext.fly doesn seem to work.
What could be the solution to this?
Any help is appreciated.
A highlight of the left panel will be appreciated.
However, just looking at your image and I am making an assumption here.
If all you want to hide is the left panel containing the following
Then perhaps, what you can do is to do a jQuery toggle after declaring the LEFT and RIGHT panels within a "DIV" html
tag for example. See link below.
jQuery API for toggle
Also, if you're using a Javascript library or tool to build this, then you might want to get the source of the Javascript and dive into that.
From my experience, it is a lot easier to write a Javascript function on your own rather than to use something ready built.
Ext.getCmp('workItemPanel').hide();
worked well for me.
I'm working on a Firefox extension, and I have created a multiline text box. When the user presses a button, I add text to the textbox by using (Javascript) TextBoxElement.value += "More Text";
The problem with this code, is that whenever more text is added, the textbox scrolls all the way to the top. With much testing, I haven't figured out how to make it scroll all the way to the bottom again. For some reason the scrollTop property is always 0, and setting it doesn't effect the scroll bar.
Is there any ways I can set the scroll bar back to the bottom of the text box?
My extension's purpose is to embed a small chat box. I'm using a textbox to store the chat history. Maybe using a textbox isn't the most efficient way, so any other suggestions would be great as well.
Someone on Chatzilla helped me out on this one. Thank You!
Anyway, here is the solution:
var TextBoxElement = <TextBoxElement>;
var ti = document.getAnonymousNodes(TextBoxElement)[0].childNodes[0];
ti.scrollTop=ti.scrollHeight;
The another solution is to move caret to the end of textbox content. Caret is controlled with selectionStart and selectionEnd properties (which can be set or get).
Here is the sample code:
var TextBoxElement = document.getElementById("myTextboxId");
var pos = TextBoxElement.value.length;
TextBoxElement.selectionStart = pos;
TextBoxElement.selectionEnd = pos;