I'm trying to use the color which is in props for the linear-gradient,Something like this
const minColor = this.props.data.myresources ? this.props.data.myresources['min'].color : this.props.data.gradeColor;
const maxColor = this.props.data.myresources ? this.props.data.myresources['max'].color : this.props.data.gradeColor;
<div className="filler"
style={{
width: `${this.props.data.maxGrd}%`,
backgroundImage: 'linear-gradient(to right, `${minColor}`,`${maxColor})'
}}>
</div>
It show a empty bar with no color, where as I'm getting the color values in the const, is there any way to implement this?
There are two cases in which you are wrong,
1. Use proper gradient styling syntax according to react, ex:
Replace
'linear-gradient(to right, `${minColor}`,`${maxColor})'
By
`linear-gradient(to right, ${minColor} , ${maxColor})`
You didn't provide height to div, So its not showing anything. Or you can provide text inside div, then it will automatically take height for div according to text inside div height.
I am attaching a code sandbox link here, that is a working example where you can identify your mistakes.
Link to see working example
Related
By default MUI adds, 65px of right padding to the outlined Autocomplete box. However, I would like to change the right padding to 50px as per my usecases. I am trying to override the right padding but no luck. Here is my sandbox where I tried changing the right padding of the Autocomplete input box - https://codesandbox.io/s/sizes-demo-material-ui-forked-95rvqw
Also attaching the screenshots of the Autocomplete box whose padding needs to be changed.
Can someone please suggest how to override the default right padding of the Autocomplete box ?
Simply change your sx attribute like this:
sx={{
"& .MuiOutlinedInput-root": {
paddingRight: "10px!important",
},
}}
Explanation:
Your approach is right, but there are some problems that I'll try to correct step by step.
First of all, the & sign needs to be the first letter of the string followed by a space. For example:
"& .MuiAutocomplete-hasPopupIcon"
Second, You should target the classes one by one, like this:
sx={{
"& .MuiAutocomplete-hasPopupIcon": {
paddingRight: "50px"
},
"& .MuiAutocomplete-hasClearIcon":{
paddingRight: "50px"
},
"& .MuiAutocomplete-inputRoot":{
paddingRight: "50px"
},
}}
Third, You only need to select .MuiOutlinedInput-root class for your desired change.
And lastly, because (in this case) the classes in the nested component have higher specificity, You need to add !important keyword to finish the work.
See the MUI Documentations on how to customize nested components using the sx prop
This padding (65px) exists for a good reason - in order to not allow input content to overflow the clear button at the end of the input. You can pass disableClearable prop to your Autocomplete component in order to have padding 6px from all sides but you will lose the clear button. Otherwise, just overriding the existing padding will lead to collisions between content and the clear button in UI.
<Autocomplete
disableClearable
multiple
...other props
MuiAutocomplete: {
root: {
"&.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-
root": {
paddingRight: 0,
},
}
}
I am having difficulties copying properties from one fram and create a similar one (See picture below). The picture to the left, flower-ish, Is the properties I want. I wanna add this to the image to the right ( blue one). I have tried using the google chrome edit component but I can't figure it out.
I only want the image to the right to have the same properties (size and frame) as the left image.
The URL to this scenario
Looking your page, i think you should do something like this (I'm using jQuery).
$(document).ready(function(){
var img = $('.attachment-shop_catalog');
var width = img.width();
var height = img.height();
//give an id or a class to identify your target img, i'm using id target-img
$('#target-img').css('width',width+'px');
$('#target-img').css('height',height+'px');
});
I have the following goal: I wanted to place a heart within a container - scaled and positioned.
First I wanted to use an icon font but I've discarded the idea. Second option to load the heart as an image I've discarded too - I have to use the heart a few times on my recent project and I wanted to save http requests. Therefore I wanted to go with the SVG as a background-image option. But the problem is, somehow I am unable to tame that beast. I've built a sample pen to illustrate the issues and parts I don't understand.
The un-base64-encoded optimized SVG looks like that:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960"><polygon points="756,168.4 593.5,168.4 480,258.3 366.5,168.4 204,168.4 30,349 480,791.6 930,349"/></svg>
The sample code you can find from my codepen.
Basically I have three related questions (normally I prefer to post separate issues but those three questions are basically way too connected therefore I hope it's ok):
The sizing: .heart1 has a width and height of 100% and everything displays fine. If you use suiting px values all is fine too but if you try to enter ems the heart isn't shown anymore. Why?
The green box: .heart1 has a width of 100% but if you drag the browser window bigger the heart only grows to some point and then only the green box keeps on growing. I thought SVGs are more or less able to scale to "infinity"?
The yellow box: My basic goal was to make the heart a bit smaller than the width of the yellow box, center it horizontally within and give the heart some top margin. Width and height of .heart2 are set to 75%. But somehow I am unable to position the heart within the box neither with top, left and/or right properties nor in background:url with "no-repeat center 2em" e.g. . It just doesn't react.
I use a block of code shown below to fit svg in a DIV. It works best in a DIV with the same width/height. As you can see below it uses getBBox() to change its viewBox, plus changes the svg width/height values.
It works cross browser: IE10+/CH31/FF23
var bb=mySVG.getBBox()
var bbw=bb.width
var bbh=bb.height
//--use greater of bbw vs bbh--
if(bbw>=bbh)
var factor=bbw/divWH
else
var factor=bbh/divWH
var vbWH=divWH*factor
var vbX=(bbw-vbWH)/2
var vbY=(bbh-vbWH)/2
//---IE/CH---
if(!isFF)
{
var ViewBox=mySVG.viewBox.baseVal
ViewBox.x=vbX
ViewBox.y=vbY
ViewBox.width=vbWH
ViewBox.height=vbWH
}
else
mySVG.setAttribute("viewBox",vbX+" "+vbY+" "+vbW+" "+vbH)
//--requred for FF/CH---
if(!isIE)
{
mySVG.setAttribute("width","100%")
mySVG.setAttribute("height","100%")
}
else
{
mySVG.removeAttribute("width")
mySVG.removeAttribute("height")
}
The svg is centered both left/right and top/bottom within the DIV, plus maintains its aspect ratio. This should help get you started.
I found this jsfiddle online that does exactly what I've been looking for... the problem is is that it creates the visual using pure JS. I wanted to put that inside a div so I could control it... Like defining exact placement, margins, adding opacity, etc...
Here's the jsfiddle: http://jsfiddle.net/7jHPv/52/
Right now "I'm" placing the visual on the page through the JS code itself, wondering how I can "load it" inside that container div.
So, taking the example on the jsfiddle, instead of being at the position given by the code, make it follow the margins I attributed to the container div... by putting it inside the div.
I see this:
return {
path: path
};
Can I change the return there to "add it" to the container div? Or something...
Thanks!
instead of
var paper = new Raphael(100, 300, 0, 100, side);
make the definition
var paper = new Raphael("container", 100, side);
where container is the name of your div. From there you can control the div's location, margins/padding and whatever else
i don't need any calender, datepicker, or timepicker.. i just want to know...
Can somebody please tell me... how the divs come to appear when user clicks on some specific text fields...
see on this link..
http://pttimeselect.sourceforge.net/example/index.html
i dont' want to show calendar or time picker.. but may be some images with some details.. that is not a part of question.. i just want to show some div with "blabla" data...
Thank you
Oh.. i found it..
I got it.. in jquery i found a method of "offset();" that further give me its' left and top values..
.. Thank You
ALHAMDULILLAH
Well, the best way I can think of is to use JQuery and generate the div on the fly when your element is clicked.
The div should be absolutely positioned and set to display: none (if you want the slide down effect). This is a quick sample I made for showing the div:
$('.moreInfo').click(function(){
var data = "Whatever data you want to show in the div";
var div = $('<div />').text(data)
.css('display', 'none')
.css('position', 'absolute')
.css('top', $(this).outerHeight() + $(this).offset().top)
.css('left', $(this).position().left)
.css('width', '200px')
.css('height', '300px')
.css('border', '1px solid #000');
$(this).after(div);
div.slideDown(500);
});
(The CSS may as well be a separate CSS-rule and modified however you want, except for the 'top' and 'left' attributes)
This opens a new div for every click, so you probably want to check if the div already exists and then remove it.
The easiest way would be to define functions for the input field on focus and blur:
<input id="sampleInput" type="text" onfocus="showDiv()" onblur="hideDiv()" />
<div id="content" style="position:absolute;top:0;left:0;visible:false;">...</div>
EDIT: Here's some psuedocode to get you started
//This will give you the distance from the top of the page to the input box
inputTop = inputElement.offsetTop;
//This will give yout he height of the input element
inputHeight = inputElement.offsetHeight;
//Now set the top of the content div to be the sum of the offsets:
contentDiv.style.top = inputTop + inputHeight;
//Now show the content div
contentDiv.style.visible = "true";