I use the Html.EditorForModel() in a view to generate fields for the edit form. I also have another partial class where I specify some Data Annotation attributes for some fields (like DisplayName, Range etc).
When I run the application I have HTML inputs generated for each field. How can I specify the width of this generated inputs ?
Something like this:
<input id="nameTextBox" style="width:220px" name="theName" />
#Gerrie's solution works, but it applies to all inputs on the page. If you have other inputs on the page that you don't want to style this way, then you can do something like this:
<div id="model-editor">
<%: Html.EditorForModel() %>
</div>
And then use CSS of this form:
#model-editor input { width:220px; }
EDIT
If you want to set CSS rules for individual fields, you can do so too. Inspect the generated HTML and find the input's id, then do:
input[id='YourInputId'] { width:400px; }
use CSS:
input
{
width: 220px;
}
This way you don't have to bother about inserting these style attributes into the generated controls.
Related
The bootstrap validator plugin helps validating the form fields providing a bunch of cool features. One of those features are the feedback icons, which defaults to glyphicon.
Suppose I want to replace glyphicon with font awesome.
The documentation says they can be changed by passing a "feedback" JSON object as data attribute or via JavaScript.
Via JavaScript it's easy. But as data attribute, it is unclear where and how exactly add it, because simply adding:
feedback: {
success: 'fa-check',
error: 'fa-times'
}
as data attribute to the <form> or the <div class="form-group"> or the <input> itself it doesn't work.
After some time struggling with it, I realized that the JSON feedback object should be added to the element and also it needs to be added using this syntax (which was not specified in the docs):
<form ... data-feedback='{"success": "fa-check", "error": "fa-times"}'>
Note the quotes syntax.
Also, if we are not just changing the glyphicon but replacing it with a font-awesome one (like in my example), in the <div class="form-group"> we need to replace:
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
with:
<span class="fa form-control-feedback" aria-hidden="true"></span>
This is not very well documented, and I could not make it work. I ended up using a different form validator which accomplish the same functionality and it's easier to configure success/error formats using bootstrap classes:
var validator = $('#submitForm').validate({
validClass: "is-valid",
errorClass: "is-invalid",
jQuery Validator
I want to create twitter bootstrap compliant form. According to the docs for Twitter Bootstrap v2.2.2 (the version included with web2py) the html should look like:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
...
I'm currently using SQLFORM which outputs html that doesn't really fit with this (even using formstyle='divs'). Besides I want my html output to be clean without web2py artifacts such as class="w2p_fl". So my thought is to use a custom form. However in doing this there would be a lot of repeated code. That is, the following would basically need to be repeated for each field.
{{=form.custom.begin}}
<div class="control-group">
{{=LABEL(form.custom.label['myfield'], _class='control-label',
_for='mytable_myfield')}}
<div class="controls">{{=form.custom.widget.myfield}}</div>
</div>
...
{{=form.custom.end}}
So how can I repeat the above unit of code so I could replace it with something like {{=bootstrap_field(db.mytable.myfield)}} or some other way to adhere to DRY?
What is the web2py way to do this? Create a view function? Pass a function in the dictionary returned by the controller? Create my own html helper? Create my own widget? Another way?
If you're using Bootstrap 2, you can just do:
form = SQLFORM(..., formstyle='bootstrap')
For Bootstrap 3 (or any other custom formstyle you'd like to create), the formstyle argument can be a function (or other callable) that produces the form DOM. The function will be passed the form and a fields object, which is a list of tuples, with each tuple containing a CSS id, label, input element, and (possibly empty) comment/help text. To get an idea of what such a function should look like, check out the one used for Bootstrap 2 forms.
I used zf2 to design a website.
And the form is something like this:
$this->add(array
'options'=>array(
'label'=> 'title1'))
And finally it shows like this:
<form>
<fieldset>
<legend>title1</legend>
<label>****</label>
</fielset>
</form>
Now, I wanna add a link or an image after the title1, for example:
<form>
<fieldset>
<legend>title1<a href=''>link</a></legend>
<label>****</label>
</fielset>
</form>
How can I do this?
You can't. Well, at least not without overwriting the specific ViewHelper (probably formCollection()). In ZF2 all Labels are run through the Zend\View\Helper\EscapeHtml ViewHelper. Therefore using any sort of HTML inside Labels is not supported in any way.
While going by specification it may be allowed to use inline-elements inside the <legend> Element, semantically it looks a little different. The <legend> shall do nothing but to describe the contents of the <fieldset>.
Anyways, opinions aside, as i've mentioned, you'll have to overwrite the ViewHelper and then skip the use of the EscapeHtml ViewHelper, as it's done in this line of the formCollection() Code
My class attribute has two CSS class values. The HTML starts out like this:
<input type="button" wicket:id="rowButton" class="jelly-button greenGradient"/>
And I want to dynamically change it to this:
<input type="button" wicket:id="rowButton" class="jelly-button redGradient"/>
Currently I am doing this:
component.add(new SimpleAttributeModifier("class", "jelly-button redGradient"));
What is the best way to do this in Wicket? There must be a more 'proper' way to do this than what I have done above.
Instead of using an attribute modifier with fixed text you could use an attribute appender with the text retrieved from a model. To change the class, just change the model's value. For example:
Model<String> gradientModel = new Model<String>("greenGradient");
...
component.add(AttributeModifier.append("class", gradientModel));
in the markup just have
<input type="button" wicket:id="rowButton" class="jelly-button"/>
Then when it is time to change the gradient use
gradientModel.setObject("redGradient");
or
gradientModel.setObject("greenGradient");
The example in the javadoc below explains it well
http://www.jarvana.com/jarvana/view/org/apache/wicket/wicket-core/1.5.2/wicket-core-1.5.2-javadoc.jar!/org/apache/wicket/behavior/AttributeAppender.html
im pretty new to jQuery, and i dont know how to do that, and if it can be done without editing manually the plugin.
Assume to have a simply form like that:
<form action="page.php" method="post">
Name: <input type="text" name="Your name" id="contact-name" value="" />
Email: <input type="text" name="Your email" id="contact-email" value="" />
</form>
When you submit it, both in 'standard' way or with ajaxSubmit(), the values of the request take the label of the field name, so in the page.php i'll have:
$_POST['Your name'];
$_POST['Your email'];
Instead i'll like to label the submitted values with the id of the field:
$_POST['contact-name'];
$_POST['contact-email'];
Is there a way to do that with jquery and the ajaxsubmit() plugin?
And, maybe, there is a way to do it even with the normal usage of a form?
p.s: yes, i know, i could set the name and id attributes of the field both as 'contact-name', but how does two attributes that contain the same value be usefull?
According to the HTML spec, the browser should submit the name attribute, which does not need to be unique across elements.
Some server-side languages, such as Rails and PHP, take multiple elements with certain identical names and serialize them into data structures. For instance:
<input type="text" name="address[]" />
<input type="text" name="address[]" />
If the user types in 1 Infinite Loop in the first box and Suite 45 in the second box, PHP and Rails will show ["1 Infinite Loop", "Suite 45"] as the contents of the address parameter.
This is all related to the name attribute. On the other hand, the id attribute is designed to uniquely represent an element on the page. It can be referenced using CSS using #myId and in raw JavaScript using document.getElementById. Because it is unique, looking it up in JavaScript is very fast. In practice, you would use jQuery or another library, which would hide these details from you.
It is reasonably common for people to use the same attribute value for id and name, but the only one you need to care about for form submission is name. The jQuery Form Plugin emulates browser behavior extremely closely, so the same would apply to ajaxSubmit.
It's the way forms work in HTML.
Besides, Id's won't work for checkboxes and radio buttons, because you'll probably have several controls with the same name (but a different value), while an HTML element's id attribute has to be unique in your document.
If you really wanted, you could create a preprocessor javascript function that sets every form element's name to the id value, but that wouldn't be very smart IMHO.
var name = $("#contact-name").val();
var email = $("#contact-email").val();
$.post("page.php", { contact-name: name, contact-email: email } );
This will let you post the form with custom attributes.