Following code:
let textArea = document.createElement('textarea');
textArea.value = responseTextFromXMLHttpRequest;
$('body').append(textArea);
console.log(textArea.scrollHeight);
Gives me this result in the CONSOLE: 34
But if I don't append the textarea to the body then I get in CONSOLE: 0
Can I make the textarea to update the height without appending it first to the document? Somehow force it?
I am asking because I create 300 textareas which I fill with text and need to know their height to style them. And I am not sure if appending them to the document just to get their height is the best way I can do it. I am afraid that appending them and afterwards removing just to get the height would take up more resources than some other method if it exist.
Related
GWT newbie here. I have found that when I make a TextArea read-only useful features such as dynamic expansion and even word-wrapping stops working. My intention was to move a string from one text area, append it some way to some more strings, and then add this string into my read-only TextArea. I have doing something like this:
// Temporarily enable the field to set the value of the TextArea
logTextArea.setEnabled(true);
String remarks = // my string to add into the box
if (remarks.length() > 0) {
logTextArea.setEnabled.setValue(remarks);
}
// set read-only again
logTextArea.setEnabled.setEnabled(false);
I also have to work out how many lines I now span and explicitly set the height of the box (via setVisibleLines()). I have now found that it does not word-wrap, so I've had to add some more horrible bodge-code to further split up this string.
So I'm writing code to emulate functionality that comes for free on a normal writable TextArea. Has anyone else found this issue after setting a text-field read-only? Is there another widget I could possibly use to display a list of read-only strings that will auto resize and auto wrap for me?
Many thanks for your time,
tom
Text Area is fine for re-sizing and auto word wrap, even you have your text
area as read only.
Tested now by creating a test project for gwt and it is working fine.
Also Word Wrap is the default behavior of Text area if you want to turn it off then you need to explicitly do this "getElement().setAttribute("wrap","off");
I want to validate that user cannot change spinner value manually by typing in text box of spinner.
For example a field sales multiple = x which I fetched from server not fix.
and displays a spinner field with limitation of like bellow
spinner.setMinValue = x
spinner.setIncrement = x
spinner.setValue = x
so user forcefully select a value which is multiple with x. e.g. if x=3 the user have to enter 3,6,9... and so on.
So here my issue is if I type a 2 in spinner field text box. GXT widget accept that value.
Posible solutions:
Is there any predefined properties of spinnerfield that i forget to set it?
Is there any predefined validator for this?
Can I set text box of spinner field read only by css so user cannot focus on text box but still change a value.
If none of above how to achieve manually?
i've searched a bit in the different classes and I don't see either a precise method which would set what you want.
Don't know about one, and even with one, a validator doesn't change the value in the input field, but maybe it's enough for your needs.
You can disable the text input by calling setEditable(boolean) on the spinnerfield (testSpinner.setEditable(false);)
Maybe you could search around the IntegerPropertyEditor, I haven't tried but as long as a new Spinner is like this:
SpinnerField<Integer> testSpinner = new SpinnerField<Integer>(new NumberPropertyEditor.IntegerPropertyEditor());
you can seen that there is another Constructor for IntegerPropertyEditor, which takes a "NumberFormat" param, but there is no NumberFormart() constructor, so I'm not sure about how you create your own one, but that could be an idea (to format numbers in the input to be a multiple of the increment).
The last option would be that Sencha forgot this possibility and that you should report this as a "bug" on the forum ?
Hope to have helped a bit, good luck :).
I am new to gwt and I am trying to check if the dynamic string document id that i am retrieving will will fit on the gwt label or not. Now I am checking for the number of characters and if the number exceeds 15 I am appending ... after 12 characters and displaying the actual id in the tooltip. I need to know how do i achieve this without calculating the number of characters. Please help
The width of a label does not only depend on the string size, but on the font used.
You could write you string in a temporary label attached to the dom and query the size using the method 'getClientWidth' of the element or gwtquery, and remove recursively the last character until you get the appropriate size.
In my opinion the easier way would be to use css and define a fixed width of your label and set the property overflow to hidden, so you see just the chars which fit in the label and you dont have to deal with a different string.
I created a .PDF file using Adobe Acrobat Pro. The file has several text fields. Using iTextSharp, I'm able to populate all the fields and mail out the .PDF.
One thing is bugging me - some of the next will not "fit" in the textbox. In Adobe, if I type more that the allocated height, the scroll bar kicks in - this happens when font size is NOT set to auto and multi-line is allowed.
However, when I attempt to set the following properties:
//qSize is float and set to 15;
//auto size of font is not being set here.
pdfFormFields.SetFieldProperty("notification_desc", "textsize", qSize, null);
// set multiline
pdfFormFields.SetFieldProperty("notification_desc", "setfflags", PdfFormField.FF_MULTILINE, null);
//fill the field
pdfFormFields.SetField("notification_desc", complaintinfo.OWNER_DESC);
However upon compilation and after stamping, the scroll bar does not appear in the final .PDF.
I'm not sure if this is the right thing to do. I'm thinking that perhaps I should create a table and flood it with the the text but the documentation makes little or no reference to scroll bars....
When you flatten a document, you remove all interactivity. Expecting working scroll bars on a flattened form, is similar to expecting working scroll bars on printed paper. That's why you don't get a lot of response to your question: it's kind of absurd.
When you fill out a rectangle with text, all text that doesn't fit will be omitted. That's why some people set the font size to 0. In this case, the font size will be adapted to make the text fit. I don't know if that's an option for you as you clearly state that the font size must be 15 pt.
If you can't change the font size, you shouldn't expect the AcroForm form field to adapt itself to the content. ISO-32000-1 is clear about that: the coordinates of a text field are fixed.
Your only alternative is to take control over how iText should fill the field. I made an example showing how to do this in the context of my book: MovieAds.java/MovieAds.cs. In this example, I ask the field for its coordinates:
AcroFields.FieldPosition f = form.GetFieldPositions(TEXT)[0];
This object gives you the page number f.page and a Rectangle f.position. You can use these variables in combination with ColumnText to add the content exactly the way you want to (and to check if all content has been added).
I hope you understand that:
it's only normal that there are no scroll bars on a flattened form,
the standard way of filling out fields clips content that doesn't fit,
you need to do more programming if you want a custom result.
For more info: please consult "iText in Action - Second Edition".
I have the three following lines and the first two line gets all the images on the document and hides all, but then when I add the third line shows all the images.
What I need its to hide only the images with the attribute alt=minimize and alt=maximize but for some reason hides all the images.
$('img').attr('alt', 'minimize').css("display","none");
$('img').attr('alt', 'maximize').css("display","none");
$('img').attr('alt', 'logo').css("display","inline");
I am using IE7, but it should be compatible with IE6 and IE8.
Any help would be very much appreciated.
Thanks.
I'm thinking you are not using the attr function correctly, might you be looking for the attribute equals selector?:
$('img[alt=minimize]').css("display","none");
What you did with your code was,
Select all images
Change their alt attribute to 'minimize'
Hide them
Select all images
Change their alt attribute to 'maximize'
Hide them
Select all images
Change their alt attribute to 'logo'
Hide them
what you do: you take every img in document and set alt to logo and then set display: inline;.
Note, that attr('alt',string) doesn't filter all images to those with alt=string, but rather sets alt attribute to string on all images.
What you want to use is this:
$('img[alt="minimize"]').css...
$('img[alt="maximize"]').css...
$('img[alt="logo"]').css...
In the call $('img').attr('alt', 'logo').css("display","inline"); the "attr" doesen't filter the set of dom elements You catch with $("img").
If you want to hide everithing but not the image with the attribute 'alt' = 'logo' I think You can:
give it an Id of logo and then calling: $("img").not("#logo").hide()
from the jquery website:
hide():
The matched elements will be hidden
immediately, with no animation. This
is roughly equivalent to calling
.css('display', 'none'), except that
the value of the display property is
saved in jQuery's data cache so that
display can later be restored to its
initial value. If an element has a
display value of inline, then is
hidden and shown, it will once again
be displayed inline.
and
attr( attributeName )
Returns: String
Description: Get the value of an
attribute for the first element in the
set of matched elements.
If instead you want to hide all the maximize and minimize images (both share the "imize" part of the attribute):
$(parentElement).find("img[#attr $= '*imize']").hide()
OP is referring to
http://dev.w3.org/csswg/css3-values/#attr
alt I think is simply a string type, not "logo" whatever that is, that is not a data type.
try that. in fact, you can look up alt in the html5 img
http://www.w3.org/TR/html5/the-img-element.html#the-img-element
http://www.w3.org/TR/html5/the-img-element.html#attr-img-alt
http://www.w3.org/TR/html5/the-img-element.html#alt
(in order of reference clicking, last one is the target)
even if this isn't the exact answer (it should be), it should be a step in the right direction.
I am actually trying myself to figure out how to reference a css property within css with attr() - it's mentioned within the top URL. if I had my druthers, I could be using css calc() along with it, but that's draft. maybe I can get it to work...