I am running into an issue where part of my component within the modal generated by lightning:overlayLib requires the user to scroll. I want the div that appears to display over the top of the footer component. Is this possible?
Current issue:
If I disable the two overflow attributes in css on the slds-modal__content (shown below):
I get the desired result:
BUT, I cannot for the life of me, get this to work. When I pass in the modified css class slds-modal__content, it fills the screen with white. (When I set overflow: visible)
I am generating the component using the lightning:overlayLib using this code:
var modalHeader, modalBody, modalFooter;
$A.createComponents([
["c:UWB_modalHeader",{'label':'Approve'}],
["c:UWB_utilityModal",{'modalName':'approve', 'approvalId':data.proccessInstanceToPiwi[data.approvalHistory[0].ProcessInstanceId], 'relatedObject':recordData}],
["c:UWB_modalFooter",{'cancelLabel':'Cancel', 'submitLabel':'Approve'}]
],
function(components, status){
if (status === "SUCCESS") {
modalHeader=components[0];
modalBody = components[1];
modalFooter = components[2];
component.find('overlayLib').showCustomModal({
header: modalHeader,
body: modalBody,
footer: modalFooter,
showCloseButton: false,
cssClass: 'slds-modal__content'
})
}
}
);
Where the css class 'slds-modal__content' is as follows:
.THIS .slds-modal__content{
overflow-y: visible !important;
overflow-x: visible !important;
}
Even after attempting to modify the class, the issue still persists. I have been successful with this method generating a standard modal without using lightning:overlayLib, but I'm not able to generate the modal in this way.
I've just recently started using lightning:overlayLib myself. I didn't have the issue you're having, but I realized that since the body and footer components require application events to communicate, the feature of declaring a footer component that requires communication with the body component at all is too cumbersome to be worth it.
I would recommend not using the footer component feature of lightning:overlayLib at all, and just put the buttons you need in the body component.
Related
Using Mui styled function to style both jsx elements and MUI components. The displayName is not showing when I debug the element in Chrome or any browser for that matter.
Anyone know how to fix this.
I'm using Vite for my setup.
const MyComponent = styled('div')`
display: flex;
`;
As you can see from the below screenshot its not showing MyComponent display name instead its showing css-1vht943
You can see class only inside the Element tab. When you click on one of the lines which contains the class name.
You can find all the CSS related to that class under the styles tab including display name for your case. Please check the image below
If you want to have a name I think you can use styled('div', { name: 'MyTheme'}), then you will see something like <div class="css-t7mscw-MyTheme-root"></div>. Don't know if this is what you want, but here it is vaguely mentioned in the doc.
I tried including a Info Icon from mui in md toast, but it didn't work.
This is what I tried:
import InfoOutlinedIcon from "#mui/icons-material/InfoOutlined";
toast("Information Toast", {
icon: <InfoOutlinedIcon />,
autoClose: false,
});
And it throws me an error for not being able to read properties of undefined. I saw that you can include it inside the message, but if I write a longer message it no longer aligns with the icon. That's why I wanted to try it this way.
Does someone know another way, I can use a custom Icon from mui in my toast?
Darkmode works everywhere in my react app, except on a headless ui combobox. I put a styled h1 in the same component and applied dark:bg-red-200(and any other style) no problem. The combobox accept all other tailwind utilities including attibutes like hover: but not the dark: property.
For others (such as me) stumbling upon this:
E.g. the Dialog-component (and I assume others too) render right in the body tag (source)
If you are using "the class strategy" to handle dark mode (i.e. adding a "dark" class to the wrapper) this will be a problem, because the class is not anymore parent to the Dialog
Solution I ended up using:
I ended up using useEffect to add the dark class to the body:
useEffect(() => {
if(darkMode){
document.body.classList.add('dark')
}else{
document.body.classList.remove('dark')
}
}, [darkMode])
I am using React dropzone for file upload
<DropZone
accept='.pdf,.pptx,.ppt,.docx,.doc,.xls,.xlsx,.xslx,.png,.xsl,.jpg,.jpeg,.gif,.zip'
onDrop={ files => {
this.handleFileDrop(files);
this.dragLeaveHandler();
} }
onDragEnter={ this.dragOverHandler }
onDragLeave={ this.dragLeaveHandler }
multiple={ false }
style={ { height: '100%' } }
>
dragOverHandler = () => {
console.log('enter');
this.setState({
isDragOver: true,
});
};
dragLeaveHandler = () => {
console.log('exit');
this.setState({
isDragOver: false,
});
};
When a file is moving above the drop zone onDragLeave event fires simultaneously.
Should I use some other events?
How can I fix this issue?
You could use pointer-events: none; on the element(s) that are firing the drag leave. That should still allow the dropped event and getting the accepted file though would stop overriding the dropzone events.
The problem you're facing is most likely caused by the DOM events dragEnter and dragLeave getting messed up instead of any flaw in the react-dropzone package. Some elements may cause hovering over them in certain positions not to register as hovering over their parent element. For example, there is a thin sliver at the top edge of any plain string rendered inside a block displayed element. Most commonly this happens inside a <p> tag.
Without seeing the children rendered inside your dropzone, it is impossible to give a specific fix. Generally, you will have to mess with the styling of the children, though. <p> tags for example will not be a problem if their size is set to 0 pixels or if they're replaced with <span> tags. Both options will disrupt the displaying of the children, which is unfortunatley unavoidable.
As for using other events, you're out of luck. The DropZone component relies on the onDragEnter and onDragLeave HTML DOM events. Therefore any fix you might come up with won't fix the component itself.
All in all, it's an unfortunate issue that just has to be dealt with. The simplest way to deal with it is to just have at most one piece of text inside the dropzone and to set its size to 0 pixels with css: height: 0px;. Regular <div> elements won't cause issues, so you can craft an intricate dropzone using them.
I know that react uses its own synthetic implementation of events. However it appears to me that they are not exactly like standard html and this is a problem. In my case I have a checkbox that is a sibling of some img tags. There are two img tags, one for representing checked and another unchecked. I have some css styling that does a display none when the checkbox is in an unchecked state. Trying to get this html/css working with react is hard. It appears that the click event is not propagating onto the checkbox sibling with a react component, although it works from standard html. Note as there's some confusion I know that the non-react version of this is using css and not events. But I'm trying to implement a react evented version of the same thing, and was expecting normal html event propagation behavior--which I'm not seeing. Also note the checkbox is a sibling of the label. It's also transparent, so the user never actually clicks on the checkbox they click on the img tags.
.checkbox-image input[type="checkbox"] + label img.selected {
display: none;
}
.checkbox-image input[type="checkbox"] + label img.unselected {
display: block;
}
<div class="checkbox-image"><input id="portfolio-standard-dev" type="checkbox" data-name="PortfolioStandardDeviation"><label for="mp-chart3"><img class="unselected" src="/images/img-843599.png"><img class="selected" src="/images/img-1b9f30.png"><span>Portfolio Standard Deviation</span></label></div>
CSS has nothing to do with events. An event propagation cannot impact your styles.
You have to handle when the user check/uncheck the checkbox and manually update the class of the image.
Or you can try the following pure CSS:
.checkbox-image input[type="checkbox"]:checked + label img {
display: none;
}
.checkbox-image input[type="checkbox"] + label {
display: block;
}