This is a dumb question - but I've been stuck on it for awhile and cannot find an answer.
I'm trying to override the color of an Ext.js checkbox for only certain elements.
CSS:
.x-field-checkbox .x-field-mask::after, .x-field-radio .x-field-mask::after .emptyCell{
color: white;
}
Notice the class there - .emptyCell
Now the Sencha code:
if(noCheckBox) {
var checkbox =
{
xtype: 'checkboxfield',
cls: 'opBuyoffCheckBoxCell emptyColumn',
readOnly: true
};
return checkbox;
} else {
var checkbox =
{
xtype: 'checkboxfield',
cls: 'opBuyoffCheckBoxCell',
listeners: {
change: function (checkbox) {
//Todo put in logic on checkbox change
}
}
};
return checkbox;
}
},
What is the problem here? I have three checkboxes. Two of them should render white and the other one should be normal based on my CSS and logic. I've debugged and it is going into the right code. But when I launch my application it is always using the emptyColumn css class.
Help is appreciated.
Apply this css:
.emptyColumn .x-input-el:checked+.x-field-mask::after {
color: #fff;
}
One thing to notice, write same cls in CSS and HTML.
Related
I want to create a component that provides a list of selections to the user but allows only one selection to be made at any given time. The functionality of the mat-radio-group seems to fit that bill the best, but I don't want the actual radio button to be rendered next to the labels within my radio group. I want to expand the label and make any (change) event fire from a click event on the label itself.
What is the least "hacky" way to eliminate the radio buttons from my radio group, while keeping the labels as they were?
you can also make a custom form control. The idea is that has a .html like
<select-component [(ngModel)]="valor">
<div select value="1">One</div>
<div select>Two</div>
</select-component>
We are going to make a directive that the selector was [select]
#Directive({
selector: '[select]',
})
export class SelectDirective implements AfterViewInit {
#Input('value')value:any;
control:any;
#HostBinding('class.selected')
get isSelected(){
return this.control && this.control.value==this.value?true:undefined
}
#HostBinding('class.select')setClass(){return true}
#HostListener('click') onclick() {
console.log(this.value);
if (this.control)
this.control.setValue(this.value)
}
constructor(private el:ElementRef){}
ngAfterViewInit()
{
this.value=this.value ||this.el.nativeElement.innerHTML
}
}
See that, in ngAfterViewInit we give value to this.value as the innerHTML of the div case you has not defined the value
There're two class binding, one .select -this alow us give .css to our component from app.main.component, one .selected, when the div was "selected".
The SelectComponent is a tipical custom form control, the "interesting" is that, in ngAfterViewInit, we ask about the "select" directive inside to allow comunicate the directive and the component
#Component({
selector: 'select-component',
template: `<ng-content></ng-content>`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SelectComponent),
multi: true
}
]
})
export class SelectComponent implements ControlValueAccessor,AfterViewInit {
#ContentChildren(SelectDirective)selects:QueryList<SelectDirective>;
value:any;
disabled:boolean=false;
onChange:any;
onTouched:any;
writeValue(value: any[]|any): void {
this.value=value;
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
setDisabledState(isDisabled: boolean): void {
this.disabled=isDisabled
}
ngAfterViewInit()
{
this.selects.forEach(x=>{
x.control=this
})
}
setValue(value)
{
this.value=value
this.onChange(value)
}
}
And, voila!, the stackblitz
I am trying to get my head around a scenario with CSS components:
I have a react component that uses its own classes. This component has a little helper subcomponent that also has its own classes. Now: When a specific state in the main component is set and a specific class is applied then the helper component's css should react on that class.
For instance:
Component A uses Component B to show something.
Component A gets clicked on and react sets a "clicked"-class on that component
Component B should then visually react on that class
In plain CSS (or similar) I would do this:
Component A:
.component {
height: 10px;
}
.component.clicked {
height: 5px;
}
Component B
.clicked {
.subComponent {
background-color: orange;
}
}
I know that there is a react way to do this. This kind of thing should be done with states and props which are being passed between the components so that this kind of situation gets avoided altogether. But I am currently refacturing a project that still has these issues and I don't really get how to do this properly with react-css-modules.
By the way: My current workaround uses :global but I'd really, really like to avoid this...
Component B:
.clicked:onclick, .subComponent {
// code ...
}
This should do it.
If not I'm just bad at css, or confused about your question.
Parent:
var ComponentA = React.createClass({
getInitialState: function() {
return {
isClicked: false
}
},
onClick: function() {
this.setState({ isClicked: !this.state.isClicked });
}),
render() {
return (
<div className={this.state.isClicked ? "component clicked" : "component"}>
<ComponentB isClicked={this.state.isClicked}/>
</div>
);
}
});
Child:
var ComponentB = React.createClass({
getDefaultProps: function() {
return {
isClicked: false
}
},
render() {
return (
<div className={this.props.isClicked ? "subComponent clicked" : "subComponent"}>
I am the subComponent
</div>
);
}
});
My code:
new Ext.form.TextField({
value: "Name",
style: {
backgroundColor:'red'
},
listeners: {
beforerender: function (e) {
console.log(e)
e.setStyle("backgroundColor", "#00cc99");
}
}
});
By applying style config or appending color beforerendering doesnt work. Even bodyStyle config is not filling the textbox with color. How to resolve this?
Thanks
You can apply custom class to the element and style inner input the way you need:
new Ext.form.TextField({
value: "Name",
cls: 'red-field'
});
And CSS class:
.red-field .x-form-text {
background-color: red;
}
I am trying to dynamically set the padding on a grid panel I have showing some data. On the event that my checkbox was clicked, it should apply the padding cls.
Here is the relevant ExtJS code:
var permissionsGrid = Ext.create('Ext.grid.Panel', {
//...
items: [{
xtype: 'checkbox',
name: 'EditRoles',
boxLabel: 'Edit User Roles',
handler: function(field, value) {
userRoleFilter = '';
permissionsGrid.removeCls('permissions_panel_nopadding');
console.log(permissionsGrid.hasCls('permissions_panel_nopadding'));
permissionsGrid.addCls('permissions_panel_padding');
console.log(permissionsGrid.hasCls('permissions_panel_padding'));
}
}],
//...
});
Here is my CSS
.permissions_panel_nopadding {
padding: 0px;
}
.permissions_panel_padding {
padding: 5px;
}
When the checkbox is clicked, currently nothing happens. I tried to use:
permissionsGrid.getView().refresh();
...but to no prevail.
You are always removing one class and always adding another class. You need to "switch" the classes. If you don't need special styling when the checkbox isn't clicked, you should add/remove only one class.
handler: function(field, value) {
userRoleFilter = '';
if ( value === true) {
permissionsGrid.removeCls('permissions_panel_nopadding');
permissionsGrid.addCls('permissions_panel_padding');
}
else {
permissionsGrid.addCls('permissions_panel_nopadding');
permissionsGrid.removeCls('permissions_panel_padding');
}
console.log(permissionsGrid.hasCls('permissions_panel_padding'), permissionsGrid.hasCls('permissions_panel_nopadding'));
}
Here is my fiddle with basic panel and only one CSS class: https://fiddle.sencha.com/#fiddle/ne3
EDIT:
ExtJS 6.0+
Since ExtJS 6.0.0, you can use the toggleCls method:
handler: function(field, value) {
permissionsGrid.toggleCls('permissions_panel_padding', value);
permissionsGrid.toggleCls('permissions_panel_nopadding', !value);
console.log(permissionsGrid.hasCls('permissions_panel_padding'), permissionsGrid.hasCls('permissions_panel_nopadding'));
}
I have made an custom collapsible fieldset control in asp.net. I use jquery to add the toggle effects. The control works perfectly but when i am using my fieldsets inside an updatepanel, afer a postback i loose my jquery logic because of the document.ready.
Now i have read about the new Live() function of Jquery but i don't get it working. What do i do wrong? Has someone the answer??
Thanks a lot
My Jquery code is:
$(document).ready(function() {
$.fn.collapse = function(options) {
var defaults = { closed: false }
settings = $.extend({}, defaults, options);
return this.each(function() {
var obj = $(this);
obj.find("legend").addClass('SmartFieldSetCollapsible').live("click", function() {
if (obj.hasClass('collapsed')) {
obj.removeClass('collapsed').addClass('SmartFieldSetCollapsible'); }
$(this).removeClass('collapsed');
obj.children().next().toggle("slow", function() {
if ($(this).is(":visible")) {
obj.find("legend").addClass('SmartFieldSetCollapsible');
obj.removeAttr("style");
obj.css({ padding: '10px' });
obj.find(".imgCollapse").css({ display: 'none' });
obj.find(".imgExpand").css({ display: 'inline' });
}
else {
obj.css({ borderLeftColor: 'transparent', borderRightColor: 'transparent', borderBottomColor: 'transparent', borderWidth: '1px 0px 0px 0px', paddingBottom: '0px' });
obj.find(".imgExpand").css({ display: 'none' });
obj.find(".imgCollapse").css({ display: 'inline' });
}
});
});
if (settings.closed) {
obj.addClass('collapsed').find("legend").addClass('collapsed');
obj.children().filter("p,img,table,ul,div,span,h1,h2,h3,h4,h5").css('display', 'none');
}
});
};
});
$(document).ready(function() {
$("fieldset.SmartFieldSetCollapsible").collapse();
});
The problem is that you are doing more then just a plain selector for your live selection
From api.jquery.com
"DOM traversal methods are not fully supported for finding elements to send to .live(). Rather, the .live() method should always be called directly after a selecton"
if (obj.hasClass('collapsed')) {
obj.removeClass('collapsed').addClass('SmartFieldSetCollapsible'); }
$(this).removeClass('collapsed');
First you want to remove the class an add another class if it has the class collapsed, an then you remove the class collapsed. I don't know if it affects the working of the system but it is worth to try.
Does the function work if you just use .click (when the field aren't updated)?
Traversing is the issue. You can solve it with a simple selection.
var obj = $(this),
obj.find("legend").addClass('SmartFieldSetCollapsible');
$('legend.SmartFieldSetCollapsible').live('click.collapsible', function(e){