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,
},
}
}
Related
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
How can I go about creating a form which pops up when the user clicks a button on a Jade template? I tried the following in HTML, which works:
http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/
Now to use this in my Node.js project would I need to create a separate Jade file for the form itself? That is what I tried and then I tried to display the form like this:
function div_show() {
alert("Test");
document.getElementById('abc').style.display = "block";
}
Unfortunately that does not work. What is the recommended approach for creating a pop up form in Jade? I am really confused with Jade and I can't seem to find a good tutorial for this, there are loads for HTML...
Thanks for the help!
Normally for this you would use:document.getElementById('abc').style.visibility="visible";
To hide your table use:document.getElementById('abc').style.visibility="hidden";
When using the 'style' attribute you are using plain css commands. Make sure your default div style settings have it 'hidden', if that is what you want.This display:block;visibility:hidden;' must exist in your default settings for that div style so the DOM has a clear path to what it is controlling. By itself 'display:block;' does not hide or make objects visible, it is mostly about the shape the div creates as a container for objects.
As an option you can use:
document.getElementById('abc').style.display="block";
To hide your table use:document.getElementById('abc').style.display="none";
For this you would set your div style settings to 'display:none;visibility:visible;.
In this case 'display="none"' removes the object from all display layers and could allow other objects to fill in it's space. When it is visible it will push other objects on the same z-index out of the way. If it has a higher z-index, say +100 higher, it will pop-up above the other objects on the page. The 'visibility' attribute only controls the objects visibility, it does not remove it from the display memory. It can still take up space even though it is not visible. The 'opacity' attribute does about the same thing, except it allows you to also make an object as transparent as you like.
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
Can anyone explain why the click handler is not invoked consistently in this example?
http://jsfiddle.net/4QBnf/
For instance, if you click in the upper left half of the div, it does not reliably increment the counter.
If I remove the padding-top from this block it works just fine:
.click-check:active {
background-color:blue;
padding-top: 25px;
}
I have tested this in a number of different browsers and it behaves the same way.
I found two possible issues with your code. You can view the fixes here:
http://jsfiddle.net/4QBnf/6/
CSS Box Model vs jQuery Box Model
Whenever you click on the top half of your box, you aren't technically clicking on .click-check, you are actually clicking on .count. This image shows the location of .count relative to .click-check:
jQuery counts this as a click on .click-check, but CSS doesn't. The number increments, but the CSS "active" effect isn't applied.
You can resolve this by removing the .count div and placing everything inside of .click-check.
jQuery Counter
The second issue is with your jQuery code. The code currrently reads:
$('.click-check').click(function() { $('.count').html(count++); });
count isn't increased until after this line is done. This means that the first click appears to have no effect.
This line will increment count, then display it to the user:
$('.click-check').click(function() { $('.click-check').html(++count); });
I've applied both updates to your example here:
http://jsfiddle.net/4QBnf/6/
Update
An alternate way to resolve the issue is to do everything through jQuery. This synchronizes all of the appearance and logic into a single box-model interpretation.
var count=0;
$('.click-check').mousedown(function() {
$('.click-check').addClass("active");
$('.click-check').html(++count);
setTimeout(function(){
$('.click-check').removeClass("active");
}, 50);
});
http://jsfiddle.net/4QBnf/15/
I have an issue with one of my ExtJS items. I have a list of items most of which are buttons with icons, but one is an href with a bit of html. I want to hide these items whenever an external property is disabled.
To do that, inside of the items I have been using the following
hidden: !this.external.prop.enabled
For the buttons this works fine. They are visible when the prop is enabled and totally hidden when the prop is disabled. The item that uses html however, is hidden every time. Even when I set hidden to false like so
hidden:false
the Item looks like this
{
xtype: 'box',
margin:'5',
autoEl:{
tag: 'a',
hidden: !this.external.prop.enabled,
href: BaseURL + Glue.uiConfig.url.launchProp,
html: 'Launch Prop'
}
},
These items are all in the same array so I'm not sure why they are exhibiting different behavior. Has anyone ever experienced something like this? Do I need to provide more information?
thanks,
Put the hidden outside the autoEl config.