We've been using pointerEvents: 'box-none' for a particular View where we want the things behind it to be clickable. From the React docs: https://reactnative.dev/docs/view
'box-none': The View is never the target of touch events but its subviews can be. It behaves like if the view had the following classes in CSS:
.box-none {
pointer-events: none;
}
.box-none * {
pointer-events: auto;
}
But we just updated to React 18, and now that view seems to be snagging all of the pointer events instead of letting them pass through to the background.
Any ideas what might be going wrong? Any fix suggestions?
From React docs in the yellow box:
https://reactnative.dev/docs/view#pointerevents
"Since pointerEvents does not affect layout/appearance, and we are already deviating from the spec by adding additional modes, we opt to not include pointerEvents on style. On some platforms, we would need to implement it as a className anyways. Using style or not is an implementation detail of the platform."
so you need to put it as direct prop on the ViewElement like this:
<View pointerEvents="box-none"></View>
instead of:
<View style={{pointerEvents: 'box-none'}}></View>
Related
I'm using the ag-grid-community:^24.1.0 and ag-grid-react: ^24.1.1in the react application. When I set the rowHeight as 25, it is displayed as shown below.
<div className="ag-theme-alpine" style={ { height: 400, width: 600 } }>
<AgGridReact rowSelection="multiple"
rowData={rowData}
rowHeight={25}>
...
</AgGridReact>
</div>
I tried setting
div.ag-theme-alpine div.ag-cell{font-size: 12px !important;vertical-align: middle;} as told in some other posts but there is no change.
However, when I remove the following property from the developer tool, it starts appearing fine.
I want to set the uniform rowHeight(other than the default). How can this be achieved?
You can set the row height to be static in the gridOptions or via the property rowHeight={25} the way you did.
However, agGrid also has a hardcoded value for the line-height that makes the rows only accept single line text.
changing the lineHeight, to something you prefer is the way to go if you want to start changing the rowHeight in addition to the fixed value.
Note: rowHeight field values don't work at all if you are in the infiniteRow model that is commonly used for server-side pagination because agGrid has problems calculating rowHeights and gridHeights if it doesn't know the full extent of the rows data.
if you want to change the lineHeight on all cells you can use the defaultColDef attribute cellClass and pass a class that forces the lineHeight
EDIT: here is how I do it,
in the defaultColDef object :
defaultColDef: {
....
cellClass:'cell-wrap-text',
....
}
then define that class like this:
.cell-wrap-text{
white-space: normal !important;
line-height: 23px !important;
}
the whitespace line will make your text break and go back to line, since agGrid doesn't allow that by default.
after doing so, you can set the rowHeight in the react component like you already did.
Is there a way to define a custom header template for a dynamic dialog?
For the normal dialog you have the possibility to define the p-header tag, with your custom html code.
But I don't find any way to do this for a dynamic dialog.
There is no official way mentioned in PrimeNG documents to add custom template to DynamicDialog header. When we open a DynamicDialog, we only attach a body of Dialogbox and not header/footer.
You can add dynamic title to DynamicDialog while opening it. Hope this will help.
const ref = this.dialogService.open(DialogComponent, {
data: this.data,
header: this.title,
width: '60%'
});
You can modify css of DynamicDialog header like:
::ng-deep .p-dialog .p-dialog-header {
border-bottom: 1px solid #000;
}
Important Note:
You can use simple Dialog in PrimeNG where you can create custom headers,body & Footers. It will work same like DynamicDialog. Do mention modal=true like below:
<p-dialog [(visible)]="display" [modal]="true">
<p-header>
Header content here
</p-header>
Content
<p-footer>
//buttons
</p-footer>
The answer is a little bit late. But maybe someone else is also searching for a workaround. Afaik it is still not possible since this issue on GitHub is still open.
However in documentation to DynamicDialog there is mentioned, that you can not show the header with the parameter showHeader. This means you could easily just hide the default header and in the component for your dialog design your own header.
I am using Material-UI in my react application. Recently, I updated my packages to the latest version. Now, when I open a dialog in my application, padding-right: 17px; will be added to the body tag.
I also checked the Material-UI site, and this is happening on their website too with dialogs.
Is this a bug with the new version of Material-UI?
How can I remove this padding from the body tag when opening a dialog?
Update: This padding will be added to the body tag with Drawer, Menu, Dialog, and Popover components.
as it was mentioned by #Reins you can use disableScrollLock property. The thing is sometimes this property is nested on components's input so you need to use inputProps in order to set it. Here is an example with Select component:
<Select
className={classes.select}
inputProps={{MenuProps: {disableScrollLock: true}}}
...
/>
Sometimes you may want to dig into MUI codebase in order to figure out how to apply some nested element's properties.
Just give disableScrollLock={ true }.
I think it will solve the issue because I had the same.
I added disableScrollLock prop to my Dialog Component.
It worked.
You can use a mui-fixed class for handling this issue, it's helpful for me.
Here is a link for material UI mui-fixed document :
https://material-ui.com/getting-started/faq/#why-do-the-fixed-positioned-elements-move-when-a-modal-is-opened
Hope this will help anyone.
For me the solution was to add
overflow: auto;
to the #root selector:
#root {
... other css that was there before
overflow: auto;
}
I add in my main css file the following snippet of code and I get rid of body margins:
body {
margin: 0;
}
I realized this came from a parent Container. I just added this and it worked for me. Also realized this is adaptive to screen size, so this code is applied to all the sizes from xs and up breakpoints.
sx={{
[theme.breakpoints.up("xs")]: {
padding: 0
},
}}
My theme size is not coming 100%.I am having a background which render inside the react app. But when i am running this code, my background is not coming 100% based on the screen size.
https://prnt.sc/jiijdo
Because you did not include any code at all, it is very hard to help.
But: Because in React a component isn't allowed to have more than one child elements many "unused" divs are used. So my advice would be to get into the Developer Tool and search from the top (html > body > #root > etc) for a top level div that isn't the full height and style it to take the full viewport height (height: 100vh)
You can assign min-height: 100vh to the element of with your background, but it's like a quick fix solution.
If you want to fix issue properly, please include a snippet of your code
const backgroundbg={
backgroundImage: 'url(' + Bgimg + ')', // ES6
height:"100%",
backgroundRepeat:"no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
minHeight: "100vh"
}
this code works for me, it resolve my issues.
Wanting to leverage some of the built in functionality (date validation, etc) of react-day-picker while not offering the calendar overlay (offering the user an input field without the calendar overlay).
I'm not seeing any options in the docs to show only the input field without the calendar overlay.
Am I missing something?
Maybe a hacky way but I can see that you can provide custom prop classNames to the DayPickerInput component. Source
And you could provide an object like
<DayPickerInput>
classNames={{
overlayWrapper: 'myCustomClass'
}}
/>
.myCustomClass {
display: none;
}
or if you can hide the default class for the overlay wrapper
.DayPickerInput-OverlayWrapper {
display: none!important;
}
Nope, looking into the source but it's open source. You can copy the file and remove the parts you don't need.