I have a site with a textarea that is a very specific size; resizing it could make the user think that they can enter more text into the textarea than is possible (it is limited by rows and columns). Firefox 4 automatically shows a 'resize handle' in the bottom-right of the textbox and as a user I can resize the textarea on the page. Is there any way to disable this?
Thanks.
Use CSS and style it with:
textarea {
resize: none;
}
Sometimes the CSS will not work. I have successfully removed the users ability to resize the textbox by using an inline style. Those are the last ones processed by the browser and have the final say on what style is used.
Related
I've been developing a web-ui for a while and it has become now quite complex. At a certain place I use a <div contenteditable="true"> for editing text, and there is a bug in FireFox, which I cannot trace down:
When there is some text in the div, and I click with my mouse to change cursor position, it doesn't work. The cursor is always in the end of the text. It works fine in other browsers, and you can change cursor in FF using arrow keys.
I tested a simple html page with a single element <div contenteditable="true"> in it in FireFox, and it works fine, but doesn't work on my system. Obviously, there is something that blocks it.
What can be a possible issue?
Thanks!
I had the same issue and finally found that the issue in my case was CSS wise. I had:
-moz-user-select: none;
on a parent element of my contenteditable which caused the problems.
It worked well after I applying:
-moz-user-select: element;
NOTE: depending on which select behavior you want to have, choose the user-select value (https://developer.mozilla.org/en-US/docs/Web/CSS/user-select)
for me it didn't work because on the parent div is a drag & drop implemented. and it effects all input-fields, textareas and div's with contenteditable.
I haven't found a solution for it yet but there is already a Bug Ticket for Firefox with the right hint that draggable makes the problem.
Here is a link to the bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=419808#c4
Here is a way to fix this problem:
Prevent drag event to interfere with input elements in Firefox using HTML5 drag/drop
I'm trying to make an editable control using the HTMLEditor ( I'd like a rich-text pane like Swing's JEditorPane or JTextPane but it seems I need to wait a couple of years for that ). I want to have the user type in text and the control grows to suit. I have tried catching an event when the scroll-bar appears and increasing the size until it disappears but I can't work out how to wait until the JavaFX thread has actually re-sized the control on its parent.
There's probably a better way to do it than that... any ideas? Any ideas how to reduce it if text is removed?
TIA Mike Watts
For the edit control, use a WebView with contenteditable set to true like this example or a customized HTMLEditor.
Interact with it using the Java/JavaScript bridge similar to this editor. You can script the WebView using JQuery. Run a Timeline which polls the edit control's text dimensions using a JQuery dimension query script and adjust the control size appropriately.
[side note: I've added this as an answer even though it is just the details from jewelsea's - I couldn't format the code when replying as a comment].
This is what has worked to a certain extent:
in the html of the WebView component, added a tag <div id='measured'> around all of the text blocks
added a handler to the WebView using setOnKeyPressed and that calls checkHeight()
private int lastOffsetHeight;
private void checkHeight() {
int newHeight = (Integer)webview.getEngine().executeScript(
"document.getElementById(\"measured\").offsetHeight;") + 14;
if (newHeight != lastOffsetHeight) {
lastOffsetHeight = newHeight;
webview.setPrefHeight(newHeight);
}
}
This is not too bad, main problem is that if all of the text is deleted then the WebView component deletes the div. As jewelsea mentioned, JQuery might be a better solution but I'll update this if I ever fix the problem of including the library ;-)
I have a Validator attached to a field. When validation fails, I want the red line to appear in the field, but I do not want the red icon to appear to the right of the field. How can I accomplish this? I don't see this functionality in the documentation. Thanks!
I also posted this on Sencha's forums but they are very slow: http://www.sencha.com/forum/showthread.php?175577-How-can-I-disable-the-TextField-validation-icon&p=718440#post718440
I got the answer from the Sencha forums.
Check out Field.setMessageTarget(String) - you'll want to pass in
"tooltip" (or, to just not draw that icon, anything but "side"). With
that set, it shouldn't even attempt to draw the icon.
http://www.sencha.com/forum/showthread.php?175577-How-can-I-disable-the-TextField-validation-icon&p=718440
What about converting the field in a DOM element, then navigate till the Red icon and apply a style to disable it?
Something like:
((El)passwordField.getElement().getParentElement().getChildNodes().getItem(2)).setStyleAttribute("display", "none");
You could have a CSS style like this :
.x-form-element img {
display: none;
}
or
.x-form-item img {
display: none;
}
All the images in a form element won't be displayed.
dateField.forceInvalid("error message which u want to pass"),.it will automaticaly show an exclamation mark on the right side of the date field
Consider a webpage contains a IFrame, in that IFrame it contains only one
text box and a close button is present outside the IFrame.
According to this scenario,
how to click on the close button by filling in some values in Iframe text box
i.e First thing is to select the Frame using the command selenium.selectFrame("1_frame"); and
enter the text using the command selenium.type("id=name","test");
Problem here is,I need to click on the close button which is present outside the Frame.
What command should I use to click on the close button, present outside the frame?
How should I bring the focus to close button ?
Can any one help me out!
Thanks in advance .
After entering value in text box set focus to main window if close button is not part of IFRAME. You can do this by selectWindow("null") command.
Use Xpath or css path of close button and then perform click(Xpath).
If you are using firefox you can use firebug to get xpath or css path.
If it is not in iframe u can even use click(id or name)
if your IFRAMEs are Static then it can be handled easily.
If dynamic iframe present then You have to work from framework label.
I code this page, a tab with sliding capability : here
I really like the effect, but when you vien a long tab (let say specification), and we go to a smalll one (download) reclicking on a large one force the user to scroll down again...
Is it possible to jquery something that tell the page to stay scroll down at the max after the tab pressed ?
I'm doing something like this with the jQuery UI tabs, you can modify it for whatever layout:
//Tab panel height matching
$(".ui-tabs-panel").each(function() {
if ($(this).height() + 30 > $(this).parents(".subTabsC").height()) {
$(this).parents(".subTabsC").height($(this).height() + 30);
}
});
I have the whole tab content wrapped in a <div class="subTabsC">. The 30 pixels in my case is to account for the tabs and the border, adjust to whatever you need.
Yes. OnLoad you could iterate through all the tabs, find the tallest and set the container's height to that value and remove whatever's doing the smooth resizing.
It means some of the smaller things might look a little lost, but you'd not be resizing the page (which annoys me too).
couldn't you just add "return false" at the end of your function? this would prevent it from "refreshing" the page when you click the anchor link....I could be wrong...I'm just starting to learn jquery and javascript.