I'm building translation for my application, but I cannot figure out how to translate the default captions for form fields.
Specifically the file_form tag. The default is to produce a button with the caption 'Choose file' and a note to the side stating 'No file chosen'
Where in the yml do these translations exist?
Unfortunately, <input type="file"> and how it appears to the user is up to the browser, and it's not possible to chance all too much of it.
You can find several articles about styling them to look a bit different, but the text on the button itself and the note depends on the language of the browser the user are running, and you cannot change it (at least nothing I can find)
you better use bootstrap file upload. The code below is for my application and its multilanguage
= transloadit :image_resize
-6.times do |index|
.fileupload.fileupload-new.pull-left{style: "padding-right: 5px;", "data-provides" => "fileupload" }
.fileupload-new.thumbnail{:style => "width: 130px; height: 130px;"}
-if #provider.provider_images.present?
- if #provider.provider_images["provider_image#{index+1}"].present?
%img{:id=>"providerimage1", :src => #provider.provider_images["provider_image#{index+1}"][0]}/
.fileupload-preview.fileupload-exists.thumbnail{:style => "width: 130px; height: 130px;"}
%div
%span.btn.btn-file
%span.fileupload-new{:id => "selectbutton"}
-if index == 0
=t('select_profile_image')
-else
=t('select_image')
%span.fileupload-exists
-if index == 0
=t('select_profile_image')
-else
=t('select_image')
=file_field_tag "provider_image#{index+1}"
Related
I'm using yiibooster and it is really good extension for the frontend, my issues now is that I want to remove the red * that is rendered in the required fields but maintaining the required validator in the model, anyone knows how to do this????
thankss
This is an example of a label generated by a required field validator:
<label for="User_email" class="required">
Email Address <span class="required">*</span>
</label>
Therefore, you can hide it by adding this class to your site's CSS:
span.required {
display: none;
}
If you want to achieve what you want easily, I suggest you to do like below, which is simplest way(in my view point):
Just try to find * selector(the ID or CLASS) name.(using a firebug or any inspector)
Then just do like below in your document.ready():
$(SELECTOR).remove();
NOTES
THE * MIGHT BE CREATED DYNAMICALLY
THIS IS JUST AN SUGGESTION, YOU CAN FIND ANY OTHER POSSIBLE WAYS SUCH AS CHANGING THE CSS CLASS IN ORDER TO DO DISPLAY:NONE OR SOURCE MODIFICATION
<?php echo $form->textFieldGroup($model, 'username',array('label'=>Yii::t('model','Username'))); ?>
or edit line 1223 of TbActiveForm.php from
echo $this->labelEx($model, $attribute, $options['labelOptions']);
to
echo $this->label($model, $attribute, $options['labelOptions']);
Red * is adding according to your validators definition in your model. you have two options.
First in your model add On => 'scenario name' for required validator for the property you want. so you can control the behavior of yii-booster components because they only apply those rules which matches the scenario of the model. for example:
array('password_repeat', 'required', 'on'=>'register'),
It will show Red * only in register scenario (if you set it via $model->setScenario('register');) and in normal times no red * will shown.
Another option for you is when you are creating the form element based on the property marked required by validator rules in model, you can prevent that * from showing but this way will not ignore that validation rule and if you try to submit the form while this form field is empty you will get error from yii (because you just solve showing but in background you have your required validator). for this method, you only need to provide label in your yii-booster form element:
<?php echo $form->textFieldGroup($model,'textField',
array(
'wrapperHtmlOptions' => array(
'class' => 'col-sm-5',
),
'hint' => 'In addition to freeform text, any HTML5 text-based input appears like so.',
>>>>> 'label' => 'Your new value for label which will have no red *',
)
); ?>
I am developing an application using MVC4 and handling the clienside validation using jquery.validate.unobtrusive.
I am simply using model validation and the following
<label for="fname">Name</label>
#Html.TextBoxFor(m => m.Name, new { id = "Name", #maxlength = "16", aria_describedby = "validationName" })
#Html.ValidationMessageFor(m => m.Name, string.Empty, new { id = "validationName" })
When I run the code, it renders the validation message with tags like
<span id="validationName" class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="Name">
<span class="" for="fname" generated="true">Your name is required.</span>
For the CSS purpose, I need to change the span id="validationName" to
p id="validationName"
I think the span tag is coming from framework or something since I can't find span tag anywhere in my code beside the validation js file.
I see "options:errorClass:"input-validation-error",errorElement:"span"" in unobtrusive.js file but changing that span to p changes the second span class="" to p class="" without effecting the first span.
The reason I am looking for p tags is that span tags are best for inline styles; p tags style error message blocks as “block-level elements” which drops them down a line rather than making them wrap. Also, p tags would read describe error messages as “paragraphs” rather than hanging text with no meaning
Any suggestion would be really appreciated.
I have a passwordfor with a required field validation. placeholder attribute doesnt work in IE and instead, validation is fired for the watermark text which is displayed as special characters.
I came across lot of suggestions like here
Placeholders in IE and
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html that work for all textboxes except for password.Any help is highly appreciated.
I've seen the same behavior. Extremely frustrating stuff. I tried overriding the default template by adding a ~/Views/Shared/EditorTemplates/Password.cshtml template that looked like this:
#Html.Password("",
ViewData.TemplateInfo.FormattedModelValue,
new {
#class = "text-box single-line password",
placeholder = ViewData.ModelMetadata.Watermark})
The above worked when I did it for a String type (~/Views/Shared/EditorTemplates/Password.cshtml) but not for password. So I downloaded the source for MVC4 and took a look. The only thing I could see that would make the password field behave in a manner different from the input (TextBoxFor) field is that the format data is passed as a null into the underlying HTML generation code (see System.Web.Mvc.Html.InputExtensions, line 233, PasswordHelper function). But that's just a guess. I could never get the unit tests running to verify that assumption.
Until I find a solution, my workaround was to change my Razor code from this:
#Html.PasswordFor(model => model.Password)
To this:
#Html.PasswordFor(model => model.Password, new { placeholder = "Password" })
That made the desired watermark appear for me. It's a kludge but what do you do?
Josh - You are on the right track.
Instead of
#Html.PasswordFor(model => model.Password)
Use
#Html.EditorFor(model => model.Password)
I am having trouble trying to get rid of the extra line breaks Rails seems to insert between fields with errors.
I created a new rails app, created a scaffolding called "users" with a name and an age, and then said validates :name, :presence => true and validates :age, :presence => true. Then I booted up the users/new page and just clicked "submit" without entering anything in the fields to generate the error page. What happened was that between the "name" label and the field for entering the name, an extra line break was inserted. Same with the "age" label and its field. How do I stop this extra line break from happening?
Ach, just got bitten by this one too.
When you have form fields with errors rails changes the output of form helper methods like #label and #text_field.
The result is your nice little "label" and "input" tags are still being emitted - just "stealth" wrapped with a surrounding div. For example:
f.label :name
goes from:
<label for="name">Name</label>
to:
<div class="field_with_errors"><label for="name">Name</label></div>
The default behavior of a div is "block" - which is causing your line breaks.
You can fix this by changing the css. As an example:
div.field_with_errors {
display: inline;
}
.field_with_errors:nth-child(odd) {
padding: 2px;
display: table;
}
.field_with_errors:nth-child(even) {
padding: 2px;
display: inline;
}
That's what I ended up changing mine to, since the extra line breaks were sort of nice on the labels but I didn't want the line breaks on the actual form fields.
i have the following code:
<td><%= link_to(image_tag("delete.gif", :size => "16x16", :alt => "Delete Entry"), phone, :confirm => 'Are you sure?', :method => :delete, :remote=>true, :class=>'delete_phone') %></td>
in my view. Now, it all works fine and does what I need it to, but when I hover over the icon, well, it doesn't show me any text. I've tried in Firefox and Chrome.
Has anyone else come across the same issue?
Thanks!
#protip - it can be a painful (and very un-DRY) exercise to add titles for all your images. To make this a lot less painful all my apps ship with this JS (require jquery):
$(function() {
$('img').each( function() {
var o = $(this);
if( ! o.attr('title') && o.attr('alt') ) o.attr('title', o.attr('alt') );
});
});
This sets the title of any img without a title to the value of it's alt attribute.
Use title, not alt, and your problems will be solved! Alt is for accessibility - it means "alternate". Title is what you'd use for a tooltip.
On hover image title text is shown in tooltip.
Alt text is for users with disabled images (or slow connection) and search engines
I have no idea about Ruby, but you need to use the title attribute in HTML to get the rollover text appearing in most browsers.. Does that help at all?
eg
<img title="hello thar" src="hellothar.gif" />
Use title option to display text in rails 3.
<%= image_tag 'Profile.png',:title => 'Profile' %>
When mouse hover over the Profile.png, it will show the text Profile.