im using recharts for my graph, i added a cartesian grid, and YAxis with ticks.
but recharts adds additional top and bottom lines.
i tried to add css to my styles file as stated here:
https://github.com/recharts/recharts/issues/861
but im not sure how to pass those styles to recharts , and is it to the yAxis or to the cartesian grid.
tickLine={false} - didnt help
axisLine={false} on <xAxis ... /> - also didnt help
also saw somewhere:
.wrapper {
background-color: aliceblue;
width: 70%;
height: 70%;
box-shadow: 20px 8px 20px grey;
transition: box-shadow .2s ease-in;
display:block;
margin: 20px auto;
}
.wrapper:hover{
box-shadow: 30px 8px 30px grey;
transition: box-shadow .2s ease-in;
}
but it also didnt help , not sure how to apply those styles to recharts.
my cartesian grid:
<CartesianGrid class={styles.horizontal} horizontal={true} vertical={false} />
lines image:
so, any idea how ?
thnx alot
.recharts-wrapper .recharts-cartesian-grid-horizontal line:first-child,
.recharts-wrapper .recharts-cartesian-grid-horizontal line:last-child,
.recharts-wrapper .recharts-cartesian-grid-vertical line:first-child,
.recharts-wrapper .recharts-cartesian-grid-vertical line:last-child {
stroke-opacity: 0 !important;
}
Related
I have a Google invisible Recaptcha that auto positions itself at the bottom right corner of the page.
The footer is now covering this so I want to relocate it. When I inspect its styles I see:
element.style {
width: 256px;
height: 60px;
display: block;
transition: right 0.3s ease 0s;
position: fixed;
bottom: 14px;
right: -186px;
box-shadow: grey 0px 0px 5px;
border-radius: 2px;
overflow: hidden;
}
It looks like the bottom value needs to be changed to unset. When I change this in Chrome it positions correctly.
I have included the following in my style tag however it does not make any difference.
.grecaptcha-badge
bottom: unset
I'm trying to have a button that changes to a gradient background when active. The buttons have an image + text. The image is offset 5px from the left margin. The problem is that when the active state is invoked the 5px padding is excluded from the gradient.
Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Button Testing</title>
<style>
.controls {
display: inline;
margin-left: 10px;
}
.button {
padding: 5px 5px 5px 25px;
border: 2px solid #666666;
color: #000000;
text-decoration: none;
/* background: #dcdcdc url(static/16x16/arrow-black.gif) no-repeat scroll 5px center; */
background: rgba(230, 230, 230, 0.75) url(static/16x16/arrow-black.gif) no-repeat scroll 5px center;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.button:hover, .button:focus {
background: rgba(200, 200, 200, 1.0) url(static/16x16/arrow-color.png) no-repeat scroll 5px center;
border: 2px solid #3013ED;
}
.button:active {
background: rgba(159, 245, 245, 1.0) no-repeat scroll 5px center;
background-image: url('static/16x16/arrow-color.png'), -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);
border: 2px solid #3013ED;
}
</style>
</head>
<body>
<button id="scale-button" class="controls button">Scale it</button>
</body>
</html>
The button looks like this in normal state:
When I hover it is fine and looks like this:
But when it's active I end up with the padding excluded from the gradient background.
Is there some way to adjust the padding so that the gradient background doesn't exclude the leftmost pixels? If I have to adjust the image so that no padding is required I can do that, but I'm hoping there is a better way.
Here are the two images I for the arrows: , . They're both 16x16 images.
If you alter your code in the following fashion it will remove that offset. Change:
.button:active {
background: rgba(159, 245, 245, 1.0) no-repeat scroll 5px center;
background-image: url('static/16x16/arrow-color.png'), -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);
border: 2px solid #3013ED;
}
to this:
.button:active {
background: rgba(159, 245, 245, 1.0) no-repeat scroll 0px center;
background-image: url('static/16x16/arrow-color.png'), -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);
border: 2px solid #3013ED;
}
Where the only change I made was on the background declaration from 5px to 0px
I ended up finding my answer on stackoverflow. Mine is a duplicate. The key answer is that there can be multiple background-position specifications that correspond to the multiple background images. Not to duplicate the entire post, but:
background-position: FIRST_IMAGE_POSITION, SECOND_IMAGE_POSITION;
Here's exactly what I was looking for:
How to position a background-image using an offset but not the linear gradient
I want to be able to make a 2px white border with an 8px tan border around an image that automatically changes with the size of the image.
article.post .wp-caption img, article.page .wp-caption img {
background: none repeat scroll 0 0 transparent;
border: 2px solid white;
margin: 0;
padding: 0;
}
If you want to look at the site here is the link:
http://www.metnews.org/news/aurora-remembers-holmes-victims/
border: 2px solid white;
outline: 8px solid yellow;
The outline property acts like an outer border.
You can also use padding to get the effect of a second border. The part of changing size according to the image, I think you should explain a little better what you are trying to achieve.
padding: 2px;
background: white;
border: 8px solid #000;
Or box-shadow - you can have as many borders as you want. Poor 'old IE8 and less won't get the pretty styles :(.
http://jsfiddle.net/ryanwheale/KmnUB/2/
img {
/* Make sure to add vendor prefixes */
box-shadow: 0 0 2px 2px white, 0 0 0px 10px tan;
}
I am getting a odd effect (currently in chrome). I have created my own overlay dialog box. which has a semi transparent background sitting on top of my website with a box on top of that. the top of the bar as you can see has a black background. The main part of the box is white thought.
Its not the easyist to see but it is annoying me.
The white is showing through from behind. (I know as if i change it to red it changes colour) Which you can see in the top right hand corner of the screenshots, just above the "X"
Both the header and the box has a border radius 3px
.blockUI .overlay {
background: #f00;
border-radius: 3px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
position: relative;
top: 20%;
text-align: inherit;
width: 600px;
z-index: 10009;
}
blockUI .overlay h1 {
background: #000;
border-bottom: 2px solid #F48421;
border-radius: 3px 3px 0 0;
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: -10px;
padding: 10px;
}
Since overflow: hidden; along with border-radius seems to cause some rendering inconsistencies in some engines (take a look at this), one should use border-radius on both the parent and the child elements to achieve rounded corners.
As you have noticed, you still get some wierd results with extra pixels "shining" through. Just reduce the border-radius of the child (or the other way round) to compensate this.
blockUI .overlay h1 {
border-radius: 2px 2px 0 0;
}
I had same problem. But I solved.
.blockUI .overlay {background:#000;}
and remake some!
You should try on the parent div:
-webkit-background-clip: padding-box;
Finally fixed this completely by adding this on parent and child divs.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;
what's the best way to programatically (using HTML, CSS, JavaScript, and/or PHP) round the corners of images?
I'm been playing with this CSS-only method:
http://maxvoltar.com/archive/rounded-corners-on-images-css-only
The key features of this method are:
wrapping the image into an element where you can round the borders and where you can set the wrapper element background as the desired image.
setting the actual image opacity to 0
floating the wrapper left so the image and wrapper line up.
here's the HTML:
<p style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg)">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg" alt="Dog" />
</p>
here's the CSS:
img {
vertical-align: bottom;
/*width:50px;
height:50px */ /*ideally would be able to alter these as needed*/
}
p {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
}
Unfortunately, this code fails when you re-size the images. Please compare the following 2 fiddles to see what I mean:
image NOT manually sized:
http://jsfiddle.net/trpeters1/wxXAn/1/
image set to 50px wide/50px height:
http://jsfiddle.net/trpeters1/wxXAn/2/
Is there a way to rescue this method if you want to preserve the ability to re-size the image width/height? Are there better ways than this method?
UPDATE
thanks to Tom (see below), this question is solved. The key to enabling re-sizing is to set BOTH the image and wrapper heights and widths to the same size. Please see this fiddle and compare with the one's above to see what I mean: http://jsfiddle.net/trpeters1/wxXAn/13/
Please note in this fiddle that the <p> AND <img> tags height and widths are BOTH set to 50px.
I managed to get it to work by using the following code
p {
float: left;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
background-size:50px 50px;
}
I added the background-size:50px 50px; tag and you then get the small dog with the rounded corners.
Hope this is what you are after.
Thanks