I would like to color my root node a different color than the rest of the nodes on the screen, I have already done some pre-work to identify the value of the root node and have it readily available in a variable. However, in trying to style the graph nothing happens and its been difficult to debug through this.
example:
nodes: [{id = 1}, {id=2}]
var startingNode = 1; //root node
$('#cy').cytoscape({
style: [
{
selector: 'node',
css: {
'content': 'data(id)',
'background-color': 'red',
'color': 'black',
'border-width': '1px',
'border-color': 'black'
}
},
{
selector: "node[content = 'startingNode']",
css: {
'content': 'data(id)',
'background-color': 'purple',
'color': 'black',
'border-width': '1px',
'border-color': 'black'
}
}]
// more info for cytoscape rendering omitted
});
Any input would be helpful!
Thanks,
Paul G.
Unless, content is in the node's data, that won't work. If you have the ID of a node (e.g. foo), you can use #foo or [id = 'foo'] as the selector.
Related
How to fix it? I found a bug on layout card animation using grid component;
What happens?
When you configure the layout for the "card" type and animation for "slide", "cover" etc... the line selection (record) stops working, when hovering over the record and clicking, the css of check gives bug.
When you change the layout to "card" simply, the grid selection works normally.
I'm using Windows 10, Edge browser;
See the bug on Sencha Fiddle
It is only the grid, dataview does not appear to have the same problem.
Not getting the error on firefox.
Also only with Material theme because it is related to Fashion. I could not figure out how to import Fashion in the sencha fiddle so I could not add to your fiddle.
I found that if you unchecked ANY color in chrome devtools the problem goes away for one animation. So i messed around with resetting the colors and that seems to work. You have to change a color wait 10 milliseconds and change it back. You can change ANY color. I am changing the hovered-background-color but it can be anyone of the predefined colors. I change it just one shade and it is only for 10 milliseconds. It will only work with colors in the format of #11111.
I have not figured out what is causing the problem but I have a huge hack of a work around. I am sure this can be improved... also did not test much at all. Feel free to post any improvements, or if you figure out the underlying problem.
items: [{
xtype: "grid",
ui: 'default',
listeners: {
show: function() {
let cssVariables = Fashion.css.getVariables();
let oldColor = cssVariables['hovered-background-color'];
newColor = parseInt(oldColor, 16);
newColor = '#' + (((newColor & 0x0000FF) + 1) | ((((newColor >> 8) & 0x00FF) + 1) << 8) | (((newColor >> 16) + 1) << 16)).toString(16);
cssVariables['hovered-background-color'] = newColor;
Fashion.css.setVariables(cssVariables);
Ext.defer(function() {
cssVariables['hovered-background-color'] = oldColor;
Fashion.css.setVariables(cssVariables);
}, 10);
}
},
title: 'Simpsons',
store: {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]
},
columns: [
{ text: 'Name', dataIndex: 'name', width: 200 },
{ text: 'Email', dataIndex: 'email', width: 250 },
{ text: 'Phone', dataIndex: 'phone', width: 120, flex: 1 }
]
}, {
I have two event sources, configured like so:
this.eventSources = {
1: {
id: 1,
color: '#228B22',
textColor: '#000000',
backgroundColor: '#90EE90',
url: this.config.loadUrl,
startParam: 'from',
endParam: 'to',
extraParams: {
client_id: 0,
agenda_item_type_id: 1
}
},
2: {
id: 2,
color: '#0e64a0',
textColor: '#000000',
backgroundColor: '#87CEFA',
url: this.config.loadUrl,
startParam: 'from',
endParam: 'to',
extraParams: {
client_id: 0,
agenda_item_type_id: 2
}
}
};
I set them before calender.render() like so:
Object.values(this.agendaItemTypes).forEach(itemType => {
if (itemType.initiallyVisible) {
this.calendar.addEventSource(this.eventSources[itemType.id]);
}
});
this.calendar.render();
This works fine. After the initial render, only initiallyVisible events are displayed. Using checkboxes I can toggle visibility per event type, which almost works as expected. Only the colors don't show up as intended. Using the standard theme, the bullets in dayGridMonth view, are displayed in the configured color. Other than that, events are displayed in the default colors, seemingly ignoring the textColor and backgroundColor of the event source.
Did I miss something in the documentation or is there something obvious I'm doing wrong?
I'm new to React Native and I'm using this repository for the TabBar.
Am I able to change some styles? By default the bubble background is blue and I want to change it to something else.
In the index.js under node_modules/react-native-fluidbottomnavigation the backgroundColor is defined as #4C53DD.
Am I able to change it from the point I am using the TabBar?
This is my NavBar:
This is my code in App.js:
<TabBar
onPress={tabIndex => {
console.log(tabIndex);
curTab = tabIndex;
}}
values={[
{
title: 'requests',
image: require('./assets/requests.png'),
tintColor: 'red',
},
{
title: 'requests',
image: require('./assets/requests.png'),
tintColor: 'blue',
},
{
title: 'events',
image: require('./assets/events.png'),
default: true,
tintColor: 'green',
},
{
title: 'members',
image: require('./assets/members.png'),
tintColor: 'orange',
},
{
title: 'account',
image: require('./assets/account.png'),
tintColor: 'yellow',
},
]}
/>
This tintColor doesn't change the background color as you can see in the picture. I want that blue circle to be another color.
There is the property tintColor that you can use for both TabBar and every item like this:
import TabBar, { iconTypes } from "react-native-fluidbottomnavigation";
<TabBar
iconStyle={{ width: 50, height: 50 }}
// CHANGE TINT COLOR HERE ---------------
tintColor="red" // Change tint color here
// --------------------------------------
onPress={(tabIndex) => {
console.warn(tabIndex);
}}
isRtl={ true }
iconSize={25}
values={[
{ title: "Home", icon: "alarm", tintColor: curTab == 0 ? "red" : "blue", default: true, isIcon: true, iconType: iconTypes.MaterialIcons },
{ title: "Home1", tintColor: curTab == 1 ? "red" : "blue", },
{ title: "Home2", tintColor: curTab == 2 ? "red" : "blue", },
{ title: "Home3", tintColor: curTab == 3 ? "red" : "blue", },
{ title: "Home4", tintColor: curTab == 4 ? "red" : "blue", },
]}
/>
If you read more carefully my answer and the README at the repo, then you'll see that tintColor does not only apply to tab items but also at the TabBar component itself. So, if you set <TabBat tintColor="red" ... you'll have red color for the bubble like this:
First get a fork form this, then get a clone, do the necessary changes and push it.
All good now you can install it to your app
npm install --save <git-url-of-your-fork>
I am having a problem with ngStyle after updating to angular 7. In angular 5 its working fine.
Using ngStyle I am dynamically applying style with Css grid.
but dont know why 'grid-column': '1 / span 2' is not working.
here is my code
<div class="widthHeight100"
[ngStyle]="getStyleForGroup(group)">
<div *ngFor="let subGroup of group?.childs"
[ngStyle]="getStyleForSubGroup(subGroup)">
In typescript
Grid container:
getStyleForGroup(mdg: MdgSimple) {
let style: any = {
'width': '100%',
'height': '100%'
};
if (!isNullOrUndefined(mdg)) {
if (!isNullOrUndefined(mdg.childs)) {
if (mdg.childs.length > 0) {
style = {
'display': 'grid',
'grid-template-rows': this.getGridTemplateCount(mdg.childs, true),
'grid-template-columns': this.getGridTemplateCount(mdg.childs, false),
'grid-column-gap': '4px',
'grid-row-gap': '4px',
'justify-items': 'start',
'align-items': 'start',
'padding': '5px'
};
}
}
}
return style;
}
Childs:
getStyleForSubGroup(mdsg: MdsgSimple) {
let style: any = {
'width': '100%',
'height': '100%'
};
if (!isNullOrUndefined(mdsg) && !isNullOrUndefined(mdsg.layout)) {
style = {
'grid-row': this.getCssRowInfo(mdsg),
'grid-column': this.getCssColumnInfo(mdsg),
'height': this.getHeight(mdsg),
'width': this.getWidth(mdsg),
'min-width': this.getMinWidth(mdsg),
'max-width': this.getMaxWidth(mdsg),
'min-height': this.getMinHeight(mdsg),
'max-height': this.getMaxHeight(mdsg),
};
}
return style;
}
But controls are overlapping each other. I have checked using chrome css element inspector grid area showing unsafe.
But its all working fine in angular 5 version.
example 1 / span 2 also not working
here is screen shot for error.
Any suggestion please ?
I have the exact same issue. ngStyle is replacing this:
{
'grid-column': (width > 1 ? column + ' / ' + (column + width) : column + ''),
'grid-row': '' + row
}
with this:
style="grid-area: 1 / unsafe / auto / unsafe
when width > 1
HTML
<p [ngStyle]="myStyles">
Hello World!
</p>
TS
myStyles = {
'color': 'red',
'font-size': '20px',
'font-weight': 'bold'
}
I just write very basic code, Try this I hope it'll help you out. Thanks
I'm creating a skills chart in a React component, where each bar starts with a short width and then it expands to a specified width after 0.5 second. The width is related to the skill level, defined in the following array:
const skills = [
{ skillName: 'JavaScript', level: 10, color: 'bca538' },
{ skillName: 'HTML', level: 9, color: 'af4336' },
{ skillName: 'CSS', level: 9, color: '2f81b7' },
]
The chart is represented in the following code:
<div className="chart__bars">
{skills.map((skill, index) => {
const { skillName, level, color } = skill
const { scale } = this.state
return (
<div
className={'chart__bars__item'}
key={skillName}
style={{
background: `#${color}`,
height: `${(100 / skills.length) * (index + 1)}%`,
width: `${scale ? level * 10 : 30}%`,
zIndex: skills.length - index,
}}
>
<h4
style={{
opacity: `${scale ? 1 : 0}`,
}}
>
{skillName}
</h4>
</div>
)
})}
</div>
After the component is mounted, it triggers a state change after 0.5 second, which should then expand each bar (logic for this is inside the style property in the code above). Here's the initial state:
state = {
scale: false,
}
And here's where I change it:
componentDidMount() {
setInterval(() => {
this.setState({ scale: true })
}, 500)
}
It works fine on the browser, but not on mobile. Using the devtools I can see the width being updated, but it won't expand. If I uncheck the tick box for the width, and then check it again, then the width expands (which should happen automatically).
The working example is on my website: https://marcelcruz.io.
Any thoughts would be much appreciated!
Thanks.