I have the following checkbox with a class on it, for future use
.class{onClick: "doSomething()"}= check_box #var, :var
But there's a problem. Let's pretend |AAAA| is the buton, if i click on the ==.. it still triggers doSomething().
|AAAA| ====================
I tryied with
display: block
in css but it doesn't work
Thanks
That's because both the label and input area are enclosed in the .class.
Instead, specify via js that you only want the checkbox input to trigger your JS action, and not the label.
= check_box #var, :var, id: 'my-id'
Then:
:javascript
$("input#my-id").click(function() {
doSomething();
});
What is generated html?
Looks like you've set onClick handler to outer div, not to the checkbox.
( I assume you have reasons to use inline javascript instead on unobtrusive one)
There may be 2 reasons this:
1: You have a label tag around the checkbox as well as element containing ==================== (As you said in the question )
2: You may not have given the class to checkbox, rather it is bound to another element that contains checkbox.
Related
I want to add a custom CSS Class to a dijit/layout/ContentPane so I'm able to style it myself.
This is cause I got more than one tab in my TabContainer where my ContentPanes are located and I don't want to double the borders. Using a border all around the Tab will double the border so I removed the left border of the tabs. In the first tab in the TabContainer I need the left border, too.
To get this I tried to assume the first ContentPane a custom CSS class which will do it.
As you see me writing here, I didn't find a way to do this.
I tried it within the data-dojo-props with
<div data-dojo-type="dijit/layout/ContentPane" title="FunnyTitle" data-dojo-props="class:'firstTab'">
So this didn't work. I tried to add it like I do it in a simple HTML element with class="firstTab"
<div data-dojo-type="dijit/layout/ContentPane" title="FunnyTitle" class="firstTab">
Both ways didn't add my class to the ContentPane.
So how is it done?
The class property is actually not used for that kind of purpose, but it used for identifying of which type the widget is.
However, the class attribute should work, because declarative widgets usually keep their parent attributes. If I have the following HTML:
It eventually gets rendered into:
<div class="dijitContentPane test" data-dojo-type="dijit/layout/ContentPane" id="myContent" widgetid="myContent">
Hello
</div>
However, please note that when using a dijit/layout/ContentPane inside a dijit/layout/TabContainer a lot of additional CSS is added, possibily overriding your own CSS.
For example, for overriding the background color of a tab inside a dijit/layout/TabContainer, I had to use the following CSS selector:
.dijitTabContainerTop-dijitContentPane.test2 {
background-color: #D4D4D1;
}
Demo: http://jsfiddle.net/Lcog9saj/
But also, be aware that the borders generated by the TabContainer are not applied to the ContentPane itself, but to an element with classname .dijitTabContainerTop-container (part of the TabContainer itself).
If this really doesn't work, then you can always access the domNode property of the widget you're trying to alter, for example:
require(["dijit/registry", "dojo/ready", "dojo/dom-class"], function(registry, ready, domClass) {
ready(function() {
domClass.add(registry
.byId("myContentPane")
.get("domNode"), "test2");
});
});
It's that simple that I didn't get it.
All you need to do is adding an ID to the ContentPane.
Dojo generates a widgetID with it like "dijit_layout_TabContainer_0_tablist_myID"
If the TabContainer itself has an ID, it could be different. Just have a look at the generated code.
Now you're able to get it with dijit.byId.
At the end it looks something like:
var tab = dijit.byId("dijit_layout_TabContainer_0_tablist_myID");
domClass.add(tab.domNode,"myClassName");
domClass is a part of dojo. For using it you just need to require it "dojo/dom-class"
I have an ExtJS form that uses hbox-layout containers to create sentences that contain form inputs and there is a requirement to disable the form under certain conditions. The hbox-layout containers have a series of radio, text, checkbox, and textfield components. You can see an example on jsfiddle.
This is an answered question here on SO that doesn't fully work for me because if you disable something that isn't a field (like the text component I'm using) the disable style is different - it appears to mask the component instead of just graying out the text. When nested components are disabled, the mask gradients stack. Examples of this scenario are illustrated on this jsfiddle.
Is there a way to override how text handles its styling when it becomes disabled? I think that may be the easiest solution.
You'll have to handpick each style fix, but yes that's completely possible. Just addCls to give a hook for your CSS...
For example, using the following CSS:
.my-disabled-ct text {
opacity: .3;
}
You can give a similar disabled look both to fields and text items with the following code:
var rootCt = Ext.getCmp('lotsOfItems');
rootCt.query('field').forEach(function(field) {
field.disable();
});
rootCt.query('container').forEach(function(ct) {
ct.addCls('my-disabled-ct');
});
You should probably avoid using disable on field since Ext put a mask over them then (though you could probably hide it with CSS).
You could add the class and target the CSS directly to text items however, why not? In this case, you would query for 'text' and use addCls on them, with this kind of CSS:
text.my-disabled-cls {opacity: .3;}
That goes without saying that you'll restore your components look to "not disabled" by removing the CSS class with the same query and the removeCls method.
I have kendo grid in application,and its have filterable true option.my requirment is when we apply the filtering to columns,column header font style will be changed to italic..How to do it?If any one have idea about this please tell me..
I personally have not used kendo grid, but I quickly tried the demo here,
and found that it adds "k-state-active" class to the <a> element inside the <th> element.
However, the header text is not inside the <a> element. What you need is a parent selector which current CSS does not support.
So as far as i know, this is NOT possible in pure CSS
You need some javascript. Here is a possible solution using jQuery:
// adding click event handler to the "Filter" and "Clear" buttons
$('form.k-filter-menu .k-button').click(function(e) {
setTimeout(function() {
// first make all headers normal, then make the filtered column header italic
$('th.k-header.k-filterable').css('font-style', 'normal').filter(
':has(> .k-grid-filter.k-state-active)').css('font-style', 'italic');
}, 100);
})
setTimeout is used because "k-state-active" class is added only after the data is filtered. Again, I'm not familiar with kendo grid, so I do not know if there is a way to provide a callback method to the filter. You may want to investigate on that because that 100 ms delay may not be long enough if you have a huge dataset.
My apologies for jQuery specific solution. Ah... I can't do anything without jQuery. Shame.
But hopefully this was helpful to you! Let me know if you need any further help.
This is possible with one CSS line:
.k-filterable a.k-grid-filter.k-state-active ~ .k-link {font-style:italic;}
No need to use java script.
I have the label like <label>name:<input></label>
and the css like
label:active{/*properties*/}
I'd like the properties to be applied to name inside <label> when I click on <input> it gets applied but it looses focus to the <input> soon after I click it.
here is an example: http://jsfiddle.net/GuCk4/2/
If I understand your question, you could just do this... without changing any HTML.
label, input, input:focus{
font-weight: bold;
}
Example: http://jsfiddle.net/jasongennaro/GuCk4/4/
BTW: you don't really need input:focus here... at least in my tests on Chrome. You may need it for other browsers.
EDIT
Okay, after #Mohsen's comment, I reread the question.
What you want is a parent selector in css. This does not exist. Since css relies on the cascade, it applies styles down the DOM not up it.
So, the only way to do what you want is to rewrite your HTML, as per #Mohsen's answer, or use some jQuery, like so
$('input').focus(function(){
$(this).parent().css('font-weight','bold');
});
$('input').blur(function(){
$(this).parent().css('font-weight','normal');
});
Example 2: http://jsfiddle.net/jasongennaro/GuCk4/5/
label{display:block}
label:active,label:hover,label:focus{font-weight:700}
works how you want it to.
#steveax is correct, don't put the label after the input unless it's a checkbox
For anyone using jQuery 1.7+, here's a nicer bit of jQuery to toggle an "active" class on a label wrapped around an <input type="checkbox">.
$("body").on(
"click",
"label input[type=checkbox]",
function(){
$(this).parent("label").toggleClass("active");
}
);
Demo: http://jsbin.com/iHaJeCe/3
I'm trying to "single source" a form page which can be in edit mode or view mode. For various reasons, this isn't using the ASP.Net FormView or DetailsView controls.
Since there is no way to disable a textbox without turning its contents gray (well, we could "eat" all of the keystrokes into it, but that isn't very elegant either) and disabling a dropdown list or listbox isn't what we want, our first try was to duplicate all of the form input controls with a label and use CSS to select which ones are visible depending on the mode of the form. That works, but it's ugly to edit and the code-behind has to populate both controls every time.
We could control the visibility in the code-behind to avoid filling both controls, but we still have to add them both to the form.
So I had the idea to use jQuery to swap out the input controls for <label>, <div>, or <span> elements. This works, to some extent, by creating the appropriate selectors and using the replace() jQuery method to swap out the elements dynamically.
The problem is that I not only need to copy the contents, but also the styles, attributes, and sizing of the original input controls (at this point we're only talking about textboxes - we have a different solution for dropdown lists and listboxes).
Brute force should work - "backup" all of the attributes of the input control, create the new "read only" element, then replace the input control with the new element. What I'm looking for is something simpler.
Succinctly, using jQuery, what is the best way to replace a textbox with a label and have the label have the same contents and appear in the same location and style as the textbox?
Here is what I have so far:
$(":text").each( function() {
var oldClass = $(this).attr("class");
var oldId = $(this).attr("id");
var oldHeight = $(this).outerHeight();
var oldWidth = $(this).outerWidth();
var oldStyle = $(this).attr("style");
$(this).replaceWith("<div id='" + oldId + "'>" + $(this).val() + "</div>");
$("div#" + oldId).attr("class", oldClass);
$("div#" + oldId).attr("style", oldStyle);
$("div#" + oldId).width(oldWidth);
$("div#" + oldId).height(oldHeight);
$("div#" + oldId).css("display", "inline-block");
});
This may not suit your needs, but it's a possibility.
<input> and <textarea> tags support the read-only property. The behavior of read-only fields is slightly different than disabled. Here's what the HTML 4.01 Recommendation says:
When set, the readonly attribute has the following effects on an element:
Read-only elements receive focus but cannot be modified by the user.
Read-only elements are included in tabbing navigation.
Read-only elements may be successful. ("Successful" means it will be submitted as a parameter.)
Another key difference is that elements with this attribute can be styled however you like. (You could remove or change the borders and background for instance.) So instead of having to create new elements and copy attributes, you could merely add or remove the read-only attribute.
You could then create a style for these fields "input[readonly] {}". Noting of course that popular versions of IE ignore the attribute selector in CSS. (So maybe just define a class that you add and remove.)
Why not use an edit in place plugin like Jeditable. This way you can generate your view mode and have each field editable at the click of a button.
When I've done this, I've had to "eat" each keystroke as you describe and mirror it into a "hidden" span tag that mirrors the <input or <select element. The span tags all have a css class that's styled using media selectors to only show for print, and the inputs have a css class that's styled to only show for the screen.
If you don't mind the static width that doesn't scale to the size of the text, you could also just style your <input tags to not show a border for print, but that's pretty ugly.