I've got an issue with storybook using React. I've got a modal which is rendered inside a dom element (id=protal).
I will like to know how can I wrap or add a dom element in my storybook to make it work.
thanks for your time
Related
I have 2 buttons and i want to animate each one when clicked. The problem is that when the second button is clicked the animation restarts because of React re-rendering the document. How can i solve this? I am new to StyledComponents.
[Here is a codesandbox whit the problem.]
https://codesandbox.io/s/naughty-joliot-v3mlf
Thanks.
You should move style components out of function, and then pass props (active and active2) to style components.
Here is fork your example code, and do some modification:
https://codesandbox.io/s/tender-curran-0bxf0?file=/src/App.js
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.
I created date component in my angular project. flatpickr is working correctly. Even if I set position as below in the config, when test responsivity of the screen, flatpickr is aligned automatically top of the screen. How can I fix it? How can I align it's position to below of input?
check the dom if the inside flatpikr tag the 2 div are showing or not if not then set alignmemnt to the html element
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.
please let me know how to vertically scroll to a particular element in robot framework with selenium2library.
I have dynamically changing values , that i am appending in the xpath and want to scroll to that element.
below is the syntax that i have tried.
Execute Javascript window.document.getElementByXpath('//div[#data-documenttype= "${name}"]).scrollIntoView(true);
***Settings***
Library ExtendedSelenium2Library
*** Keywords ****
**Scroll Right Panel To Click a File**
Scroll Element Into View ${Element-path-From}
Wait Until Element is visible ${Element-Path-To} timeout=5s
Set Focus To Element ${Element-Path-To}
Click Element ${Element-Path-To}
I didn't have to setup the extra library. This works for me:
Execute JavaScript window.scrollTo(0, document.body.scrollHeight)