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
Related
I'm working on a project, and I'm using react-google-charts to chart my data. The problem that I am having is that no matter what I do, I can't seem to get rid of the extra white space below my control panel. Does anyone know how to get rid of this? I would really appreciate any help or advice on how to correct this. Thank you!
<div>
<h2 className="graphname">Sales</h2>
{summary.dailySales.length === 0 ? (
<MessageBox>No Orders</MessageBox>
) : (
<Chart
width="100%"
height="400px"
chartType="AreaChart"
loader={<div>Loading Chart</div>}
data={[
['Date', 'Sales'],
...summary.dailySales.map((x) => [new Date(x._id), x.sales]),
]}
options={{
chartArea: {
left: '10%',
right: '10%',
}
}}
chartPackages={["corechart", "controls"]}
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "LineChart",
chartOptions: {
chartArea: { width: "90%",
height: "20%"
},
hAxis: { baselineColor: "none" }
}
}
},
controlPosition: "bottom",
}
]}
></Chart>
)}
</div>
The slider I am building have the active slider bigger than the others. I managed to make it work without the animation with flkty.reposition(). However, I am trying now to add the animation where the next slide grows in and the active decrease out. For The animation I am using GSAP.
The issue I am facing is to overwrite the left property with gsap so that it continuous animate. As of now, the left property (controlled by Flickity) does not take into account the final size (controlled by GSAP) of the selected slide.
https://codepen.io/stefanomonteiro/pen/VwzwjLw?editors=0010
As the left property of each slide is controlled by Flickity, we could use margin-left with a minus value as an alternative property to pull the selected slide to the left. I know margin is not a good property to animate but it works in this case without digging too deep into the Flickity core.
Here is the GSAP code:
gsap.to(slides, {
duration: 1,
width: "220px",
height: "336px"
});
gsap.to(selectedSlide, {
duration: 1,
marginLeft: "-248px", // the empty space calculated by newWidth - oldWidth
width: "468px",
height: "630px",
onComplete: () => {
// once all animations have been settled, we reset the margin
gsap.set(selectedSlide, { marginLeft: "" });
// and tell Flickity to update
flkty.resize();
flkty.reposition();
}
});
And the snippets
const animate = () => {
const flkty = Flickity.data(".carousel");
const selectedSlide = flkty.selectedElement;
const slides = flkty.getCellElements();
// remove the selected slides
slides.splice(flkty.selectedIndex, 1);
gsap.to(slides, {
duration: 1,
width: "220px",
height: "336px"
});
gsap.to(selectedSlide, {
duration: 1,
marginLeft: "-248px", // the empty space calculated by newWidth - oldWidth
width: "468px",
height: "630px",
onComplete: () => {
// once all animations have been settled, we reset the margin
gsap.set(selectedSlide, {
marginLeft: ""
});
// and tell Flickity to update
flkty.resize();
flkty.reposition();
}
});
};
new Flickity(".carousel", {
cellAlign: "right",
wrapAround: true,
percentPosition: false,
on: {
ready: () => animate()
}
});
const nextButton = document.querySelector(".flickity-button.next");
nextButton.addEventListener("click", () => animate());
/* external css: flickity.css */
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.carousel {
background: #EEE;
}
.carousel-cell {
width: 220px;
height: 336px;
margin-right: 20px;
background: #8C8;
border-radius: 5px;
counter-increment: carousel-cell;
}
.carousel-cell.is-selected {
width: 468px;
height: 630px;
z-index: 1;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: counter(carousel-cell);
line-height: 200px;
font-size: 80px;
color: white;
}
<link href="https://npmcdn.com/flickity#2/dist/flickity.css" rel="stylesheet" />
<script src="https://unpkg.co/gsap#3/dist/gsap.min.js"></script>
<script src="https://npmcdn.com/flickity#2/dist/flickity.pkgd.js"></script>
<h1>Flickity - wrapAround</h1>
<!-- Flickity HTML init -->
<div class="carousel">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
And the Codepen
You can also notice that we have to wait until the animation is finished until we perform the next click, otherwise, it would mess up the whole process. This is predictable. Hence, I personally will try not to manipulate this Flickity slider for this kind of animation. Just want to give you a solution, anyway.
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} />;
I was looking through the office fabric documentation, there seems to be clear information on how to style the items/content inside the DetailsList (https://developer.microsoft.com/en-us/fabric#/components/detailslist/customitemcolumns has an example) but no information on how to style the column headers (or if it's possible).
It seems like a pretty common use case (I'm trying to center my column headers instead of having them left aligned and make them larger), so not sure if I'm just missing something?
One option to customize column headers would be to override the rendering of headers via onRenderDetailsHeader event and then render header tooltip with a custom styling as demonstrated below
<DetailsList
items={sortedItems as any[]}
setKey="set"
columns={columns}
onRenderDetailsHeader={this.renderDetailsHeader}
/>
private renderDetailsHeader(detailsHeaderProps: IDetailsHeaderProps) {
return (
<DetailsHeader
{...detailsHeaderProps}
onRenderColumnHeaderTooltip={this.renderCustomHeaderTooltip}
/>
);
}
private renderCustomHeaderTooltip(tooltipHostProps: ITooltipHostProps) {
return (
<span
style={{
display: "flex",
fontFamily: "Tahoma",
fontSize: "14px",
justifyContent: "center",
}}
>
{tooltipHostProps.children}
</span>
);
}
Demo
You can style the columns headers with the IDetailsColumnStyles interface.
Example:
...
const headerStyle: Partial<IDetailsColumnStyles> = {
cellTitle: {
color: "#c00"
}
}
const columns: IColumn[] = [
{ styles: headerStyle, key: 'name', name: 'Name', fieldName: 'name', minWidth: 120 },
...
Look at the definition of IDetailsColumnStyles to see what can be styled.
The IColumn interface has a property named headerClassName which can be used to style the column header. Example:
/* CSS */
.headerClass > span {
/* right aligned header should have padding */
padding-right: 15px;
}
.headerClass span {
/* bolder font */
font-weight: 900;
/* Right Align the column header */
justify-content: flex-end;
text-align: right;
/* green color */
color: green;
/* background color */
background: pink;
}
//JSX
const columns = [
{
key: 'column1',
name: 'Name',
fieldName: 'name',
minWidth: 100,
maxWidth: 200,
isResizable: true,
heaerClassName: 'headerClass',
},
{
key: 'column2',
name: 'Value',
fieldName: 'value',
minWidth: 100,
maxWidth: 200,
isResizable: true,
},
];
<DetailsList
items={items}
columns={columns}
setKey='set'
/>
Demo
I have created a button, I need some response from button like, on touch of the button, the button focus should enable like change in background color. How can I do that?
My code is,
View:
<Button class="button" id="proceedButton" onClick="openQuestionnaire">Proceed</Button>
Style:
".button":{
width: '50%',
top: '25dp',
borderRadius: 8,
borderWidth: 1,
borderColor: '#808080',
backgroundGradient: {
type: "linear",
startPoint: { x: "0%", y:"0%"},
endPoint: { x: "0%", y:"100%"},
colors: [
{ color: "#4F94CD", offset: 0.0 },
{ color: "#4F94CD", offset: 1.0 }
]
}
}
Controller:
$.proceedButton.addEventListener('touchstart', function() {
$.proceedButton.isFocused = true;
});
$.proceedButton.addEventListener('touchend', function() {
$.proceedButton.isFocused = false;
});
The above code is not working. Just I need to slight chage in background color while touch of the button.
Any solution!!
Use this property and pass colour code
backgroundSelectedColor : "RED"
focusable must be true for normal views.
for more you can refer this http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Button-property-backgroundSelectedColor
I hope it may help you,
Alloy xml would be like this
<Button class="button" id="proceedButton" onClick="openQuestionnaire">Proceed</Button>
Then the button property would be like this
".button":{
width: '50%',
top: '25dp',
borderRadius: 8,
borderWidth: 1,
borderColor: '#808080',
backgroundSelectedColor : "red",
backgroundSelectedImage : "/my_image.png",
backgroundGradient: {
type: "linear",
startPoint: { x: "0%", y:"0%"},
endPoint: { x: "0%", y:"100%"},
colors: [
{ color: "#4F94CD", offset: 0.0 },
{ color: "#4F94CD", offset: 1.0 }
]
}
}
You can set your selected image or background color on touch focus.
You wont need the controller code you have written in the controller.
Also for some object you can also have selectedColor.
You can also set backgroundFocusedImage,
As #CodeForFun mentioned you can use backgroundSelectedColor property of button.
Also following are all the states which can be used by a button in Titanium.
Disabled : backgroundDisabledImage and backgroundDisabledColor
Normal : backgroundImage and backgroundColor
Focus : backgroundFocusedImage and backgroundFocusedColor
Selected : backgroundSelectedImage and backgroundSelectedColor
Hope this would be helpful.
Edit : An example of usage:
View :
<Button class="button" >Proceed</Button>
TSS :
".button":{
width: '50%',
top: '25dp',
backgroundSelectedColor : "#4F94CD" //usage
}