I am working on some legacy Struts 1.x applications that use Struts html tags instead of standard html tags. I am trying to modernize the UI without making functional changes.
For example:
The input field is <html:text property="someProperty" styleClass="someCssStyle">
instead of <input type="text" class="someCssStyle">
If I change, <html:text> to <input type="text"> the property binding breaks i.e. the value in input field is not passed to the code.
If I try to apply bootstrap styles to <html:text>, it does not work.
How can I apply Bootstrap styles to legacy struts html tags?
You have add the style(s) to the styleClass attribute.
For example:
<html:text property="propName" name="formName" styleClass="form-control"></html:text>
or
<html:submit styleClass="btn btn-link">submit</html:submit>
Here is a very basic sample app on GitHub that shows this working:
https://github.com/lviviani/sample-struts-bootstrap
Currently there is a bug in Firefox that doesn't let you to copy stuff from disabled textarea (in chrome it works fine) and I've been thinking how can I replace my code so that it works ok in firefox as well. i'm using GSP files but can use normal html tags within them as well.
Here is my code snippet:
<g:textArea rows="5" cols="1" name="description" value="${forecast?.description}" class="description-t-area" disabled="${!canEdit}"/>
And here is image how it looks on the web:
You could use pre tag e.g.
<pre id="description" contenteditable="${!canEdit}">${forecast?.description}</pre>
The issue is that you can not set disabled to true or false, the existence of the attribute means true, eg:
disabled="false" == true
disabled="true" == true
disabled == true
You have two options, use a plain text-area and conditionally print disabled or nothing html tag or set disabled via javascript.
More info here Correct value for disabled attribute
Edit: Just tried this is Grails 3.2.8 and it does actually work correctly now (been a while since I've looked, sorry!)
<g:textArea name="foo" disabled="${false}"/>
results in
<textarea name="foo" id="foo" ></textarea>
and
<g:textArea name="foo" disabled="${true}"/>
results in
<textarea name="foo" id="foo" disabled="true" ></textarea>
How to include the autofocus HTML property into an input using ReactJS component?
I tried it with a React element that contains an input with autofocus
<input className='EI-input' autoFocus='true' tabIndex='0'
name='username' type='text'
ref='inputUser' autoComplete='on'
placeholder='email' />
But when rendering to Static Markup I don't see the autofocus property rendered in the browser (inspecting with devTools in Chrome and FireFox)
const jsx = React.renderToStaticMarkup(<InputWithAutoFocus />);
console.log(jsx); // I don't see the autofocus attribute in the input
I also tried with just autoFocus and autoFocus='on' and autofocus. None of these seem to work.
autoFocus should work, according the ReactJS docs.
This is not supported due to the interpretations of different browsers:
"We" decided not to use it because every browser has their unique interpretation of how it should work, literally all browsers do it differently. Overloading it and rendering it to the markup at the same time seems like a bad idea.
see the full thread here
I am using Spring's form:input as below :
<form:input type="number" .....>
in my jsp but when I check the html that is rendered on the browser it shows like :
type="number" type="text"
i.e., two type attributes are generated in the html.
On the other hand, if I check using inspect element option in the browser, it shows correct - only type="number" as expected.
Edit- My Question: Why am I getting two type attributes in generated html (type="number" type="text") ? How to get it resolved?
Spring form:input tag doesnt have any attribute named type and the type=number used in your code belongs to html5 input tag
Also have a look at HTML Text Input allow only Numeric input
Spring form tld lists the valid attributes of form:input element here
HTML 5
with <!DOCTYPE html> has native solution:
<input type="number">
Beware that it does not behave in standard way in some browsers.
Try input type="number" to see the HTML5 version in action.
See also https://github.com/jonstipe/number-polyfill for transparent support in older browsers.
I know this is old, but i found a solution that works just fine for me.
The spring:input form tag doesnt support the type attribute and there is no such thing as spring:number.
But you can use jquery to add the type="number" attribute to the parsed html.
I used:
$(".selector").attr({
"type" : "number",
});
I was contacted by my client saying that users complaint saying that some fields now show a tooltip with a message "Please Fill out This Field". I couldn't believe what I heard... but the client is right - using latest Chrome version some fields show a browser tooltip with this message even side by side with my validators!
What's the problem? What am I missing?
Thanks.
EDIT:
The HTML generated by my user control is as follows:
<input name="tbMontante" type="text" maxlength="8" size="10" tbMontante" class="Montantetextfield"
FieldName="Montante"
Required="True"
AllowDecimalValues="True"
/>
EDIT:
My doctype is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Should my browser use HTML 5 to parse it?
Are you using the HTML5 required attribute?
That will cause Chrome 10 to display a balloon prompting the user to fill out the field.
https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate
You can disable the validation in the form.
Put novalidate="novalidate" on <form> tag.
<form novalidate="novalidate">
...
</form>
In XHTML, attribute minimization is forbidden, and the novalidate
attribute must be defined as <form novalidate="novalidate">.
http://www.w3schools.com/tags/att_form_novalidate.asp
To stop that Html5 popup/balloon in Web-kit browser use following CSS
::-webkit-validation-bubble-message { display: none; }
As I mentioned in your other question:
The problem to do with that fact, that you invented your own non-standard attributes (which you shouldn't have done in the first place), and now new standardized attributes (or attributes in the process of being standardized) are colliding with them.
The proper solution is to completely remove your invented attributes and replace them with
something sensible, for example classes (class="Montantetextfield fieldname-Montante required allow-decimal-values"), or store them in JavaScript:
var validationData = {
"Montante": {fieldname: "Montante", required: true, allowDecimalValues: true}
}
If the proper solution isn't viable, you'll have to rename them. In that case you should use the prefix data-... because that is reserved by HTML5 for such purposes, and it's less likely to collide with something - but it still could, so you should seriously consider the first solution - even it is more work to change.
You need to add the attribute "formnovalidate" to the control that is triggering the browser validation, e.g.:
<input type="image" id="fblogin" formnovalidate src="/images/facebook_connect.png">
If you have an html form containing one or more fields with "required" attributes, Chrome (on last versions) will validate these fields before submitting the form and, if they are not filled, some tooltips will be shown to the users to help them getting the form submitted (I.e. "please fill out this field").
To avoid this browser built-in validation in forms you can use "novalidate" attribute on your form tag.
This form won't be validated by browser:
<form id="form-id" novalidate>
<input id="input-id" type="text" required>
<input id="submit-button" type="submit">
</form>
In Chrome (v.56 is what I'm using but I AFAIK this applies generally) you can set title=" " (a single space) and the automatic title text will be overridden and nothing displayed. (If you try to make it just an empty string, though, it will treat it as if it isn't set and add that automatic tooltip text you've been getting).
I haven't tested this in other browsers, because I found it whilst making a Google Chrome Extension. I'm sure once I port things to other browsers, though, I'll see if it works in them (if even necessary), too.
Hey, we just did a global find-replace, changing Required=" to jRequired=". Then you just change it in the jquery code as well (jquery_helper.js -> Function ValidateControls). Now our validation continues as before and Chrome leaves us alone! :)