When I add clarity modal component to my component HTML template I find it located under my component DOM all the time. If my component's template is an SVG I don't see the modal dialog shown in the UI because it is inside of SVG DOM. In this case it is best to add the modal dialog to the body element. Libs such as ngx-bootstrap or bootstrap-ui allow adding modal to the body as an option but i don't see this option in Clarity Modal. Any advice on how to accomplish this?
Thanks in advance.
Related
I am using mat drawer sidenav and content.
In the sidenav i have a button. the button should be above the sidenav and the content and between them.
I am not able to present the button above the two and it gets overwritten by them.Stackblitz
i do prefer not to change the css of the material warpper elements and focus on the button itself if it's possible.
position: fixed
to the button, solved the issue.
I am making a child button component that will open an included modal in that same component. Right now, since the modal is nested within the root element (of the child component), it is rendering inside the parent component's b-dropdown (Bootstrap Vue). I aim to have the modal remain in the child component, but to render in the middle of the window like all my other modals.
Here's the call from my parent component (which uses Pug):
b-dropdown(right text='Reports')
ExportItemsToPDF(:item_ids=`selectedItems`)
And here's the portion from the ExportItemsToPDF component:
.export_items_to_pdf
b-dropdown-item(#click.prevent='openModal()') {{buttonTitle}}
modal(name='export_items_to_pdf' height='auto' width='70%')
form.modal-container(#submit.prevent='submit')
h1 TEST
If there's any other supporting info needed, please let me know and I'll provide.
Thanks.
I don't think you can do it without any custom Javascript to manipulate the modal. If you are trying to benefit from a shared component that you can drop into other components (to keep your code DRY etc), you will have to split the modal into its own component, then in the parent component do something like...
ExportItemsToPDFModal
b-dropdown(right text='Reports')
ExportItemsToPDFDropdownItem(:item_ids=`selectedItems`)
...so that the modal is a sibling (or possibly higher, like an aunt/uncle or great-aunt/great-uncle) of the b-dropdown instead of a child element.
i have a Angular 2 project that uses Routes and differents components. one of this components is a login page that don't show any sidebar or footer... So, i need to put ONLY on this page a background (that covers all the body).
I try to use :host {..} but don't work.
How can access to the body background property on this component?
This component is on the same level that app.component.
app.component.html has the and the login component renders here.
Can you help me?
Not sure why you are applying backgorund. If you just want to hide side bar and footer for your login page then you can simply hide them based on your active route using hidden attribute or ngIf directive. Here the refernece for ngIf
It really depends on your login.component.html if :host will work and you didn't show it. You can wrap your login.component.html in a div container and add a class to it for its background color. This one works for me.
<div class="my-container>
<!--your content --!>
</div>
Here's a plunkr for the demo
I have a Panel that I'm using as a modal dialog box, and as such the contents should be hidden from view while the page is loading. However, if I use CSS to set the div's display:none or visibility:hidden then the YUI show() & hide() methods don't work properly (eg, clicking the button to call up the modal dialog greys out the screen, but the referenced div does not appear). Can anyone point me towards the best way to do this?
Thanks!
Try adding yui3-widget-loading to the container div. When Y.Panel is instantiated, it will remove this class. You can then define .yui3-widget-loading { display:none; } so it is not visible during page load.
I have an asp.net usercontrol that contains a jQuery UI Dialog Control.
All works as expected execpt the grey tranparent overlay (to make the form modal) only appears on the hidden div below the form where the dialog is triggered from.
Is it possible to target this overlay to the parent div? or is this not the right solution.
I have tried the blockUI plugin (and removing the Dialog style to prevent its overlay showing), but although it "looks" right on screen it disables all the controls including the ones in the dialog popup.
Any ideas?
Added: Screenshot
alt text http://www.freeimagehosting.net/uploads/e0555a0ec5.jpg
It might be a z-order issue. Can you post a screenshot to make it easier to understand. Also please post the high level HTML you are using on the aspx page.