I have an autoform with select-radio-inline' type. the required asterisk shows in all the options. I want to remove it from the radio box.
How to achieve?
Schema:
name: {
type: String,
autoform: {
type: 'select-radio-inline',
label: "Sex",
afFieldInput: {
options: function() {
return [{
label: "male",
value: "male"
}, {
label: "female",
value: "female"
}];
}
}
}
}
This works for me.
.form-group[data-required="true"] .af-radio-group label:after {
content: "" !important;
}
You can hide the asterisk by overwriting the corresponding CSS rule, for example:
[data-required] label:after {
content: '';
}
If you want to hide all asterisks for your name group only, you could create a div which wraps your AutoForm element and then use the div's identifier as a parent selector:
#name > [data-required] label:after {
content: '';
}
If you want to keep the asterisk for your label and just remove the asterisks for your radio options within the name group, you could use:
[data-schema-key="name"] label:after {
content: '';
}
Read more about the data-required attribute in Meteor AutoForm.
Related
This is how my data gets rendered:
You can see above that it renders the data input next to each other. Can I use CSS to display the text as a list?
My contentful query:
query MyQuery {
allContentful {
edges {
node {
feelings
}
}
}
}
OUTPUT:
{
"data": {
"allContentful": {
"edges": [
{
"node": {
"feelings": [
"Happy / Good Mood",
"Creative",
"Sleepy / Couch Lock"
]
}
},
And here is the return:
const StrainTemplate = ({
data: {
strain: {
feelings,
},
},
<p className="info-text"{feelings}</p>
If it's rendered like in your images, then you can use white-space: pre; to include the whitespace
.info-text {
white-space: pre;
}
<p class='info-text'>
Happy / Good Mood
Creative
Sleepy / Couchy Look
</p>
Note: this will work if your rendered content has a whitespace and will follow it like [Tab Space] or [New Line], but if your rendered content only contains [Space] then it will remain in the same line
Not a CSS solution but can you directly make it as the li elements
feeling.map(eachWord => <li>{eachWord}</li>)
I'm using ng2-smart-table to display some data, i've set the selectMode to 'multi' in order to have checkboxes on the left side. In the data i have an array of objects which come with a property "set" which is a boolean and can either be true or false, how do i disable the checkbox if the set property is true? Is there a way to do this?
I've already tried making a new renderComponent etc but then i lose the selectAll functionality plus with a renderComponent the selectRow works different.
Here's a link: https://stackblitz.com/edit/angular-ndmxxg
I have put a button on the Top, which is initialized to true, when you press it, it will disable all the checkboxes;
NOTE: I have set this on click of a button so that you see it in action; If you want to do it after getting a boolean variable from the parent or by-default, you'd have to do this inside ngAfterViewInit()... since we'd have to wait for the ng2-smart-table to be rendered and ready; i left a comment in my stackblitz about it also;
relevant HTML:
<h3>
Event Response in Console
</h3>
<button (click)="onClick()"> Disable checkbox </button>
<hr/>
<ng2-smart-table [settings]="settings" [source]="data" (deleteConfirm)="onDeleteConfirm($event)" (editConfirm)="onSaveConfirm($event)"
(createConfirm)="onCreateConfirm($event)" (userRowSelect)="onRowSelect($event)">
relevant TS:
import { Component, Renderer2, ElementRef, ViewChild } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
selectedMode: boolean = true;
// This will contain selected rows
selectedRows: any;
constructor(private renderer2: Renderer2, private e: ElementRef) { }
ngAfterViewInit() { }
disableCheckboxes() {
var checkbox = this.e.nativeElement.querySelectorAll('input[type=checkbox]');
checkbox.forEach((element, index) => {
/* disable the select all checkbox */
if (index ==0){this.renderer2.setAttribute(element, "disabled", "true");}
/* disable the checkbox if set column is false */
if (index >0 && this.data[index-1].set == false) {
this.renderer2.setAttribute(element, "disabled", "true");
}
});
}
settings = {
selectMode: 'multi',
delete: {
confirmDelete: true,
deleteButtonContent: 'Delete data',
saveButtonContent: 'save',
cancelButtonContent: 'cancel'
},
add: {
confirmCreate: true,
},
edit: {
confirmSave: true,
},
columns: {
id: { title: 'ID', },
name: { title: 'Full Name', },
email: { title: 'Email', },
set: { title: 'Set', }
},
};
data = [
{
id: 1,
name: "Leanne Graham",
email: "Sincere#april.biz",
set: true
},
{
id: 2,
name: "Ervin Howell",
email: "Shanna#melissa.tv",
set: false
},
// ... list of items
{
id: 11,
name: "Nicholas DuBuque",
email: "Rey.Padberg#rosamond.biz",
set: false
}
];
// UserRowSelected Event handler
onRowSelect(event) {
this.selectedRows = event.selected;
}
// Get Selected button click handler
onClick() {
// It will console all the selected rows
this.selectedMode = false;
this.disableCheckboxes();
}
onDeleteConfirm(event) {
console.log("Delete Event In Console")
console.log(event);
if (window.confirm('Are you sure you want to delete?')) {
event.confirm.resolve();
} else {
event.confirm.reject();
}
}
onCreateConfirm(event) {
console.log("Create Event In Console")
console.log(event);
}
onSaveConfirm(event) {
console.log("Edit Event In Console")
console.log(event);
}
}
complete working stackblitz here
Update (in light of questioner's comment below):
relevant CSS:
::ng-deep table tr td:nth-of-type(1),
::ng-deep table tr th:nth-of-type(1)
{ padding:0 !important; display: block;height: 13px; position: relative;}
::ng-deep table tr td:nth-of-type(1) input,
::ng-deep table tr th:nth-of-type(1) input
{ margin:0 !important; position: absolute; top: 15px;}
::ng-deep table tr td:nth-of-type(2),
::ng-deep table tr th:nth-of-type(2)
{ padding: 0 0 0 20px !important;}
I looked into dia.Link.prototype.attr with a few examples and understand that Link attributes can be directly defined this way:
joint.dia.Link.define('flow.Link', {
router: {
name: 'normal'
},
connector: {
name: 'normal'
},
attrs: {
'.tool-options': {
'data-tooltip-class-name': 'small',
'data-tooltip': 'Inspect me',
'data-tooltip-position': 'left'
},
'.marker-source': {
fill: 'none',
stroke: 'none'
},
'.connection-wrap': {
fill: 'none'
},
'.connection' : {
stroke: '#0000ff',
strokeWidth: 2,
strokeDasharray: '0',
fill: 'none'
},
'.marker-target': {
fill: '#0000ff',
stroke: '#0000ff',
d: 'M 10 0 L 0 5 L 10 10 z'
},
}
});
But is there a way I can define in here the default dia.Link.prototype.label attributes? E.g.:
joint.dia.Link.define('flow.Link', {
labels: {
'.label': {
position: 1, // label at the target
attrs: {
text: { fill: 'blue', text: 'My default link label' },
rect: { fill: 'yellow' },
}
}
},
// other properties ...
});
I tried several variations of the above code without success, but since .labels is a group of link, wouldn't something like this be possible?
An alternative to this I attempted was to programmatically style the first default label through link.label(index, properties, opt), but once I add, for example, one more label to the link through the inspector, both labels attributes are lost (the former and the added one)...
Right now it is not possible to change the default label attributes (unless the dia.LinkView.prototype.updateLabels() method is overriden). I've created an issue in the JointJS repository.
If you add labels through the ui.Inspector plugin, you can modify the labels inspector definition, so that every new label has the desired properties. For that use the defaultValue field option and make the inspector field invisible as shown in the example below.
labels: {
type: 'list',
item: {
type: 'object',
properties: {
attrs: {
text: {
text: {
type: 'text',
defaultValue: 'label',
},
// `labels/{n}/attrs/text/fill` fake field
fill: {
type: 'text',
// The value of the property,
// which is set when a new label is created
defaultValue: 'blue',
// Make this field invisible
// So the user won't be able to change it
attrs: { '.field': { style: 'display:none' }}
}
},
rect: {
// `labels/{n}/attrs/rect/fill` fake field
fill: {
type: 'text',
defaultValue: 'yellow',
attrs: { '.field': { style: 'display:none' }}
}
}
}
}
}
}
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'm using Redactor and need to dynamically add elements to a custom dropdown menu. I can't find any way of doing this in the documentation - does anyone know if this is possible?
Yes, it's possible if you use this:
$('#redactor').redactor({
focus: true,
buttonsAdd: ['|', 'button1'],
buttonsCustom: {
button1: {
title: 'Button',
callback: function(buttonName, buttonDOM, buttonObject) { /* … */ },
dropdown: {
alignleft: {
title: lang.align_left,
func: 'alignmentLeft'
},
aligncenter: {
title: lang.align_center,
func: 'alignmentCenter'
}
}
}
}
});