react-custom-scrollbars can't get styling to work - css

I'm relative new to react but I'm trying to use a common custom scrollbar but I can't seem to get the styling to work, I also submitted this as an issue on github but maybe somebody here has the answer.
Using react-custom-scrollbars v4.0.0; React v15.1.0; Redux v3.5.2
So I've been trying to add my own styling to the thumb and track but I can't seem to get it to work. I figured out that you need to add the complete styling (I did see this is fixed in 4.0.1) but when I try to set a different color to the thumb it doesn't style the actual thumb but just places a 'new' static thumb in that color and the actual thumb that is moving isn't colored, what am I doing wrong?
<Scrollbars
autoHide={false}
autoHeight={true}
autoHeightMin={500}
autoHeightMax={600}
renderThumbVertical={props => < div {...props} className="thumb-vertical"/>}
renderTrackVertical={props => < div {...props} className="track-vertical"/>}>
// content
</Scrollbars >
.thumb-vertical {
position: relative;
display: block;
width: 100px;
height: 100px;
cursor: pointer;
border-radius: inherit;
background-color: #d9534f;
}
.track-vertical {
position: absolute;
width: 6px;
display: block!important;
right: 2px;
bottom: 2px;
top: 2px;
border-radius: 3px;
}

For the one that are struggling to figure out how to make the customization work. Know as it's mentioned in this question, you need to provide the base styling.
You can find how here https://stackoverflow.com/a/54973078/7668448
Or here https://github.com/malte-wessel/react-custom-scrollbars/issues/208
Hope this is helpful.

Related

Distorted css Top for Safari

Currently I'm trying to implement some generic tooltips with no use of javascript (based only on css). For that I use a wrapper div with a wrapper css class and the tooltip class that has certain display attributes along with some margin-top and margin-left values to leave space for the hovered element.
It works on Chrome and Firefox, but in Safari the top value seems to be multiplied by the window scrolling putting way below the tooltip.
Does anyone has an idea of the workaround required for Safari?
The css classes:
.generic-tooltiptext {
visibility: hidden;
background-color: #333;
color: #fff;
border: solid thin #000;
text-align: center;
border-radius: 4px;
padding: 0px 5px;
margin-top: 20px;
margin-left: 20px;
position: absolute;
z-index: 1;
}
.generic-tooltip:hover .generic-tooltiptext {
visibility: visible;
transition-delay:0.75s;
}
This interacts with a react component:
interface GenericTooltip{
style?: CSSProperties;
text: string
}
export const GenericTooltip : React.FC<GenericTooltip> = ({style, text, children}) => {
return <div
style={style}
className="generic-tooltip">
<div className="generic-tooltiptext">
{text}
</div>
{children}
</div>
}
Just found out the problem doesn't have to do with margin: if I set margin to 0 the problem keeps appearing.
Changed the code to:
.generic-tooltiptext {
display: none;
/*--------------------*/
.generic-tooltip:hover .generic-tooltiptext {
display: block;
On the other hand, if I use display none / block as mechanism for conditional display, this "top margin" problem get's to be resolved... although the time lapse for the effect is taken out.
So there's some curious behaviour of visibility field within safari.

Change Checkbox Size in Angular Material Selection List

Is it possible to change the size of the checkbox in an Angular Material Selection List? I've tried changing the size of the mat-pseudo-checkbox in CSS but that results in the checkmark not being placed properly:
mat-pseudo-checkbox {
height: 10px;
width: 10px;
}
Is there another selector that I need to adjust to correct this?
With Angular 7 I succeeded with:
mat-checkbox ::ng-deep .mat-checkbox-inner-container {width: 30px;height: 30px;}
Yes, the checkmark is just a pseudo element within the checkbox. You can override it's styles the same way as with the box itself.
For your case with the 10px box size the following CSS would work (for other sizes the values need to be adjusted):
.mat-pseudo-checkbox-checked::after {
top: 0px;
left: -1px;
width: 6px;
height: 2px;
}
I was facing the similar issue and tried the below CSS, which seems to work in Angular 8:
::ng-deep .mat-checkbox .mat-checkbox-inner-container {
width: 30px;
height: 30px;
}
I have added a sample width and height; please customize these to what you need.

CSS Styling of a tooltip in a TH tag

I am trying to style a tooltip in a jqgrid in a page delivered through AngularJS. Essentially in other places in the app I am using the Bootstrap tooltip styling. I'm struggling to get this to work in the AngularJS part (possibly to do with the initialisation not running in the right place). I thought I might change tack and try to emulate the styling instead.
I have started and got a very rough and ready bit of styling almost 'working' as a PoC (it needs a lot of work buit I want to see if it is possible before doing that work! It is here in the Fiddle
I have 2 questions I wondered if anyone could help me with before I try to tidy it up
1) Is there a way to stop the normal tooltip appearing as well (I thought I was styling the tooltip but I seem to be adding a second one!)
2) Is there a way to make it 'float'. In the fiddle it is not obvious but in the jqgrid where the th element is more structured (bounded) the css tooltip I have created is contained in the th element and mainly hidden (as it is too large for the element).
I'm thinking this is a CSS question more than a jqgrid question so just in case I'll point out I can't really use the span technique posted in a few answers.
Thanks.
The code in the fiddle is
<table>
<th title="This is a tooltip">John</th>
<th title="so is this">Albert</th>
<th title="And This">Spencer</th>
</table>
th[title]:hover:after {
content: attr(title);
background-color: #000;
color: #fff;
width: 120px;
text-align: center;
border-radius: 6px;
padding: 5px 0;
z-index: 1;
left: 50%;
top: 100%;
position: absolute;
margin-left: -60px;
margin-left: -5px;
border-width: 5px;
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
Yes. All you need to do is change from title attribute to data-title so it would be: content: attr(data-title); Then also update the th title attribute accordingly.

PIE.htc not working in IE8

I've searched through the existing threads about PIE.htc not working in IE8 but couldn't find a good resolution -
I've tried applying it to every single element on my page that uses an IE8-incompatible CSS3 attribute and I can't get anything to happen. IE8 doesn't tell me that the path is wrong and PIE.htc sits in the same folder as the page which calls it. Here is a random css example from an element which pops up when the user hovers over a graphic:
CSS:
.info_bubble {
-webkit-border-radius: 5px;
padding: 8px 8px 16px 8px;
background-color: white;
-moz-border-radius: 5px;
behavior: url(PIE.htc);
border-radius: 5px;
position: absolute;
margin-top: 1em;
display: none;
bottom: 2.5em;
left: 3.5%;
width: 80%;
height: 0;
}
It is meant to have rounded edges but it still refuses to work in IE8.
According to this link, you should try to set z-index and position:relative to make the border-radius work IE8:
z-index: 0;
position: relative;
Hope this helps!
So I figured it out - Sort of.
It works if I use another version of PIE.htc. I have no idea why, but I guess for anyone else stuck in this situation, try a different version.
Edit: I was trying to use PIE 2.0 beta 1. I resolved the issue by downgrading to PIE 1.0.0.
The usual problem is that the path in the behavior rule is not correct.
As pointed out in the documentation http://css3pie.com/documentation/getting-started/ the path is relative to the HTML file not the CSS.

input type="range" leaves black border when clicked on ipad

I have a on my page and I have styled it with css.
input[type=range] {
-webkit-appearance: none;
background-color: #1b2b66;
width: 300px;
height: 3px;
position: relative;
top: -9px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-image: url("../images/slider.png");
background-size: 100% auto;
border: 0px;
width: 35px;
height: 35px;
}
The issues is: on the ipad when the user clicks the slider thumb a black border surrounds the image. How do I hide this?
You need to use modernizr to perform a feature detect.
<script src="modernizr.js"></script>
<script>Modernizr.load({
test: Modernizr.inputtypes.range,
nope: ['use your css to define the range input format']
});
</script>
This test looks for support. When it fails, it loads your css to format that input. If a browser has support for this tag, which means there will be a standard way it renders that control and your css will be redundant. In this case, we usually just let the browser ignore our css settings.
If you really want to override the default css settings. Try using !important.
border: 0 !important;
I figured out my issue. First of all thank you everyone for the help.
I forgot to set the background-color: property. I set it to #FFF and now have the desired effect.

Resources