I am using a teaching bubble inside a coach mark, same as the example in here
enter link description here
How can I have the teaching bubble in white instead of blue?
You can pass in the styles prop to the TeachingBubbleContent that contain this object:
{
closeButton: {
color: 'red',
selectors: {
':hover': {
background: 'gainsboro',
color: 'red'
},
':active': {
background: 'darkGray',
color: 'red'
}
}
},
content: {
border: '1px solid black',
background: 'white',
},
headline: {
color: 'black'
},
subText: {
color: 'black'
}
}
Example here in this codepen: https://codepen.io/vitalius1/pen/xoEPzg.
The only thing thing you can't do easily is to change the Coachmark's drop color in a way that is still visible. You can try by passing color prop to it and specify white, but because there is no border or shadow around the drop all you'll see is the beacon animation. And if you try give it a border it won't look nice (see codepen) because of how the drop is constructed. Also, there is currently a bug in passing the beaconColorOne and beaconColorTwo props to change the beacon color that I am fixing right now :)
Hope that helps!
Related
I want to pass the colorModelData for rectangle shown below.
Requirement is: on click of button i want to open a popup. And inside popup want to display multiple number of circles with different colors. Using button can i create a popup which will give me list of colors? ALso list of color should be exposed from outside.
How can i do it?
Rectangle {
id: control
property var colorModelData: ["Red", "Green", "Blue"]
Button{
id: btn
width: 100
height: 100
onClicked: {
rect.visible = true
}
}
Rectangle{
id: rect
visible: false
width: 400
height: 300
color: "gray"
anchors.top: btn.bottom
GridView{
width: rect.width
height: rect.height
model: colorModelData
delegate: Column{
Rectangle {
width: 20
height: 20
radius: width/2
//color: colorModelData [..... getting error]
}
}
}
}
}
I tested your code and it works for me. So I assume the only part you're missing is the line you have commented out. Use this:
color: colorModelData[index]
I have a react-select component with a custom scrollbar that works in desktop browsers as expected, but on mobile the scrollbar defaults to browser values.
Referencing a similar github issue and a similar stackoverflow issue have not helped resolve this issue.
const styles = {
menu: provided => ({
...provided,
width: '100%',
height: '240px',
boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
overflowY: 'scroll',
'::-webkit-scrollbar-thumb': {
background: royal, // imported color string
height: '50px',
},
'::-webkit-scrollbar-thumb:hover': {
background: royal,
height: '50px',
},
'::-webkit-scrollbar-track': {
background: softGrey,
},
'::-webkit-scrollbar': {
width: '4px',
background: softGrey,
},
}),
menuList: () => ({
'::-webkit-scrollbar': {
width: '4px',
},
}),
}
<Select
placeholder={placeholder}
styles={styles}
onMenuOpen={onOpenHandler}
onMenuClose={onCloseHandler}
onChange={onChangeHandler}
onInputChange={() => {}}
controlShouldRenderValue
label={label}
value={value}
defaultValue={defaultValue}
options={options}
/>
The github references using menuList, but I found that using menu and menuList got me the desired style. I tried every variant of:
using !important
moving only to menuList
having in both menu and menuList
using react-select v2 (2.4.1) and v3 (3.2.0)
Apparently iOS 14 webkit doesn't support custom scrollbars anymore.
https://github.com/JedWatson/react-select/issues/4439#issuecomment-776297882
https://developer.apple.com/forums/thread/670065?answerId=654532022#654532022
I am currently trying to re-style a Fabric UI Button in React by changing its shape, background color and hovering color. I managed to change the first two, but i'm still having troubles in accessing the hover color, since the selectors property does not seem to work.
My code is the following:
import React, { Component, Props } from 'react';
import { PrimaryButton as FluentPrimaryButton, IButtonStyles, IStyle} from 'office-ui-fabric-react';
interface MyPrimaryButtonProps {
label?: string
}
const MyPrimaryButton = ({label}: MyPrimaryButtonProps) => {
const styles: IButtonStyles = {
root: [
{
fontSize: '16px',
background: '#525CA3 ',
border: '1px solid #525CA3',
borderRadius: '20px',
padding: '0px 30px',
height: '40px',
selectors: { // <---
':hover': { // <--- this part doesn't work.
backgroundColor: 'red' // <---
},
}
}
]
};
return (
<div>
<FluentPrimaryButton styles={styles} text={label} />
</div>
);
};
export default MyPrimaryButton;
I get a custom button, but still the hover color remains default blue, instead of switching to red.
You can change the styling of the button when hovered like this:
const btnStyles = {
rootHovered: {
backgroundColor: "red"
}
};
// ...
<FluentPrimaryButton text = {label} styles = {btnStyles} />;
{
xtype: 'textfield',
itemId: 'dueDate'
}
I have above code, I have to change the border colour of the textfield. So I tried to use Ext.getDom('dueDate'); to get the Dom element. Unfortunately it is returning null.
Try to use this code
border: 5,
style: {
borderColor: 'red',
borderStyle: 'solid'
}
You need to specify border color and style.
I'm making a website for school that involves a bunch of Google Visualizations. I can get them to work with the data I want, but I'm stuck customizing them. I have a very specific design I must follow, and it's not really working out at the moment.
The reason is that I don't know how to have two different styles on one element. For example :
legend: {textStyle: {color: '#d1dbbd', fontName: 'Century Gothic', fontSize: 15}},
legend: {position: 'bottom'},
This currently only positions the legend at the bottom. I'm trying to get these two in one line, but I don't know the proper syntax of the language (I've tried to find it online but to no avail. :( )
I've shuffled it around a few times like so
legend: {position: 'bottom'}, {textStyle: {color: '#d1dbbd', fontName: 'Century Gothic', fontSize: 15}},
or
legend: {position: 'bottom', {textStyle: {color: '#d1dbbd', fontName: 'Century Gothic', fontSize: 15}}},
Help ?
You are close with the format. You want one object with "position" and "textStyle" properties:
legend: {
position: 'bottom',
textStyle: {
color: '#d1dbbd',
fontName: 'Century Gothic',
fontSize: 15
}
}