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.
Related
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 company is running Wagtail as a headless API, using it more as a way to store bits of content rather than entire pages. As such there's the occasional feature that doesn't make sense for us. In this case it's the "internal link" feature. Since we don't manage "pages" per se I'd like to remove this option from the chooser found on the rich text field, as seen below.
I've identified several admin templates which could be overridden to remove this functionality, but I wanted to first see if there's something which can simply disable this "internal link" option so that it just doesn't even show up.
The _link_types.html template would allow me to remove Internal Link as a choice, but it appears Wagtail defaults to Internal Link which means that even if the option is gone, the Internal Link chooser still shows up. Barring a simple option that can be toggled off, where should I be looking to default selection to External Link?
Below is an approach, it kind of feels a bit hacky and it would be great if there was a more natural way to do this but hopefully this helps.
See the documentation for an explanation of the Wagtail Hooks.
Step 1 - hide the internal link option
Use the hook insert_editor_css to inject some css to 'hide' the first link.
This achieves the same goal as the _link_types template override you have attempted but 'scopes' this to the editor modal only.
This is important as you want to avoid breaking the 'move page' and scenarios where the page chooser will be shown. The css feels a bit hacky but hopefully gets the job done.
Step 2 - override the internal link option to external link for modals
Use the hook insert_editor_js to override the window.chooserUrls.pageChooser value, this will again be on the editor page only & for the modals only.
Set this value to the new 'default' you want, in the code below we have set this to the external link option.
You can see how these values are set globally in the editor_js.html template.
Code
# file: wagtail_hooks.py
from django.contrib.staticfiles.templatetags.staticfiles import static
from django.utils.html import format_html
from django.urls import reverse
from wagtail.core import hooks
#hooks.register('insert_editor_css')
def editor_css():
"""Add /static/css/admin.css to the admin."""
return format_html(
'<link rel="stylesheet" href="{}">',
static("css/admin.css")
)
#hooks.register('insert_editor_js')
def editor_js():
return format_html(
"""
<script>
window.chooserUrls.pageChooser = '{}';
</script>
""",
reverse('wagtailadmin_choose_page_external_link')
)
/* file: static/css/admin.css */
.modal-content .link-types :first-child {
/* hide the 'internal' link option from the page chooser */
display: none;
}
.modal-content .link-types {
/* ensure the 'before' element can be positioned absolute */
position: relative;
}
.modal-content .link-types::before {
/* hide the left '|' bar */
background: white;
bottom: 0;
content: '';
left: 0;
position: absolute;
top: 0;
width: 5px;
}
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.
I have a requirement to print the View model data using Print Button.
Currently i have a div and assigning my view content to it. This div has been already added in backbone region. In my javascript function, i am just setting the viewmodel content to the printdiv and it working with out any issue.
But the content which i have added for printing is getting appended in the browser HTML also, I dont want to show that in my browser. I tried setting visible hidden and display none to my printingdiv. but then printing is not working since the content is not visible
CSHTML:
<div id="printdiv"/>
JS:
Myapp.printdiv.show(viewData.view);
window.print();
Init.JS
Myapp.addRegions({
printdiv: '#printdiv',
});
Please help me to resolve this issue
Thanks
The best way to handle this sort of problem is with a print-specific stylesheet. This article explains how to do that in detail, but the short version is that you define your non-print styles as normal, then use CSS code like the following to override print-specific styles:
#printdiv {
display: none
}
#media print {
#printdiv {
display: block;
}
}
Is there a way to disable the icons in ui-select2? I am using ui-select2 in angular js, which is like adding tags while posting a question on stackoverflow:
How can I disable remove icon conditionally?
Official website of ui select2
[Edit 2018-11-12] You could always do a "display: none" on the x span:
span.select2-selection__choice__remove {
display: none;
}
You could also use that to disable click on it with pure JS.
And there is also a "locked" option: http://select2.github.io/select2/#locked-selections
You can then control, per data, which one can't be removed from the selection.
Could something like this help you?
Remove span tag in string using jquery
It's not a direct answer, and it's not ui-select2 specific, but it should help you understand how to remove certain elements. You can just add a condition and that's that.
This is also works
span.select2-selection__clear {
display: none;
}