I want to change div background color based on class name 'cls-editable', which is used by javascript to find the element and then set editable attribute to be 'true' or 'false.
When editable, background is yellow. Otherwise, it's white.
HTML
<div class='cls-editable'>
Hello
</div>
CSS:
.cls-editable, [contenteditable="true"] {
background-color: yellow;
}
.cls-editable, [contenteditable="false"] {
background-color: white;
}
Javascript:
if (this.checkStatus) {
$('.dirs_row').children('.cls-editable').each(function () {
$(this).attr('contenteditable', 'true');
});
} else {
$('.dirs_row').children('.cls-editable').each(function () {
$(this).attr('contenteditable', 'false');
});
}
But, it does not work. What's wrong with css?
Try this
CSS
.cls-editable[contenteditable="true"] {
background-color: yellow;
}
.cls-editable[contenteditable="false"] {
background-color: white;
}
OUTPUT
You got it almost correct! Here is the correct solution:
.cls-editable[contenteditable="true"] {
background-color: yellow;
}
.cls-editable[contenteditable="false"] {
background-color: white;
}
<div class='cls-editable' contentEditable="true">
Hello
</div>
<div class='cls-editable' contentEditable="false">
Hello
</div>
I have the following jQuery dialog. How can I change the button size of the two buttons? So they won't be underneath each other, but next to each other.
Here is my code
function ApplyJQueryUI() {
$("#<%= callForwardingAlwaysOption.ClientID %>").buttonset();
$("#callForwardingAlwaysDialog").dialog({
resizable: false,
modal: true,
autoOpen: false,
show: "fade",
closeOnEscape: false,
hide: "fade",
buttons: {
"> Ok": function () {
$("#<%= callForwardingAlwaysButton.ClientID %>").click();
},
"> Annuleren": function () {
$("#<%= callForwardingAlwaysOption.ClientID %>_0").attr("checked", "checked");
$("#<%= callForwardingAlwaysOption.ClientID %>").buttonset("refresh");
$(this).dialog("close");
}
}
});
$('#callForwardingAlwaysDialog').keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
$("#<%= callForwardingAlwaysButton.ClientID %>").click();
}
});
$("#callForwardingAlwaysDialog").parent().appendTo($("#<%= callForwardingAlwaysUpdatePanel.ClientID %>:first"));
if (isPostBack){
$(dialogInstance).dialog("close");
}
}
You can do this with a little bit of CSS, all you need to do is reduce the font size:
#dialog .ui-button-text {
font-size: 10px; /* Or whatever smaller value works for you. */
}
You can also drop the padding:
#dialog .ui-button-text {
font-size: 10px;
padding: 1px 1px 1px 1px; /* Or whatever makes it small enough. */
}
I am new on CSS,
How should I define my CSS class for catch button's disabled state?
There is my CSS class but it didn't work.
.mbutton:disabled{
background: transparent;
}
EDIT
There is JSfiddle example,
http://jsfiddle.net/sefiktemel/v7h9gczu/
If you are using ExtJS this will not work. You will have to add a custom class to to your button and then change your CSS to work with ExtJS.
Button Definition
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
}
});
Ext.create('Ext.Button', {
text: 'Click me',
disabled: true,
renderTo: Ext.getBody(),
disabledCls : 'x-item-disabled mbutton', // this will add you mbutton class
handler: function() {
alert('You clicked the button!');
}
});
Class Definition
.mbutton {
background: transparent !important;
cursor: not-allowed;
}
.mbutton .x-btn-inner {
color: #666;
cursor: not-allowed;
}
Fiddle: https://fiddle.sencha.com/#fiddle/o93
Made even better.
.mbutton:disabled {
cursor: not-allowed;
background: transparent;
}
Here: http://jsfiddle.net/chtah59g/1/
You're on the right track.
<!DOCTYPE html>
<html>
<head>
<style>
button.mybutton:disabled { color: red;
background: blue;
}
</style>
</head>
<body>
<h1>Hello</h1>
<button class="mybutton" disabled>Click me</button>
<button class="mybutton" >Click me</button>
</body>
</html>
See http://plnkr.co/edit/3ZsqM8OHzcy7RogwBmwT?p=preview
Also, are you trying to add opacity?
<style>
button.mybutton:disabled {
color: red;
background: blue;
opacity: 0.4;
}
</style>
How can I integrate ASP.NET MVC unobtrusive validation and Twitter Bootstrap? I want to have all those validation messages and styles appropriately.
A nice way of handling this if you're using Bootstrap 2 is...
Add this to your _Layout.cshtml:
<script type="text/javascript">
jQuery.validator.setDefaults({
highlight: function (element, errorClass, validClass) {
if (element.type === 'radio') {
this.findByName(element.name).addClass(errorClass).removeClass(validClass);
} else {
$(element).addClass(errorClass).removeClass(validClass);
$(element).closest('.control-group').removeClass('success').addClass('error');
}
},
unhighlight: function (element, errorClass, validClass) {
if (element.type === 'radio') {
this.findByName(element.name).removeClass(errorClass).addClass(validClass);
} else {
$(element).removeClass(errorClass).addClass(validClass);
$(element).closest('.control-group').removeClass('error').addClass('success');
}
}
});
$(function () {
$("span.field-validation-valid, span.field-validation-error").addClass('help-inline');
$("div.control-group").has("span.field-validation-error").addClass('error');
$("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-error");
});
</script>
These are the posts where I found the code pieces above:
Integrating Bootstrap Error styling with MVC’s Unobtrusive Error Validation
Twitter Bootstrap validation styles with ASP.NET MVC
MVC Twitter Bootstrap unobtrusive error handling
UPDATE
Right now I needed to do the same when using Bootstrap 3. Here's the modifications necessary since the class names changed:
<script type="text/javascript">
jQuery.validator.setDefaults({
highlight: function (element, errorClass, validClass)
{
if (element.type === 'radio')
{
this.findByName(element.name).addClass(errorClass).removeClass(validClass);
} else
{
$(element).addClass(errorClass).removeClass(validClass);
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
}
},
unhighlight: function (element, errorClass, validClass)
{
if (element.type === 'radio')
{
this.findByName(element.name).removeClass(errorClass).addClass(validClass);
} else
{
$(element).removeClass(errorClass).addClass(validClass);
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
}
}
});
$(function () {
$("span.field-validation-valid, span.field-validation-error").addClass('help-block');
$("div.form-group").has("span.field-validation-error").addClass('has-error');
$("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-danger");
});
</script>
Copy the css of the validators in your css file and change the color accordinlgly.
Something like this should do
.field-validation-error {
color: #b94a48;
display: inline-block;
*display: inline;
padding-left: 5px;
vertical-align: middle;
*zoom: 1;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
/*
border: 1px solid #ff0000;
background-color: #ffeeee;
*/
color: #b94a48;
border-color: #b94a48;
}
.input-validation-error:focus {
border-color: #953b39;
-webkit-box-shadow: 0 0 6px #d59392;
-moz-box-shadow: 0 0 6px #d59392;
box-shadow: 0 0 6px #d59392;
}
.validation-summary-errors {
/*font-weight: bold;*/
color: #b94a48;
}
.validation-summary-valid {
display: none;
}
I suggest to include Bootstrapper in less format and do the same thing as Iridio suggested but in .less.
That way you could have something like:
.validation-summary-errors
{
.alert();
.alert-error();
}
.field-validation-error
{
.label();
.label-important();
}
so when bootstrapper will change you'll pick up the changes automatically.
Regular styles that handle visibility from MVC default Site.css will stay in place and handle visibility.
Why not just use css !important and call it a day:
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #f00 !important;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #f00 !important;
background-color: #fee !important;
}
.validation-summary-errors {
font-weight: bold;
color: #f00;
}
.validation-summary-valid {
display: none;
}
On Bootstrap 3 you have to add:
.validation-summary-errors
{
.alert();
.alert-danger();
}
.field-validation-error
{
.label();
.label-danger();
}
you'll see something like that:
For the ValidationSummary, you can use the overload that allows you to specify htmlAttributes. This allows you to set it to use the Twitter Bootstrap alert css styles.
#Html.ValidationSummary(string.Empty, new { #class = "alert alert-danger" })
A similar overload exists for the ValidationMessage and ValidationMessageFor helper methods.
You can integrate MVC3 validation with Bootstrap framework by adding the following javascript to your page (View)
<script>
$(document).ready(function () {
/* Bootstrap Fix */
$.validator.setDefaults({
highlight: function (element) {
$(element).closest("div.control-group").addClass("error");
},
unhighlight: function (element) {
$(element).closest("div.control-group").removeClass("error");
}
});
var current_div;
$(".editor-label, .editor-field").each(function () {
var $this = $(this);
if ($this.hasClass("editor-label")) {
current_div = $('<div class="control-group"></div>').insertBefore(this);
}
current_div.append(this);
});
$(".editor-label").each(function () {
$(this).contents().unwrap();
});
$(".editor-field").each(function () {
$(this).addClass("controls");
$(this).removeClass("editor-field");
});
$("label").each(function () {
$(this).addClass("control-label");
});
$("span.field-validation-valid, span.field-validation-error").each(function () {
$(this).addClass("help-inline");
});
$("form").each(function () {
$(this).addClass("form-horizontal");
$(this).find("div.control-group").each(function () {
if ($(this).find("span.field-validation-error").length > 0) {
$(this).addClass("error");
}
});
});
});
</script>
Besides, on the Views (for example "Create.cshtml") make sure that the fields in the form are formatted as the following...
<div class="editor-label">
#Html.LabelFor(Function(model) model.Name)
</div>
<div class="editor-field">
#Html.EditorFor(Function(model) model.Name)
#Html.ValidationMessageFor(Function(model) model.Name)
</div>
For those using Bootstrap 3, the css classes have changed and the solutions above need modifications to work with Bootstrap 3. I have used the following with success with MVC 4 and Bootstrap 3. See this SO thread for more:
$(function () {
// any validation summary items should be encapsulated by a class alert and alert-danger
$('.validation-summary-errors').each(function () {
$(this).addClass('alert');
$(this).addClass('alert-danger');
});
// update validation fields on submission of form
$('form').submit(function () {
if ($(this).valid()) {
$(this).find('div.control-group').each(function () {
if ($(this).find('span.field-validation-error').length == 0) {
$(this).removeClass('has-error');
$(this).addClass('has-success');
}
});
}
else {
$(this).find('div.control-group').each(function () {
if ($(this).find('span.field-validation-error').length > 0) {
$(this).removeClass('has-success');
$(this).addClass('has-error');
}
});
$('.validation-summary-errors').each(function () {
if ($(this).hasClass('alert-danger') == false) {
$(this).addClass('alert');
$(this).addClass('alert-danger');
}
});
}
});
// check each form-group for errors on ready
$('form').each(function () {
$(this).find('div.form-group').each(function () {
if ($(this).find('span.field-validation-error').length > 0) {
$(this).addClass('has-error');
}
});
});
});
var page = function () {
//Update the validator
$.validator.setDefaults({
highlight: function (element) {
$(element).closest(".form-group").addClass("has-error");
$(element).closest(".form-group").removeClass("has-success");
},
unhighlight: function (element) {
$(element).closest(".form-group").removeClass("has-error");
$(element).closest(".form-group").addClass("has-success");
}
});
}();
You can add a few classes to your Site.css file:
/* styles for validation helpers */
.field-validation-error {
color: #b94a48;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #b94a48;
}
select.input-validation-error {
border: 1px solid #b94a48;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #b94a48;
}
.validation-summary-valid {
display: none;
}
FYI: http://weblogs.asp.net/jdanforth/form-validation-formatting-in-asp-net-mvc-5-and-bootstrap-3
This will convert ValidationSummary() to a boostrap alert. You can include a little script to remove unnecessary classes and give a highlight to fields with problems.
#if (ViewData.ModelState.Any(x => x.Value.Errors.Any())) {
<div class="alert alert-danger">
×
<h4>Validation Errors</h4>
#Html.ValidationSummary()
</div>
}
<script>
$(".validation-summary-errors").removeClass("validation-summary-errors");
$(".input-validation-error").removeClass("input-validation-error").parent().addClass("has-error");
</script>
See more information at http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/
This is a neat solution that gives you more control over how the ValidationSummary renders errors to the view. The Unordered List it produced did not look right inside the alert. Therefore, I simply looped through the errors and rendered them how I wanted - using paragraphs in this case. For example:
#if (ViewData.ModelState.Any(x => x.Value.Errors.Any()))
{
<div class="alert alert-danger" role="alert">
<a class="close" data-dismiss="alert">×</a>
#foreach (var modelError in Html.ViewData.ModelState.SelectMany(keyValuePair => keyValuePair.Value.Errors))
{
<p>#modelError.ErrorMessage</p>
}
</div>
}
Which results in a neat Validation Summary Alert:
The following worked for me:
$(function () {
// any validation summary items should be encapsulated by a class alert and alert-danger
$('.validation-summary-errors').each(function () {
$(this).addClass('alert');
$(this).addClass('alert-danger');
});
// update validation fields on submission of form
$('form').submit(function () {
if ($(this).valid()) {
$(this).find('div.control-group').each(function () {
if ($(this).find('span.field-validation-error').length == 0) {
$(this).removeClass('has-error');
$(this).addClass('has-success');
}
});
}
else {
$(this).find('div.control-group').each(function () {
if ($(this).find('span.field-validation-error').length > 0) {
$(this).removeClass('has-success');
$(this).addClass('has-error');
}
});
$('.validation-summary-errors').each(function () {
if ($(this).hasClass('alert-danger') == false) {
$(this).addClass('alert');
$(this).addClass('alert-danger');
}
});
}
});
// check each form-group for errors on ready
$('form').each(function () {
$(this).find('div.form-group').each(function () {
if ($(this).find('span.field-validation-error').length > 0) {
$(this).addClass('has-error');
}
});
});
});
var page = function () {
//Update the validator
$.validator.setDefaults({
highlight: function (element) {
$(element).closest(".form-group").addClass("has-error");
$(element).closest(".form-group").removeClass("has-success");
},
unhighlight: function (element) {
$(element).closest(".form-group").removeClass("has-error");
$(element).closest(".form-group").addClass("has-success");
}
});
}();
Taken from http://www.benripley.com/development/javascript/asp-mvc-4-validation-with-bootstrap-3.
I have a css problem with jquery / jquery ui / auto complete
<script type="text/javascript">
$(function() {
$("#search").autocomplete({
source: "autocomplete.php",
minLength: 2,
select: function(event, ui) {
window.location.href = "http://site.com/" + ui.item.id + ".html";
$("#search").val(ui.item.label);
}
})
.data("autocomplete")._renderItem = function (ul, item) {
return $('<li class="ui-menu-item-with-icon"></li>')
.data("item.autocomplete", item)
.append('<a style="height: 50px;" class="ui-corner-all"><img src="thumb.php?img=' + item.img + '" class="ajaxsearchimage">' + item.label + '</a>')
.appendTo(ul);
};
});
</script>
<style>
span.searchicon
{
display: inline-block;
height: 50px;
width: 50px;
}
.ajaxsearchtext
{
padding-left: 60px;
display: inline-block;
}
</style>
I would like to align the text on the top
I tryed to put vertical-align:top in the class but it doesn' work.
http://imageshack.us/photo/my-images/4/sansrer.png/
Does someone has a solution ?
Regards
you need to apply the property to the image
img {vertical-align:text-top;}
an example
http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align
UPDATE
upon comments I suggest floating the image to the left would be the solution.
img.SelectedClass { float: left; }