I am trying to display water mark for my Html.Editorfor ,
Here is my ViewModel
[Display(Prompt="This is a WaterMark")]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyy}", ApplyFormatInEditMode = true)]
public DateTime Dob { get; set; }
Here is my view
#Html.EditorFor(model => model.Dob)
here is my EditorTemplate String.cshtml at \Views\Shared\EditorTemplates\String.cshtml
#Html.TextBox("",ViewData.TemplateInfo.FormattedModelValue, new { #class="text-box single-line", placeholder = ViewData.ModelMetadata.Watermark })
I tried this by following this thread .But my watermark never showed up ,but why ?
Appreciate your help to resolve this
This code successfully renders the placeholder attribute in the corresponding <input> tag. This is an HTML5 attribute that the browser that you are using must support in order for something to happen. For example if you are using Internet Explorer, it's only in its future 10.0 version that will be added support for this attribute.
There are client scripting solutions such as the jquery watermark plugin that you could use to attach the desired behavior for browsers that do not natively support it yet.
watermarking using Display(Prompt never worked for me. But with this jquery you can show watermark on your text box .Here I am using an image in place of watermark.You need to create an image of the watermark text.
$(document).ready(function () {
/*Watermark for date fields*/
if ($("#dob").val() == "") {
$("#dob").css("background", "#ebebeb url('/Content/images/DateWaterMark.png') no-repeat 1px 0px");
}
$("#dob").focus(function () {
if (watermark == 'MM/DD/YYYY') {
$("#dob").css("background-image", "none");
$("#dob").css("background-color", "#fff");
}
}).blur(function () {
if (this.value == "") {
$("#dob").css("background", "#ebebeb url('/Content/images/DateWaterMark.png') no-repeat 1px 0px");
}
});
$("#dob").change(function () {
if (this.value.length > 0) {
$("#dob").css("background", "#fff");
}
});
}
To answer specifically your question: why the solution in the post you were following didn't work for you:
Reason the solution you linked to didn't work is because you use IE. Try the same code in Chrome - it will show the prompt alright. I hope IE10 will catch up.
Related
While I was working on a Magento 2 version 2.1.12 webshop I encountered a bug in the country picker field on the checkout page. As you can see on the picture below there are two empty options. I was wondering if this is a known bug on this version of Magento and if there is a possible solution?
With kind regards,
Remco Hendriks
For anyone with the same issue, I made a dirty solution with Jquery and CSS. Since my checkout loads dynamically, the class does not exist at first therefore I made an interval check which stops the function when the class loaded exists.
The Jquery
$(document).ready(function(){
if (!$("select[name='country_id']").hasClass("loaded")) {
setInterval(function(){
$i = 0;
$("select[name='country_id'] > option").each(function() {
$("select[name='country_id']").addClass("loaded")
$(this).attr("name", ($i++) + "-option");
});
}, 1000);
}
});
The CSS
option[name="0-option"], option[name="1-option"] {
display:none !important;
}
Thank you Remco Hendriks
I used this solution
if (!$("select[name='country_id']").hasClass("loaded")) {
setInterval(function(){
$("select[name='country_id'] > option").each(function() {
$("select[name='country_id']").addClass("loaded")
if($(this).val()==undefined || $(this).val()==""){
$(this).hide();
}
});
}, 1000);
}
Is there anyway to change the color of the dialog window when using the kendo dialog service?
Currently it defaults to red but I need to customize the window to show a different color based on what is passed.
I tried using a kendo-dialog as my template but it doesn't show the action buttons.
<kendo-dialog title="{{title}}" (close)="Cancel()" [ngClass]="yellow">
</kendo-dialog>
I asked myself that same question a while ago and came up with a solution found in this post : Kendo UI angular DialogService - Change the title bar background color
I'll copy my answer here:
I worked a solution for this. It works but it is not elegant one bit.
Here's the plunker link that demonstrates the code :
http://plnkr.co/edit/MGw4Wt95v9XHp9YAdoMt?p=preview
Here's the related code in the service:
const dialog: DialogRef = this.dialogService.open({
actions: message.actions,
content: MessageComponent,
title: message.title
});
const messageComponent = dialog.content.instance;
messageComponent.message = message;
//I get the dialog element and use jQuery to add classes to override styles.
//Let's say I had the error class as well.
const element = dialog.dialog.location.nativeElement;
$( element ).addClass( 'kendo-override ' + message.classes );
return dialog.result;
And the scss:
$error: #c13;
$success: #0c5;
.kendo-override {
&.error {
kendo-dialog-titlebar {
background-color: $error;
}
}
&.success {
kendo-dialog-titlebar {
background-color: $success;
}
}
}
I'm new to AngularJS and I'm making made a couple of custom Angular directives to do what I used to do with Jquery, however there is one case where I'm not sure if I'm doing it the "the angular way". It works but I think there might be a better way.
I want to do is this for a search box:
When focus is on the search box the app must change the color of the text in the box from grey to black. The app must also then check the current text in the box, if it is the default text then the app must clear the text.
When the box loses focus (blur) the app must change the box's text back to grey. It must then put back the default text only if the text box is empty upon losing focus.
Here is a jsfiddle that has a directive set up to do all of this perfectly.
http://jsfiddle.net/Rick_KLN/5N73M/2/
However I suspect there is an even better way to do it.
It seems like all three those variables in the controller should be unnecessary.
I also seems like having 4 if, else statements is too much and that binding to all the events is overkill seeing as only focus and blur are used and they are specified in the if statements.
Any ideas on optimizing this directive?
The "default text" behavior you are looking for is automatically handled by the HTML5 placeholder attribute. It is supported in just about any modern browser, and can be styled using CSS, as follows:
Markup:
<input id="searchBar" type="text" placeholder="Search" />
CSS:
#searchBar { color: #858585; }
#searchBar:focus { color: #2c2c2c; }
#searchBar:focus::-webkit-input-placeholder { color: transparent; }
#searchBar:focus::-moz-placeholder { color: transparent; }
#searchBar:focus:-moz-placeholder { color: transparent; }
#searchBar:focus:-ms-input-placeholder { color: transparent; }
It's that simple.
Notes:
The pseudo-elements & pseudo-classes (-webkit-input-placeholder, etc) are what hide the placeholder text on focus. Normally it stays until you start typing.
I forked your original jsFiddle. It's not really an AngularJS app anymore:
http://jsfiddle.net/Smudge/RR9me/
For older browsers: You can still use the same code as above, but you could use Modernizr (or something similar) to fall-back to a javascript-only approach if the attribute is not supported.
You can create a custom directive that requires the ng-model directive and then within your directive's link function supply a fourth parameter that is a reference to the model. This will allow you to watch the model for changes and react accordingly. Here is the fiddle:
http://jsfiddle.net/brettlaforge/6t39j/3/
var app = angular.module('app', []);
app.directive('searchbar', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, model) {
var options = scope.$eval(attrs.searchbar);
scope.$watch(attrs.ngModel, function(value) {
// If the input element is currently focused.
if (!elm.is(":focus")) {
// If the input is empty.
if (value === undefined || value === "") {
// Set the input to the default. This will not update the controller's model.
elm.val(options.default);
}
}
});
elm.on('focus', function(event) {
// If the input is equal to the default, replace it with an empty string.
if (elm.val() === options.default) {
elm.val('');
}
});
elm.on('focusout', function(event) {
// If the input is empty, replace it with the default.
if (elm.val() === '') {
elm.val(options.default);
}
});
}
};
});
function FormCtrl($scope) {
$scope.search = "";
}
Hello I need some help with a bug in Internet Explorer 9. I am currently developing some CRUD screens in ASP.NET 4 MVC 3 Razor. In a multiple screen I use the #Html.DropDowListFor to create easy links for Foreign keys.
But when I few these in IE9 (and only IE9) the DropDownList will be rendered smaller than its usual size, the text will be displayed a few pixels lower than normal, and the if the word that is displayed is larger than a small amount of characters(not sure what number, I think it's about 10) it will not be fully rendered. The weird part is that when I click on the DropDownList it will fix itself.
The View code:
#Html.DropDownListFor(model => model.Asset.FkAssetTypeId, new SelectList(Model.AssetTypes, "AssetTypeId", "Name"))
#Html.ValidationMessageFor(model => model.Asset.FkAssetTypeId)
The Model code:
[Display(ResourceType = typeof(I18N_Asset), Name = "Label_Asset_FkAssetTypeId")]
public int FkAssetTypeId { get; set; }
Anybody have any experience with this issue, and know a way to fix this? thank you for the help.
I have found what the problem was, I was using JQuery tabs on the same page. This caused the frontsize of the dropdownlistfor-s to not scale to the css that is set for the whole site. but instead renders the dropdownboxfor with the frontsize of the JQuery tabs and than sets the frontsize to the css.
I have solved this issue by using Javascript to set the font-size in a Document.ready function:
// IE9 causes a bug where the dropdownlists will not be displayed correctly because they won't adapt to their current font-size
// this javascript fixes that by resetting the font-size
if (window.navigator.systemLanguage && (!document.documentMode || document.documentMode === 9)) { //check if IE9 is being used
var list = document.getElementsByTagName('Select'); // get all dropdownlists
for (i = 0; i < list.length; i++) {
list[i].style.fontSize = list[i].style.fontSize; // reset the font-size
}
}
I have a multi-select box populated with some pre-defined list. I want to filter those options as user types in the input box above it.
Can anybody suggest any available jQuery plugin?
Thanks,
Saurabh
var input = $('input'),
select = $('select');
input.keyup(function() {
var inputVal = $(this).val(),
inputLength = inputVal.length;
select.find('option').each(function() {
if ($(this).val().substr(0, inputLength) != inputVal) {
$(this).attr({ disabled: 'disabled' });
} else {
$(this).removeAttr('disabled');
}
select.focus();
input.focus();
});
});
jsFiddle.
The focus to select and then back is to make the browser redraw the changes, which it wasn't doing in mine (Chrome 9).
If you want them to actually be removed, you will need to remove them and re-add them as required because display: none didn't work for me.